欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實(shí)現(xiàn)簡單輪播圖

 更新時(shí)間：2020年10月26日 10:20:38   作者：l1621834733  
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡單輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡單輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

一、寫入網(wǎng)頁基本結(jié)構(gòu)

body:

網(wǎng)頁的最外部設(shè)置一個(gè)id為wrap的容器，取代body，這樣方便我們做一些初始化

css:

初始化：

包括外邊距margin、內(nèi)邊距padding、鏈接a、圖片img、輸入框input、列表ul、li、網(wǎng)頁html、body一系列初始化

css設(shè)置：

根據(jù)圖片數(shù)與圖片寬度設(shè)置輪播圖寬度

二、設(shè)置js邏輯

需要完成的功能有：

1、鼠標(biāo)移入輪播圖逐漸出現(xiàn)左右浮動(dòng)塊
2、點(diǎn)擊浮動(dòng)塊切換圖片
3、點(diǎn)擊小圓點(diǎn)切換圖片
4、切換圖片同時(shí)切換小圓點(diǎn)
5、自動(dòng)播放
6、鼠標(biāo)移入輪播圖自動(dòng)播放停止、移出恢復(fù)自動(dòng)播放

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
 }
 a{
  text-decoration: none;
 }
 ul,li{
  list-style: none;
 }
 img{
  display: block;
 }
 input{
  outline: none;
 }
 html,body{
  height: 100%;
  overflow: hidden;
 }
 .content{
  position: absolute;
  top: 0;
  left: 0;
 }
 .banner{
  width: 600px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  overflow: hidden;
 }
 .banner .bannerList{
  position: absolute;
  left:-600px;
  top: 0;
  width: 4800px;
  height: 100%;
 }
 .banner .bannerList li{
  float: left;
  width: 600px;
  height: 400px;
  
 }
 .banner .bannerList li img{
  height: 100%;
  width: 100%;
 }
 .banner .left,.banner .right{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 50px;
  border: solid 2px gray;
  font-size:30px;
  text-align: center;
  line-height: 50px;
  color: rgb(255, 255, 255);
  opacity: 0;
  transition: 1000ms;
 }
 .banner .left{
  left: 0px;
 }
 .banner .right{
  right: 0px;
 }
 .banner .point{
  position: absolute;
  bottom: 30px;
  left:50%;
  transform: translateX(-50%);
 }
 .banner .point li{
  float: left;
  width: 15px;
  height: 15px;
 border-radius: 50%;
 background-color: gray;
  margin: 5px;
 }
 </style>
 <script type="text/javascript">
 window.onload=function(){
  var bannerLeft=document.querySelector('.banner .left');
  var bannerRight=document.querySelector('.banner .right');
  var banner=document.querySelector('.banner')
  var bannerList=document.querySelector('.banner .bannerList')
  var liList=document.querySelectorAll('.banner .bannerList li')
  var pointList=document.querySelectorAll('.banner .point li')
  var start=-600;


   timer2=setInterval(function(){    //設(shè)置定時(shí)器，自動(dòng)播放
   var a=30;
   var index=bannerList.offsetLeft/-600+1;
   if(bannerList.offsetLeft==-4200){
     bannerList.style.left=-600+'px'   //無縫操作
     index=2;
    }
    if(bannerList.offsetLeft==-3600){
     index=1;
    }
   for(var i=0;i<pointList.length;i++){
     pointList[i].style.backgroundColor='grey'
    }
    pointList[index-1].style.backgroundColor='red';
   timer3=setInterval(function(){
    a=a-1
    bannerList.style.left=bannerList.offsetLeft-20+'px';
    
    if(a==0){
     clearInterval(timer3)
    }
   },
    30)
    if(bannerList.offsetLeft==-4200){
     bannerList.style.left=-600+'px';
    } 
  },4000)


  // 創(chuàng)建一個(gè)移入出現(xiàn)函數(shù)
  banner.addEventListener('mouseover',occur)
  function occur(){
  bannerLeft.style.opacity=1;   //移入逐漸出現(xiàn)
  bannerRight.style.opacity=1;  
  clearInterval(timer2);    //移入取消自動(dòng)播放
 }
  banner.addEventListener('mouseout',function(){
   bannerLeft.style.opacity=0;
   bannerRight.style.opacity=0;  //移出消失
   timer2=setInterval(function(){   //移出恢復(fù)自動(dòng)播放
   var a=30;
   timer3=setInterval(function(){
    a=a-1
    bannerList.style.left=bannerList.offsetLeft-20+'px';
    
    if(a==0){
     clearInterval(timer3)
    }
   },
    30)
    if(bannerList.offsetLeft==-4200){
     bannerList.style.left=-600+'px';
    }
  },4000)

  })
  //設(shè)置左右浮動(dòng)塊點(diǎn)擊變色以及滾動(dòng)
  function colorChange(){
   this.style.color='black';
   if(this.className=='right'){  //判斷是哪邊被點(diǎn)擊
     var index=bannerList.offsetLeft/-600+1;
     var a=30;
     timer=setInterval(function(){  //點(diǎn)擊浮動(dòng)塊切換圖片
     a=a-1;
     bannerList.style.left=bannerList.offsetLeft-20+'px';
     if(a!=0){
      bannerRight.removeEventListener('mousedown',colorChange)
      bannerLeft.removeEventListener('mousedown',colorChange)
      
     }
     if(a==0){
      clearInterval(timer);
      bannerRight.addEventListener('mousedown',colorChange)
      bannerLeft.addEventListener('mousedown',colorChange)
     }
    },30)
    if(bannerList.offsetLeft==-4200){
     bannerList.style.left=-600+'px'
     index=2;
    }
    if(bannerList.offsetLeft==-3600){
     index=1;
    }
    for(var i=0;i<pointList.length;i++){
     pointList[i].style.backgroundColor='grey'
    }
    pointList[index-1].style.backgroundColor='red';
   }
   else{
     var a=30;
     var index=bannerList.offsetLeft/-600-1;
     timer=setInterval(function(){
     a=a-1;
     bannerList.style.left=bannerList.offsetLeft+20+'px';
     if(a!=0){
      bannerLeft.removeEventListener('mousedown',colorChange)
      bannerRight.removeEventListener('mousedown',colorChange)
     }
     if(a==0){
      clearInterval(timer);
      bannerLeft.addEventListener('mousedown',colorChange)
      bannerRight.addEventListener('mousedown',colorChange)
     }
    },30)
    if(bannerList.offsetLeft==0){
     bannerList.style.left=-3600+'px'
     index=5;
    }
    if(bannerList.offsetLeft==-600){
     index=6;
    }
    for(var i=0;i<pointList.length;i++){
     pointList[i].style.backgroundColor='grey'
    }
    pointList[index-1].style.backgroundColor='red';
   }
  }
  function colorReturn(){
   this.style.color='white'
  }
  bannerLeft.addEventListener('mousedown',colorChange)
  bannerRight.addEventListener('mousedown',colorChange)
  bannerLeft.addEventListener('mouseup',colorReturn)
  bannerRight.addEventListener('mouseup',colorReturn)
  for(var i=0;i<pointList.length;i++){
   pointList[i].onmousedown=function(){
    for(var i=0;i<pointList.length;i++){
     pointList[i].style.backgroundColor='gray'
    }
    this.style.backgroundColor='red';
    for(var b=0;b<pointList.length;b++){
     if(pointList[b].style.backgroundColor==this.style.backgroundColor){
      var a=30;
      var step=-(b+1)*600-bannerList.offsetLeft;
      timer1=setInterval(function(){
      a=a-1;
      bannerList.style.left=bannerList.offsetLeft+step/30+'px';
      if(a!=0){
      bannerLeft.removeEventListener('mousedown',colorChange)
      bannerRight.removeEventListener('mousedown',colorChange)

     }
      if(a==0){
       clearInterval(timer1)
       bannerLeft.addEventListener('mousedown',colorChange)
       bannerRight.addEventListener('mousedown',colorChange)
      }
      },20)
     }
    }
   }
  }
  
 }
 </script>
