js實(shí)現(xiàn)輪播圖的完整代碼

發(fā)布時(shí)間：2020-09-10 06:59:04 來(lái)源：腳本之家閱讀：175 作者：YauCheun 欄目：web開發(fā)

今天寫一個(gè)完整的輪播圖，首先它需要實(shí)現(xiàn)三個(gè)功能：

1.鼠標(biāo)放在小圓點(diǎn)上實(shí)現(xiàn)輪播

2.點(diǎn)擊焦點(diǎn)按鈕實(shí)現(xiàn)輪播

3.無(wú)縫自動(dòng)輪播

輪播圖的原理：

一系列的大小相等的圖片平鋪，利用CSS布局只顯示一張圖片，其余隱藏。通過(guò)計(jì)算偏移量（封裝一個(gè)動(dòng)畫函數(shù)）自動(dòng)播放，或通過(guò)手動(dòng)點(diǎn)擊事件切換圖片。

js實(shí)現(xiàn)輪播圖的完整代碼

html布局：

<div id="box" class="all">
 <div class="inner"> <!-- 相框-->
 <ul>
  <li><a href="#"><img src="images/18.jpg" width="550" height="320" alt=""></a></li>
  <li><a href="#"><img src="images/19.jpg" width="550" height="320" alt=""></a></li>
  <li><a href="#"><img src="images/14.jpg" width="550" height="320" alt=""></a></li>
  <li><a href="#"><img src="images/17.jpg" width="550" height="320" alt=""></a></li>

 </ul>
 <ol> <!--里面存放小圓點(diǎn)-->

 </ol>
 </div>
 <div class="focusD" id="arr">
 <span id="left">&lt</span>
 <span id="right">&gt</span>
 </div>
</div>

css樣式：

* {
  margin: 0;
  padding: 0;
 }
 /*<--清除底部三像素距離-->*/
 img {
  vertical-align: top;
 }

 .all {
  width: 550px;
  height: 320px;
  margin: 100px auto;
  padding: 5px;
  border: 1px solid #ccc;
  position: relative;
 }

 .inner {
  position: relative;
  width: 550px;
  height: 320px;
  background-color: pink;
  overflow: hidden;
 }

 .inner ul {
  width: 1000%;
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
 }

 .inner ul li {
  float: left;
 }

 .focusD {
  position: absolute;
  left: 0;
  top: 50%;
  width: 550px;
  padding: 0 10px;
  height: 30px;
  box-sizing: border-box;
  display: none;
 }

 .inner ol {
  position: absolute;
  right: 30px;
  bottom: 10px;
 }

 .inner ol li {
  width: 15px;
  display: inline-block;
  height: 15px;
  margin: 0 3px;
  cursor: pointer;
  line-height: 15px;
  text-align: center;
  background-color: #fff;
 }
 /*當(dāng)前的高亮的小圓點(diǎn)*/
 .inner ol .current {
  background-color: orange;
  color: #fff;
 }

 .focusD span {
  display: inline-block;
  width: 25px;
  font-size: 24px;
  height: 30px;
  color: #ccc;
  line-height: 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
 }

 #left {
  float: left;
 }

 #right {
  float: right;
}

顯示效果：

js實(shí)現(xiàn)輪播圖的完整代碼

js部分：

接下來(lái)我們要寫js 代碼，首先我們先獲取我們需要的所有元素。注：my$("id")即document.getElementById，為了簡(jiǎn)便即建的方法。

 var index=0;
 //獲取最外面的div
 var box = my$("box");
 //獲取相框
 var inner = box.children[0];
 //獲取去相框的寬度
 var imgWidth = inner.offsetWidth;
 // 獲取ul
 var ulObj = inner.children[0];
 //獲取ul中所有的li
 var list = ulObj.children;
 //獲取ol
 var olObj = inner.children[1];
 //獲取焦點(diǎn)
 var arr = my$("arr");

然后我們需要給它創(chuàng)建小按鈕即小圓點(diǎn)并注冊(cè)鼠標(biāo)進(jìn)入事件，再此之前我們要明白，小圓點(diǎn) 1 2 3 并不是寫死的，它是根據(jù)ul li中的圖片張數(shù)來(lái)決定的，所以我們要先在js中給div中的ol中的添加li(即小圓點(diǎn))，并且給ul中的圖片幾li添加索引值以便下一步的操作。

 //創(chuàng)建小按鈕-----根據(jù)ul中l(wèi)i的個(gè)數(shù)
 for (var i = 0; i < list.length; i++) {
 var liObjs = document.createElement("li");
 olObj.appendChild(liObjs);
 liObjs.innerHTML = (i + 1);
 //在ol中每個(gè)li中增加自定義屬性，添加索引值
 liObjs.setAttribute("index", i);
 //注冊(cè)鼠標(biāo)進(jìn)入事件
 liObjs.onmouseover = function () {
  //先干掉所有背景顏色
  for (var j = 0; j < olObj.children.length; j++) {
  olObj.children[j].removeAttribute("class");
  }
  //設(shè)置當(dāng)前鼠標(biāo)進(jìn)來(lái)的類樣式
  this.className = "current";
  //獲取ol中l(wèi)i的索引值
  index = this.getAttribute("index");
  //移動(dòng)ul
  animate(ulObj, -index * imgWidth); //移動(dòng)動(dòng)畫函數(shù)
 };
 }
 //設(shè)置第一個(gè)ol中l(wèi)i的背景顏色
 olObj.children[0].className = "current";

要實(shí)現(xiàn)無(wú)縫滾動(dòng) 就需要多一張圖片才行，即克隆第一張圖片，放到最后面。

 //克隆ol中第一個(gè)li放到最后一個(gè)
 ulObj.appendChild(ulObj.children[0].cloneNode(true));

下一步就要實(shí)現(xiàn)點(diǎn)擊左右的按鈕實(shí)現(xiàn)輪播

//點(diǎn)擊右邊按鈕
 my$("right").onclick=clickHandle;
 function clickHandle() {
  if (index==ulObj.children.length-1){
  ulObj.style.left=0+"px";
  index=0;
  }
  index++;
  animate(ulObj,-index*imgWidth);
  if (index==list.length-1){
  olObj.children[0].className="current";
  olObj.children[olObj.children.length-1].className="";
  }else {
  for (var i=0;i<olObj.children.length;i++){
   olObj.children[i].className="";
  }
  olObj.children[index].className="current";
  }
 };
 //點(diǎn)擊左邊按鈕
 my$("left").onclick=function () {
  if (index==0){
  index=list.length-1;
  ulObj.style.left=-index*imgWidth+"px";
  }
  index--;
  animate(ulObj,-index*imgWidth);
  for (var i=0;i<olObj.children.length;i++){
  olObj.children[i].className="";
  }
  olObj.children[index].className="current";
 };

最后一步就是自動(dòng)輪播，即可以創(chuàng)建一個(gè)定時(shí)器，每隔一段時(shí)間就調(diào)用左右按鈕的點(diǎn)擊事件，相當(dāng)于點(diǎn)按鈕，但是要注意的是當(dāng)鼠標(biāo)放進(jìn)相框的時(shí)候要清除定時(shí)器，不然在你點(diǎn)擊的時(shí)候它還是會(huì)自動(dòng)輪播。

完整js代碼：

<script>
 var index=0;
 //獲取最外面的div
 var box = my$("box");
 //獲取相框
 var inner = box.children[0];
 //獲取去相框的寬度
 var imgWidth = inner.offsetWidth;
 // 獲取ul
 var ulObj = inner.children[0];
 //獲取ul中所有的li
 var list = ulObj.children;
 //獲取ol
 var olObj = inner.children[1];
 //獲取焦點(diǎn)
 var arr = my$("arr");

 //創(chuàng)建小按鈕-----根據(jù)ul中l(wèi)i的個(gè)數(shù)
 for (var i = 0; i < list.length; i++) {
 var liObjs = document.createElement("li");
 olObj.appendChild(liObjs);
 liObjs.innerHTML = (i + 1);
 //在ol中每個(gè)li中增加自定義屬性，添加索引值
 liObjs.setAttribute("index", i);
 //注冊(cè)鼠標(biāo)進(jìn)入事件
 liObjs.onmouseover = function () {
  //先干掉所有背景顏色
  for (var j = 0; j < olObj.children.length; j++) {
  olObj.children[j].removeAttribute("class");
  }
  //設(shè)置當(dāng)前鼠標(biāo)進(jìn)來(lái)的類樣式
  this.className = "current";
  //獲取ol中l(wèi)i的索引值
  index = this.getAttribute("index");
  //移動(dòng)ul
  animate(ulObj, -index * imgWidth); //移動(dòng)動(dòng)畫函數(shù)
 };
 }
 //設(shè)置第一個(gè)ol中l(wèi)i的背景顏色
 olObj.children[0].className = "current";
 //克隆ol中第一個(gè)li放到最后一個(gè)
 ulObj.appendChild(ulObj.children[0].cloneNode(true));


 var timeId=setInterval(clickHandle,3000);

 my$("box").onmouseover=function(){
 arr.style.display="block";
 clearInterval(timeId);
 };
 //點(diǎn)擊右邊按鈕
 my$("right").onclick=clickHandle;
 function clickHandle() {
  if (index==ulObj.children.length-1){
  ulObj.style.left=0+"px";
  index=0;
  }
  index++;
  animate(ulObj,-index*imgWidth);
  if (index==list.length-1){
  olObj.children[0].className="current";
  olObj.children[olObj.children.length-1].className="";
  }else {
  for (var i=0;i<olObj.children.length;i++){
   olObj.children[i].className="";
  }
  olObj.children[index].className="current";
  }
 };
 //點(diǎn)擊左邊按鈕
 my$("left").onclick=function () {
  if (index==0){
  index=list.length-1;
  ulObj.style.left=-index*imgWidth+"px";
  }
  index--;
  animate(ulObj,-index*imgWidth);
  for (var i=0;i<olObj.children.length;i++){
  olObj.children[i].className="";
  }
  olObj.children[index].className="current";
 };

 my$("box").onmouseout=function(){
 arr.style.display="none";
 timeId=setInterval(clickHandle,3000);
 };



 // 設(shè)置一個(gè)元素，移動(dòng)到指定位置
 function animate(element, target) {
 clearInterval(element.timeId);
 element.timeId = setInterval(function () {
  var current = element.offsetLeft;
  var step = 9;
  step = current > target ? -step : step;
  current += step;
  if (Math.abs(target - current) > Math.abs(step)) {
  element.style.left = current + "px";
  } else {
  clearInterval(element.timeId);
  element.style.left = target + "px";
  }
 }, 10);
 }
　　function my$(id) {
 　　 return document.getElementById(id);
　　　　}
</script>

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

js實(shí)現(xiàn)輪播圖的完整代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