特效描述:利用jQuery實現 拖動排序 點擊查看 大圖代碼,利用jQuery實現拖動排序點擊查看大圖代碼
代碼結構
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/style.css" />
2. 引入JS
<script id="script" src="js/jquery-2.0.3.min.js" iconfont="true"></script> <script id="script" src="js/Jsequencing.js" iconfont="true"></script>
3. HTML代碼
<h3>可拖動排序哦</h3> <div class=""> <button onClick="imgulp.datadel()" class="btn btn-danger radius">批量刪除</button> <button onClick="imgulp.getnewarr()" class="btn btn-primary radius">獲取最新數組</button> <button onClick="addimg()" class="btn btn-primary radius">增加圖片</button> </div> <div class="cl imglist" id="img_ul"></div> <script> var imgulp = new Jsequencing({ listid:"img_ul",//頁面圖片列表ID thumbherf:"img/Thumb/",//列表圖片前綴 bigherf:"img/big/",//原圖前綴[同列表圖相同時,省略] jsondata:true, imgsrcarr:[//圖片數據數組 {src:"a1.png?id=0",title:"客廳0"}, {src:"a2.png?id=1",title:"客廳1"}, {src:"a3.png?id=2",title:"客廳2"}, {src:"a4.png?id=3",title:"客廳3"}, {src:"a5.png?id=4",title:"客廳4"} ], }); function addimg(){ imgulp.addimgarr([ {src:'a1.png?id=1'} ]) } </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>