轮播图-左右滑动

效果图

轮播图-左右滑动_第1张图片

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="03.css">
</head>
<body>
  <div class="lbt">
      <ul class="a">
        <li class="item "><img src="src/lbt1.jpg" class="lbtimg"></li>
        <li class="item "><img src="src/lbt2.jpg" class="lbtimg"></li>
        <li class="item "><img src="src/lbt3.jpg" class="lbtimg"></li>
        <li class="item "><img src="src/lbt1.jpg" class="lbtimg"></li>
        <li class="item "><img src="src/lbt2.jpg" class="lbtimg"></li>
        <li class="item "><img src="src/lbt3.jpg" class="lbtimg"></li>

      </ul>
    <button type="button" class="btn" id="btn01"><</button>
    <button type="button" class="btn" id="btn02">></button>


  </div>
</body>
</html>

JS代码

<script type="text/javascript">
  //大轮播图
    var items=document.getElementsByClassName("item");
    var btn01=document.getElementById("btn01");
    var btn02=document.getElementById("btn02");
    var count=0;
    //左按钮点击效果
  btn01.onclick=function () {
     
    btnleft()
  }
  function btnleft(){
     
      if(count==0){
       //一开始不按按钮检测不到count=0,所以要先判断,再分情况去执行
        for(let i=0;i<items.length;i++){
     
          items[i].style.transform='translateX('+-300+'%)';
          items[i].style.transition='';
        }
        setTimeout(()=>{
     
          for(let i=0;i<items.length;i++){
     
            items[i].style.transform='translateX('+ -200 +'%)';
            items[i].style.transition='transform 0.5s';
          }
          count=-200;
        },10)
      }else{
     
        count += 100;
        for(let i=0;i<items.length;i++) {
     
          items[i].style.transform='translateX('+count+'%)';
          items[i].style.transition='transform 0.5s';
        }
      }

      }

    //右按钮点击效果
    btn02.onclick=function () {
     
      btnright()
    }
        function btnright(){
     
      count+=-100;
      for(let i=0;i<items.length;i++) {
     
        items[i].style.transform='translateX('+count+'%)';
        items[i].style.transition='transform 0.5s';
      }
      if(count==-400){
     
        for(let i=0;i<items.length;i++){
     
          items[i].style.transform='translateX('+0+'%)';
          items[i].style.transition='';
        }
        setTimeout(()=>{
     
          for(let i=0;i<items.length;i++){
     
            items[i].style.transform='translateX('+ -100 +'%)';
            items[i].style.transition='transform 0.5s';
          }
          count=-100;
        },10)
      }
 }
//轮播效果
  //页面载入时开始轮播
   var lbt111=document.getElementsByClassName("lbt"); //鼠标移入轮播图区域时,定时器停止
  var timer1= setInterval(function () {
     
         btnright()
       }, 5000
   );
 window.onload=function(){
     
   //鼠标移入时,清除定时器
   for(let i=0;i<items.length;i++) {
     
     lbt111[i].onmouseenter = function () {
     
          clearInterval(timer1)
     }
     //鼠标移出时,添加定时器
     lbt111[i].onmouseleave = function () {
     
       timer1= setInterval(function () {
     
             btnright()
           }, 5000
       );
     }
     }
   }


</script>
</html>


CSS文件

*{
     
  margin:0;
  padding: 0;
  list-style: none;
}

body{
     
  width:1903px;
  height:1633px;
  background-color: grey;
}

.lbt{
     
  width:1200px;
  height: 330px;
  position:relative;
  margin:0 auto;

  z-index:50;
}

.lbt ul{
     
  width:600%;
  height:100%;
  position:absolute;
}
.lbt li{
     
  position:relative;
  float:left;
  left:-16.6%;
  width:16.6%;


}

.lbt .btn{
     
  background-color:transparent;
  z-index: 99;
  outline: none;
  width:60px;
  height:330px;
  font-size: 80px;
  position:absolute;
  border:none;
  display: none;
}

#btn01{
     
  top:0;
}
#btn02{
     
  right: 0;
  top:0;
}

.lbt:hover button{
     
  display: block;
}


注:1、点击切换实现思路:

轮播图-左右滑动_第2张图片

你可能感兴趣的:(自己动手丰衣足食)