轮播图-左右滑动

最新推荐文章于 2024-02-20 00:03:41 发布

七彩猫猫虫

最新推荐文章于 2024-02-20 00:03:41 发布

阅读量1.5k

点赞数 4

分类专栏：自己动手丰衣足食

本文链接：https://blog.csdn.net/SDAW_1/article/details/104212200

版权

自己动手丰衣足食专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

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、点击切换实现思路：

在这里插入图片描述

七彩猫猫虫

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
轮播图-左右滑动

HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="03.css"></he...
复制链接

扫一扫