JQ實現簡易輪播圖
阿新 • • 發佈：2018-11-16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0;list-style:none;} div{width: 520px;height: 280px;margin:100px auto;border: 1px solid orangered;overflow: hidden;} ul{position: relative;} li{position: absolute;top:0;left:0;} img{width: 520px;height: 280px;} </style> </head> <body> <div> <ul> <li><img src="images/01.jpg" alt=""></li> </ul> </div> <script src="jquery-3.3.1.js" charset="utf-8"></script> <script> $(function(){ //資料來源,遍歷img資料路徑 var imgData=[]; for(var i=1;i<5;i++){ imgData.push('images/0'+i+'.jpg'); } //設定索引 var currentIndex=0; //開啟事件 $(document).click(function(event){ //獲取螢幕的一半，並定義標記符 var disX=$(window).width()/2; var isLeft=true; //判斷,如果點選了左邊部分 if(disX>=event.pageX){//左邊 isLeft=true; currentIndex--; currentIndex=(currentIndex+imgData.length)%imgData.length;//處理邊界值，由於currentIndex會出現負數，所以加上imgData的長度 }else{ isLeft=false; currentIndex++; currentIndex=currentIndex%imgData.length; } //建立節點 var imgName=imgData[currentIndex]; var $li=$('li').clone();//複製li $li.children('img').attr('src',imgName);//設定複製的img的src屬性 $li.prependTo('ul'); //動畫展示 if(isLeft){ $('li:last').animate({ left:'-520px' },500,function(){ $(this).remove(); }) }else{ $('li:last').animate({ left:'520px' },500,function(){ $(this).remove(); }) } }) }) </script> </body> </html>