JS實(shí)現(xiàn)圖片自動(dòng)播放效果

更新時(shí)間：2021年08月20日 09:48:21 作者：Tanersci

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片自動(dòng)播放效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)圖片自動(dòng)播放效果的具體代碼，供大家參考，具體內(nèi)容如下

JS實(shí)現(xiàn)圖片自動(dòng)播放

1、先看效果圖

2、完整代碼

<!DOCTYPE html>
<html>
<head>
 <style>
  /* 定義樣式 */
  body{
   margin: 5% 30%;
  }
  .bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px  #142732;}
  .box{width:700px;height:400px;margin:0px auto;overflow: hidden;}
        /* box的寬度為img的個(gè)數(shù)乘以bannerimage的寬度*/
  .img-g{width:4900px;height:400px;position:relative;}
  .img-g img{float:left;width:700px;height:400px;}
  .button-g{position:relative;top:-35px;text-align:center;}
  .button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;}
 </style>
 
 <script type="text/javascript" src="js/jquery.js"></script>
 
 <script type="text/javascript">
 $(function () {
     // 實(shí)現(xiàn)自動(dòng)播放
  var p=document.getElementsByClassName('img-g')[0];
  var button=document.querySelectorAll('.button-g span')
  // 設(shè)置3秒播放
  window.timer=setInterval(move,3000);
  // 輪播設(shè)置
  function move(){
      // bannerimage的寬度乘以圖片的個(gè)數(shù)
   if(parseInt(p.style.left)>-4200){
       // 和bannerimage的寬度保持一致即可：700
    p.style.left=parseInt(p.style.left)-700+'px'
    p.style.transition='left 1s';
    tog(-Math.round(parseInt(p.style.left)/700))
    if(parseInt(p.style.left)<=-4200){
     setTimeout(function(){
      tog(0)
      p.style.left='0px'
      p.style.transition='left 0s';
     },1000)
    }
   }else{
    p.style.left='0px'
    p.style.transition='left 0s';
   }
  }
 
  // 設(shè)置小圓點(diǎn)
  for(var i=0;i<button.length;i++){
   // button[i].style.backgroundColor='#eee';
   button[i].onclick=function(){
    p.style.left=-700*this.getAttribute('data-index')+'px'
    tog(this.getAttribute('data-index'))
    clearInterval(window.timer)
    window.timer=setInterval(move,3000);
   }
  }
  // 設(shè)置小圓點(diǎn)
  function tog(index){
   if(index>5){
    tog(0);
    return;
   }
   for(var i=0;i<button.length;i++){
    button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
   }
   button[index].style.backgroundColor='rgb(255, 255, 255)';
  }
 
  // 鼠標(biāo)移上事件
  p.onmouseover=function(){
   clearInterval(window.timer)
  }
        // 鼠標(biāo)移除事件
  p.onmouseout=function(){
   window.timer=setInterval(move,3000);
  }
 });
 </script>
</head>
<body> 
 <div class="bannerimage">
  <div class='box'>
   <div class='img-g' style='left:0px;transition:left 1s;'>
    <img src="images/img_1.jpg" alt="1">
    <img src="/images/img_2.jpg" alt="2">
    <img src="/images/img_3.jpg" alt="3">
    <img src="/images/img_4.jpg" alt="4">
    <img src="/images/img_5.jpg" alt="5">
    <img src="/images/img_6.jpg" alt="6">
    <img src="/images/img_1.jpg" alt="1">
   </div>
   <div class='button-g'>
    <span data-index='0' style="background-color: #eeeeee"></span>
    <span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span>
   </div>
  </div>
 </div>
</body>
</html>

3、關(guān)鍵代碼講解

3.1、css設(shè)置注意事項(xiàng)：img-g的寬度為：img的個(gè)數(shù)乘以bannerimage的寬度，如下：

.img-g{width:4900px;height:400px;position:relative;}

3.2、輪播常量及事件設(shè)置

常量1設(shè)置為：bannerimage的寬度乘以圖片的個(gè)數(shù)，如下：

if(parseInt(p.style.left)>-4200){}

常量2設(shè)置為：bannerimage的寬度保持一致即可（700），如下：

p.style.left=parseInt(p.style.left)-700+'px'

小圓點(diǎn)顯示設(shè)置：

// 設(shè)置小圓點(diǎn)
for(var i=0;i<button.length;i++){
 button[i].style.backgroundColor='#eee';
 button[i].onclick=function(){
     p.style.left=-700*this.getAttribute('data-index')+'px'
     tog(this.getAttribute('data-index'))
     clearInterval(window.timer)
     window.timer=setInterval(move,3000);
 }
}
// 設(shè)置小圓點(diǎn)點(diǎn)擊事件
function tog(index){
    // 圓點(diǎn)的個(gè)數(shù)
 if(index>5){
  tog(0);
  return;
 }
 for(var i=0;i<button.length;i++){
        // 默認(rèn)圓點(diǎn)的顯示顏色
  button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
 }
    // 當(dāng)前圓點(diǎn)的顯示顏色
 button[index].style.backgroundColor='rgb(255, 255, 255)';
}

鼠標(biāo)事件：鼠標(biāo)移上停止播放，移除3秒后播放。

// 鼠標(biāo)移上事件
p.onmouseover=function(){
 clearInterval(window.timer)
}
// 鼠標(biāo)移除事件
p.onmouseout=function(){
 window.timer=setInterval(move,3000);
}

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

您可能感興趣的文章: