孙肖宁

无缝滚动(左右焦点图)
描述:当用户鼠标放在图片上的时候,显示左右的按钮。离开的时候,左右按钮自动隐藏。点击左右按钮,图片依次滚动播放。注...
扫描右侧二维码阅读全文
12
2018/04

无缝滚动(左右焦点图)

描述:当用户鼠标放在图片上的时候,显示左右的按钮。离开的时候,左右按钮自动隐藏。点击左右按钮,图片依次滚动播放。
注意:代码里面的图片换成自己的哦,图片的大小也记得更改哦。
效果图:
zyjdt.png

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右焦点图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            //list-style: none;
        }

        #box {
            width: 490px;
            height: 170px;
            padding: 5px;
            position: relative;
            border: 1px solid #ccc;
            margin: 100px auto 0;
            overflow: hidden;
        }

        .ad {
            width: 490px;
            height: 170px;
            overflow: hidden;
            position: relative;
        }

        #box img {
            width: 490px;
        }




        .ad ul li {
            float: left;
        }

        .ad ul {
            position: absolute;
            top: 0;
            width: 2940px;
        }

        .ad ul li.current {
            display: block;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
    <div class="all" id="box">
        <div class="ad">
            <ul id="imgs">
                <li><img src="images/1.jpg" alt=""></li>
                <li><img src="images/2.jpg" alt=""></li>
                <li><img src="images/3.jpg" alt=""></li>
                <li><img src="images/4.jpg" alt=""></li>
                <li><img src="images/5.jpg" alt=""></li>
            </ul>
        </div>
        <div id="arr">
            <span id="left"><</span>
            <span id="right"> ></span>
        </div>
    </div>
</body>
</html>
<script>
    //获取相关元素
  var box = document.getElementById("box");
  var imgWidth = box.children[0].offsetWidth;
  var ul = box.children[0].children[0];
  var boxLeftRight = box.children[1];
  var btnArr = boxLeftRight.children;
  //控制鼠标经过时候的左右按钮的隐藏与显示
  box.onmouseover = function () {
      boxLeftRight.style.display = "block";
  }
  box.onmouseout = function () {
      boxLeftRight.style.display = "none";
  }
  //设置计数器
  var index = 0;
  //点击更换图片
  btnArr[1].onclick = function () {
      index++;
      if(index>ul.children.length-1){
              index = ul.children.length-1;
      }
      animate(ul,-index*imgWidth);
  }
  btnArr[0].onclick = function () {
      index -- ;
      if(index<0){
          index=0;
      }
      animate(ul,-index*imgWidth);
  }
  //动画函数
  function animate(ele,target) {
      clearInterval(ele.timer);
      var speed = target>ele.offsetLeft?10:-10;
      ele.timer = setInterval(function () {
          var val = target-ele.offsetLeft;
          ele.style.left = ele.offsetLeft + speed + "px";
          if(Math.abs(val)<Math.abs(speed)){
              ele.style.left = target + "px";
              clearInterval(ele.timer);
          }
      },10)
  }
</script>
Last modification:April 12th, 2018 at 03:20 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment