JS實現一個簡單的輪播圖
阿新 • • 發佈：2018-11-19
主要程式碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div id="dv"> <!--相框--> <div id="dv2"> <!--存放圖片--> <ul id="ul1" class="lunbo"> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> <li><a href="#"><img src="images/4.jpg" alt=""></a></li> <li><a href="#"><img src="images/5.jpg" alt=""></a></li> <li><a href="#"><img src="images/6.jpg" alt=""></a></li> </ul> <!--圓點--> <ul id="ul2" class="dian"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <!--方向箭頭--> <ul class="fx"> <li id="left"><span><</span></li> <li id="right"><span>></span></li> </ul> </div> </div> <script src="js/common.js"></script> <script src="js/moveEle.js"></script> <script> //獲取相框的寬度 var xkk=my$('dv2').offsetWidth; console.log(xkk); //獲取圖片 var tupian=my$('ul1'); console.log(tupian.className); //獲取點 var list=my$('ul2').children; console.log(list); var index=0; for(var i=0;i<list.length;i++){ //為每次滑鼠觸碰的點設定一個屬性index，用index來儲存數字i，用來設定移動的距離 list[i].setAttribute('index',i); //滑鼠懸浮事件實現移動 list[i].onmouseover=function(){ //首先清除所有點的背景顏色 for(var j=0;j<list.length;j++){ list[j].removeAttribute('class'); } //設定當前懸浮的點的背景顏色 this.className='current'; //呼叫移動函式，並且先獲取到當前index的值 index=this.getAttribute('index'); move(tupian,-xkk*index,50); }; } my$('left').onmouseover=function(){ this.style.backgroundColor='rgba(255,255,255,.8)'; }; my$('left').onmouseout=function(){ this.style.backgroundColor='rgba(255,255,255,.5)'; }; my$('right').onmouseover=function(){ this.style.backgroundColor='rgba(255,255,255,.8)'; }; my$('right').onmouseout=function(){ this.style.backgroundColor='rgba(255,255,255,.5)'; }; //左右箭頭切換圖片 //var index=0; 不用自己定義了，直接使用上面的滑鼠懸浮事件的index，這樣可以使得圖片實時移動 my$('right').onclick=function(){ if(index<list.length-1){ index++; for(var k=0;k<list.length;k++){ list[k].removeAttribute('class'); } list[index].className='current'; move(tupian,-xkk*index,50); } }; my$('left').onclick=function(){ if(index>0){ index--; for(var k=0;k<list.length;k++){ list[k].removeAttribute('class'); } list[index].className='current'; move(tupian,-xkk*index,50); } }; </script> </body> </html>
其中樣式程式碼以及移動元素的moveEle函式和獲取元素的my$函式在外部的js中。
分別如下：
//移動元素的函式 function move(ele,aim,step){ //每次點選執行函式的時候都清除定時器，防止連續點選加快移動速度 //之所以用ele.time是為了不出time undefined的錯誤 clearInterval(ele.time); ele.time=setInterval(function() { //獲取當前位置 offsetLeft獲得的是數字不帶單位 var now = ele.offsetLeft; //確定每次移動的單位距離step的正負，如果目標距離aim大於當前距離，step為正，反之step為負 //每次執行函式之前將step初始化為正值 step = Math.abs(step); step = now < aim ? step : -step; //設定每次執行函式當前得位置都在變化，變化量為step now += step; //設定元素的位置，如果正在向目標位置移動，那麼Math.abs(now-aim)>Math.abs(step),如果已經在目標位置的地方 //但是不能精確則Math.abs(now-aim)<Math.abs(step),這兩種情況的當前位置是不一樣的 if (Math.abs(now - aim) > Math.abs(step)) { ele.style.left = now+'px'; } else if (Math.abs(now - aim) < Math.abs(step)) { ele.style.left = aim+'px'; clearInterval(time); } else if(Math.abs(now - aim) === Math.abs(step)){ ele.style.left = aim+'px'; } },20); }
//通過id獲取元素
function my$(id){
return document.getElementById(id);
}
樣式程式碼：
* { margin: 0; padding: 0; } body { font: 13px 'Macrosoft Yahei'; font-weight: bold; color: green; } img { vertical-align: middle; } ul { list-style-type: none; } li { cursor: pointer; } #dv { width: 450px; height: 300px; margin: 100px auto; border: 1px solid gray; /*overflow: hidden;*/ padding: 3px; } #dv2 { height: 100%; overflow: hidden; position: relative; } #dv2 ul.lunbo { width: 1000%; position: absolute; top: 0; left: 0; } #dv2 ul li { float: left; } #dv ul li a img { width: 450px; height: 300px; } ul.dian { position: absolute; right: 10px; bottom: 10px; } ul.dian li { width: 16px; height: 16px; text-align: center; line-height: 16px; background-color: #fff; margin-left: 10px; border: 1px solid gray; } ul.dian li.current { background-color: yellow; } #dv2 ul.fx li { top: 50%; margin-top: -15px; width: 50px; height: 30px; border-radius: 15px; position: absolute; background-color: rgba(255,255,255,.5); line-height: 30px; } #dv2 ul.fx li#left { left: 0; transform: translate(-50%,0); } #dv2 ul.fx li#right { right: 0; transform: translate(50%,0); } #dv2 ul.fx li#left span { position: absolute; right: 12px; } #dv2 ul.fx li#right span { position: absolute; left: 12px; }
最終效果：
完整的專案壓縮包百度網盤下載>>>提取碼：pioh
簡單輪播圖
