轮播效果的制作

最新推荐文章于 2025-05-19 14:58:28 发布

转载最新推荐文章于 2025-05-19 14:58:28 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pengwanxing/p/5427029.html

首先我们先来弄清楚思路：

第一步：我们想让图片动起来（此时需要一个计时器来控制每隔多少秒切换图片），我们要思考通过什么方式来切换图片，无非就是每隔一段时间图片的地址发生了变化

第二步：此时我们需要将按钮与图片绑定起来

第三步：我们需要给图片添加鼠标移入和移出的事件。

下面我们来书写代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .slider{
            height: 454px;
            width: 730px;
            position: relative;
        }
        ul{
            overflow: hidden;
            position: absolute;
            top: 400px;
            left: 250px;
        }
        li{
            width: 30px;
            height: 30px;
            float: left;
            border-radius: 30px;
            text-align: center;
            line-height: 30px;
            vertical-align: middle;
            list-style: none;
            border: 1px solid red;
            margin-right: 10px;
        }
        .changeBtn{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="../images/1.jpg" alt="" id="sliderImg"/>
        <ul>
            <li class="changeBtn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        var imgArray=["../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg"];
        var btn=document.getElementsByTagName("li");
        var sliderImg=document.getElementById("sliderImg");
        var imgIndex=0;
        var timer;
        var btnIndex=0；

　//让图片动起来，并将按钮与图片绑定

       timer=window.setInterval(function(){
           imgIndex++;
           if(imgIndex<imgArray.length){
               sliderImg.src=imgArray[imgIndex];
           }else{
               imgIndex=0;
               sliderImg.src=imgArray[imgIndex];
           }

           for(var i= 0;i<btn.length;i++){
               if(i==imgIndex){
                   btn[i].className="changeBtn";
               }else{
                   btn[i].className="";
               }

           }
       },1500);

　　//给按钮绑定鼠标移入、移出的事件，主要此时需要用到立即执行函数，不然的话当函数开始执行时此时j已经变成了4，从而无法访问到按钮。
        for(var j=0;j<btn.length;j++ ){
            !function(j){
                btn[j].onmouseover=function(){
                    window.clearInterval(timer);
                    sliderImg.src=imgArray[j];
                    for(var b= 0;b<btn.length;b++){
                        if(b==j){
                            btn[b].className="changeBtn";
                        }else{
                            btn[b].className="";
                        }
                    }

                };
                btn[j].onmouseout=function(){
                    imgIndex=j;
                    timer=window.setInterval(function(){
                        imgIndex++;
                        if(imgIndex<imgArray.length){
                            sliderImg.src=imgArray[imgIndex];
                        }else{
                            imgIndex=0;
                            sliderImg.src=imgArray[imgIndex];
                        }

                        for(var i= 0;i<btn.length;i++){
                            if(i==imgIndex){
                                btn[i].className="changeBtn";
                            }else{
                                btn[i].className="";
                            }

                        }
                    },1500);
                }

　　　　　　 }(j)；

        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/pengwanxing/p/5427029.html