原生js之滑动轮播图

最新推荐文章于 2025-04-11 11:53:04 发布

沐梓沐囡

最新推荐文章于 2025-04-11 11:53:04 发布

阅读量508

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/yy_9_aa/article/details/78066980

版权

js 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       #box{
           width:490px ;
           height: 170px;
           padding: 5px;
           border: 1px solid red;
           margin: 100px auto;
       }
       #inner{
           width:490px ;
           height: 170px;
           overflow: hidden;
           position: relative;
       }
        ul{
            width: 500%;
            list-style: none;
            position: absolute;

        }
        li{
            float: left;
        }
        .square{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        span{
            display:inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            color: black;
            text-align: center;
            margin: 3px;
            background: snow;
            font-size: 12px;
            cursor: pointer;
        }
      .current{
          background: orange;
      }

    </style>
</head>
<script>
    window.onload=function(){
        var inner=document.getElementById("inner");
        var ul=inner.children[0];
        var imgWidth=inner.offsetWidth;
        var spanArr=inner.children[1].children;
        for(var i=0;i<spanArr.length;i++){
            //绑定的是索引值.
            spanArr[i].index=i;
            spanArr[i].οnmοuseοver=function(){
                //点亮盒子排他思想
                for(var j=0;j<spanArr.length;j++){
                    spanArr[j].className="";
                }
                this.className="current";
                animate(ul,-this.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>
<body>
<div  id="box">
    <div  id="inner">
        <ul>
            <li><img  src="img6/01.jpg"> </li>
            <li><img  src="img6/02.jpg"> </li>
            <li><img  src="img6/03.jpg"> </li>
            <li><img  src="img6/04.jpg"> </li>
            <li><img  src="img6/05.jpg"> </li>
        </ul>
        <div  class="square">
            <span   class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </div>
</div>



</body>
</html>