js轮播图

最新推荐文章于 2024-04-08 18:28:22 发布
Hathaway-Giser
最新推荐文章于 2024-04-08 18:28:22 发布
阅读量102
点赞数
本文链接：https://blog.csdn.net/qq_27451741/article/details/86499710
版权
终于独立的做完了一遍。。。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
       #box{
           width: 730px;
           height: 454px;
           margin: 100px auto;
           border: 1px solid pink;
           position: relative;
           overflow: hidden;

        }
        ul{
            width: 3650px;
            position: absolute;
        }
        li{
            list-style: none;
            float: left;
        }
        ol{
            position: absolute;
            right: 5px;
            bottom: 5px;
        }
        ol li{
            width: 30px;
            height: 30px;
            border: 1px solid #999;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            background-color: white;
        }
        #arr span{
            position: absolute;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            opacity: 0.3;
            color: white;
            font-size: 30px;
            background-color:black;
            top: 50%;
            margin-top: -20px;
            font-weight: bold;
            cursor: pointer;
            border: white;


        }
        #left{
            left: 5px;
        }
        #right{
            right: 5px;
        }
        #arr {
            display: none;
        }
    </style>
</head>
<body>
<div>
    <div id="box">
        <ul>
            <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/1.jpg" alt=""></li>
        </ul>
        <ol></ol>
    <div id="arr"><span id="left"><</span><span id="right">></span></div>
    </div>
</div>
<script src="common.js"></script>
<script>
    //创建小圆点
    var olObj=my$("box").children[1];
    var ulObj=my$("box").children[0];
    var list=ulObj.children;
    var imgWidth=my$("box").offsetWidth;
    var index=0;
    for(var i=0;i<list.length-1;i++){
      var liObj=document.createElement("li");
       olObj.appendChild(liObj);
       liObj.innerText=i+1;
        liObj.setAttribute("index",i);
       liObj.onmouseover=function () {
           for(var i=0;i<olObj.children.length;i++){
              olObj.children[i].style.backgroundColor="white";
           }
           this.style.backgroundColor="red";
           index= this.getAttribute("index");
           animate(ulObj,-index*imgWidth);
       };
    }
    olObj.children[0].style.backgroundColor="red";
    //自动播放
      var timeId=setInterval(move,4000);//这个定时器的秒数必须大于move里的秒数否则不能执行
    //鼠标移入
    my$("box").onmouseover=function () {
        clearInterval(timeId);
        my$("arr").style.display="block";
    };
    //鼠标移出
    my$("box").onmouseout=function () {
        timeId=setInterval(move,4000);
        my$("arr").style.display="none";

    };
    //点击右边
    my$("right").onclick=move;
    //点击左边
    my$("left").onclick=function () {
        if(index==0){
            index=4;
            ulObj.style.left=-index*imgWidth+"px";
        }
        index--;
        animate(ulObj,-index*imgWidth);
        for(var i=0;i<olObj.children.length;i++){
            olObj.children[i].style.backgroundColor="white";
        }
        olObj.children[index].style.backgroundColor="red";
    };
    function move() {
        if(index==ulObj.children.length-1){
            ulObj.style.left=0+"px";
            index=0;

        }
        index++;
        animate(ulObj,-index*imgWidth);
        //设置自动播放按钮颜色
        if(index==list.length){
            olObj.children[0].style.backgroundColor="red";
            olObj.children[olObj.children.length].backgroundColor="white";
        }
        else{
            for(var i=0;i<olObj.children.length;i++){
                olObj.children[i].style.backgroundColor="white";
            }
            olObj.children[index].style.backgroundColor="red";
            }
        }

    function animate(element,target) {
        clearInterval(element.timeId);
        element.timeId=  setInterval(function () {
            //获取当前位置
            var  current=element.offsetLeft;
            //设置div每次移动多少步
            var step=10;
            //判断向右移还是向左移
            step= current<target?step:-step;
            current+=step;
            //判断当前
            if (Math.abs(target-current)>Math.abs(step)){
                element.style.left=current+"px";
            } else{
                clearInterval(element.timeId);
                element.style.left=target+"px";
            }
        },50)
    }
</script>
</body>
</html>






几个关键点：1，左按钮向左第一个元素，右按钮向右最后一个元素
                     2；每个事件都要设置li的背景
                     3；自动播放的定时器速度要和动画函数匹配