溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么在web項(xiàng)目中實(shí)現(xiàn)一個(gè)手動(dòng)輪播功能

發(fā)布時(shí)間：2020-12-31 15:36:33 來源：億速云 閱讀：169 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在web項(xiàng)目中實(shí)現(xiàn)一個(gè)手動(dòng)輪播功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
<!-- <script type="text/javascript" src="demo.js"></script> -->
</head>
<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 ul{
 list-style: none;
 }
 a{
    text-decoration: none;
  }
 #container{
 position: relative;
 width: 500px;
 height: 260px;
 margin: 20px auto;
 overflow: hidden; /*溢出隱藏：只顯示一張圖片*/
 }
 #container .parent{
 position: absolute;
 width: 2500px; /*整個(gè)圖片層長(zhǎng)度：500*5=2500*/
 height: 260px;
 }
 
 #container .parent li{
 float: left;
 width: 500px;
 height: 100%;
 }
 #container .parent li img{
 width: 100%;
 height: 100%;
 }
 #container .btnLeft,
 #container .btnRight{
 width: 30px;
   height: 30px;
   background-color: #9E9E9E;
   border-radius: 20%;
   opacity: 80%;
   position: absolute; /*包含塊為圖片顯示層container*/
   top: 0;
   bottom: 0;
   margin: auto;
   font-size: 20px;
   color: #f40;
   text-align: center;
   line-height: 30px;
 }
 #container .btnLeft{
   left: 10px;
 }
 #container .btnRight{
 right: 10px;
 }
 #container .btnLeft:hover,
 #container .btnRight:hover{
 opacity: 90%;
 cursor: pointer;
 }
 /*蒙層*/
 #container .modal{
 width: 100%;
 height: 40px;
 background: rgba(0,0,0,.3);
 position: absolute;
 left: 0;
 bottom: 0;
 line-height: 40px;
 padding: 0 40px;
 box-sizing: border-box;
 }
 #container .modal .title{
 float: left;
 color: #fff;
 font-size: 12px;
 }
 #container .modal .dots{
 float: right;
 position: absolute;
 bottom: 10px;
 left: 340px;
 }
 #container .modal .dots li{
 width: 15px;
 height: 15px;
 border-radius: 50%;
 float: left;
 /*可以使用行塊盒*/
 /*display: inline-block;*/
 margin: 0 5px;
 cursor: pointer;
 }
 .clearfix::after{
 content: "";
 display: block;
 clear: both;
 }
 .on{
 background-color: red;
 }
 .off{
 background-color: gray;
 }
</style>
<body>
<div id="container">
 <ul class="parent" >
 <li><img src="1.jpg"></li>
 <li><img src="2.jpg"></li>
 <li><img src="3.jpg"></li>
 <li><img src="4.jpg"></li>
 <li><img src="5.jpg"></li>
 </ul>

 <div class="btnLeft">&lt;</div>
 <div class="btnRight">&gt;</div>
 <div class="modal">
 <div class="title">
  <h3>輪播圖</h3>
 </div>
 <div class="dots">
  <ul class="clearfix">
  <li class="on"></li>
  <li class="off"></li>
  <li class="off"></li>
  <li class="off"></li>
  <li class="off"></li>
  </ul>
 </div>
 </div>
</div>
<script type="text/javascript">
 
var imgShow = document.getElementsByClassName('parent')[0],
 dotList = document.querySelectorAll('.dots >.clearfix > li');
var btnLeft = document.getElementsByClassName('btnLeft')[0],
  btnRight = document.getElementsByClassName('btnRight')[0];
var dotLen = dotList.length,
 index = 0; //輪播層的圖片索引，0表示第一張

//圓點(diǎn)顯示
function showRadius() {
 for(var i = 0; i < dotLen; i++) {
 if(dotList[i].className === "on"){
  dotList[i].className = "off";
 }
 }
 dotList[index].className = "on";
}

//向左移動(dòng)
btnLeft.onclick = function() {
 index--;
  if(index < 0){ /*第1張向左時(shí)，變?yōu)榈?張*/
    index = 4;
  }
  showRadius();
 var left;
 var imgLeft = imgShow.style.left;
 if(imgLeft === "0px") { /*當(dāng)是第1張時(shí)，每張圖片左移，移4張圖，位置為-(4*500)*/
 left = -2000;
 }
 else{
 left = parseInt(imgLeft) + 500; /*由于left為負(fù)數(shù)，每左移一張加500*/
 }
 imgShow.style.left = left + "px";
}

//向右移動(dòng)
btnRight.onclick = function() {
 index++;
  if(index > 4){ /*第5張向右時(shí)，變?yōu)榈?張*/
    index = 0;
  }
  showRadius();
 var right;
 var imgLeft = imgShow.style.left;
 if(imgLeft === "-2000px") { /*當(dāng)是第5張時(shí)，第1張的位置為0*/
 right = 0;
 }
 else{
 right = parseInt(imgLeft) - 500; /*由于left為負(fù)數(shù)，每右移一張減500*/
 }
 imgShow.style.left = right + "px";
}

// 自動(dòng)輪播
/*var timer;
function autoPlay() {
 timer = setInterval(function() {
 var right;
 var imgLeft = imgShow.style.left;
 if(imgLeft === "-2000px") {
  right = 0;
 }
 else{
  right = parseInt(imgLeft) - 500;
 }
 imgShow.style.left = right + "px";
 } ,1000)
}
autoPlay();*/

for(var i = 0; i < dotLen; i++) {
  /*利用閉包傳遞索引*/
  (function(i) {
    dotList[i].onclick = function() {
     var dis = index - i; //當(dāng)前位置和點(diǎn)擊的距離
     imgShow.style.left = (parseInt(imgShow.style.left) + dis * 500) + "px";
     index = i; //顯示當(dāng)前位置的圓點(diǎn)
     showRadius();
   }
  })(i);
}

</script>

</body>
</html>

上述就是小編為大家分享的怎么在web項(xiàng)目中實(shí)現(xiàn)一個(gè)手動(dòng)輪播功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手