表单中图片上传预览和删除功能

最近整一个表单，需要带有图片上传，预览和删除功能，后端是 php 的 ci 框架，想用传统的 js 和 jquery 实现，不使用前端框架，也找了一些资料，看得糊涂。想问下有什么适合新手，友好度高一点的教程没有。

现在用的是最基本的方法，可以上传多个图片，但是想把上传的多个图片做成幻灯片一样可以左右切换预览，并且带有删除当前显示图片这个功能

function preview_image() 
{
 var total_file=document.getElementById("upload_file").files.length;
 for(var i=0;i<total_file;i++)
 {
  $('#image_preview').append("<img style='width: 480px;height:320px;' src='"+URL.createObjectURL(event.target.files[i])+"'><br>");
 }
}

上传之后的图片怎样才能用 js 来切换呢？

<div id="image_preview">
    <img style="width: 480px;height:320px;" src="blob:http://www.xxx.cn/22ba8853-006a-48af-9414-c4419bf4fda2">
    <img style="width: 480px;height:320px;" src="blob:http://www.xxx.cn/a17bab07-863e-4ff8-b5ef-ca4de1f225c2">
    <img style="width: 480px;height:320px;" src="blob:http://www.xxx.cn/67af359d-2ece-4ead-9e86-da38243d149f">
</div>

之前自己写过的 js 切换图片是在 <img> 标签里加入了data=0 data=1 之类的，现在是上传的图片，我应该怎样做标记才能使用 js 来切换图片呢？