</head>
<body>
 <div id="wrap">
  <!-- 寫出輪播圖框架 -->
  <div class="banner">
   <ul class="bannerList">
    <li>
     <img src="./img/james6.jpeg">
    </li>
    <li>
     <img src="./img/james1.jpg">
    </li>
    <li>
     <img src="./img/james2.jpg">
    </li>
    <li>
     <img src="./img/james3.jpg">
    </li>
    <li>
     <img src="./img/james4.jpg">
    </li>
    <li>
     <img src="./img/james5.jpeg">
    </li>
    <li>
     <img src="./img/james6.jpeg">
    </li>
    <li>
     <img src="./img/james1.jpg">
    </li>
   </ul>
    <!-- 左右兩個(gè)箭頭 -->
    <span class="left"> < </span>
   <span class="right"> > </span>
    <!-- 添加小圓點(diǎn) -->
    <ul class="point">
     <li style="background-color: red;"></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
  </div>
 </div>
 
</body>
</html>

其中，將圖片替換為其他圖片可以實(shí)現(xiàn)不同的輪播圖，值得一提的是，六張圖片的輪播圖需要放八張圖，第八張與第二張一致，第一張與第七張一致，真正呈現(xiàn)出來的僅僅是第二張到第七張

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

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

相關(guān)文章

最新評(píng)論