JS轮播图（一）

最新推荐文章于 2024-05-01 02:45:35 发布

水木珊

最新推荐文章于 2024-05-01 02:45:35 发布

阅读量456

点赞数

本文链接：https://blog.csdn.net/weixin_42337105/article/details/81191942

版权

知识点：1 dom获取元素；

2 通过ul的移动显示图片 info.style.marginLeft；

3 利用setTimeout( ) ,它是属于 window 的 method, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method；

4 索引对索引也就是点的索引与图片的索引一致。

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .block{
        width: 600px;
        height: 300px;
        border: 1px solid black;
        margin: 10px auto;
        position: relative;
        overflow: hidden;
    }
    .info{
        width: 4200px;
        height: 300px;
        margin: 0;
        padding: 0;
    }
    .animate{
        transition: all 0.5s linear;
    }
    .list{
        list-style: none;
        float: left;
        position: relative;
    }
    .list>img{
        width: 600px;
        height: 300px;
    }
    .dians{
        width: 180px;
        heigt:20px;
        position: absolute;
        bottom: 10px;
        margin-left: 220px;
    }
    .dian{
        width: 15px;
        height: 15px;
        border: 1px solid white;
        margin-left: 10px;
        border-radius: 50%;
        float: left;
        transition: all 0.5s linear;
    }
</style>
<body>
<div class="block">
    <ul class="info">
        <li class="list"><img src="./image/demo1.jpg" alt=""></li>
        <li class="list"><img src="./image/demo2.jpg" alt=""></li>
        <li class="list"><img src="./image/demo3.jpg" alt=""></li>
        <li class="list"><img src="./image/demo4.jpg" alt=""></li>
        <li class="list"><img src="./image/demo5.jpg" alt=""></li>
        <li class="list"><img src="./image/demo6.jpg" alt=""></li>
        <li class="list"><img src="./image/demo1.jpg" alt=""></li>
    </ul>
    <div class="dians">
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
        <div class="dian"></div>
    </div>
</div>
<script>
    var blocck=document.getElementsByClassName("block")[0];
    var info=document.getElementsByClassName("info")[0];
    var list=document.getElementsByClassName("list");
    var dian=document.getElementsByClassName("dian");
    var count=0;
    var time;
    time=setInterval("lunbo()",2000);
    blocck.onmouseenter=function (){
        clearInterval(time);
    }
    blocck.onmouseleave=function (){
        time=setInterval("lunbo()",2000);
    }
    for(var i=0;i<dian.length;i++){
        dian[i].index=i;               //索引对索引
        dian[i].addEventListener("mouseenter",function(){
            for(var k=0;k<dian.length;k++){
                dian[k].style.backgroundColor="";
            }
            this.style.backgroundColor="red";    //点的动画与图片动画一致
            info.className="info animate";
            info.style.marginLeft=-600*this.index+"px";
            count=this.index;
        });
    }
    dian[0].style.backgroundColor="red";
    function lunbo(){
        info.className="info animate";     //针对ul的移动
        dian[count].style.backgroundColor="";
        count++;
        info.style.marginLeft=-600*count+"px";
        setTimeout(function (){                 //对最后一张图切换时间的把握，当最后一张图执行完毕，回归到第一张图
            if(count>=list.length-1){
                count=0;
                info.className="info";
                info.style.marginLeft="0px";
            }
            dian[count].style.backgroundColor="red";
        },500);
    }
</script>
</body>
</html>

水木珊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS轮播图（一）

知识点：1 dom获取元素； 2 通过ul的移动显示图片 info.style.marginLeft； 3 利用setTimeout( ) ,它是属于 window 的 method, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method； 4 索引对索引也就是点的索引与图片的索引...
复制链接

扫一扫