图片的横向滚动实现

最新推荐文章于 2024-05-14 17:19:58 发布

Sk8？？？

最新推荐文章于 2024-05-14 17:19:58 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/MRslonly/article/details/99701737

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .two{
            width: 2800px;
            height: 300px;
            position: absolute;
        }
        .three{
            transition: margin-left 0.5s ease-in;
        }
        .imglist{
            width: 400px;
            height: 300px;
            float: left;
        }
        .imglist>img{
            width: 100%;
            height: 100%;
        }
        .dian{
            position: absolute;
            bottom: 0;
            left: 140px;
        }
        .dian>div{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 3px solid white;
            float: left;
        }
        .bgcolor{
            background: red;
        }
        .jian{
            position: absolute;
            top: 150px;
            left: 0px;
            width: 100%;
        }
        .jian span{
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: #000;
            color: white;
        }
        .jian span:first-of-type{
            float: left;
        }
        .jian span:last-of-type{
            float: right;
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">
        <div class="imglist"><img src="img/1.jpg"></div>
        <div class="imglist"><img src="img/2.jpg"></div>
        <div class="imglist"><img src="img/3.jpg"></div>
        <div class="imglist"><img src="img/4.jpg"></div>
        <div class="imglist"><img src="img/5.jpg"></div>
        <div class="imglist"><img src="img/6.jpg"></div>
        <div class="imglist"><img src="img/1.jpg"></div>
    </div>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="jian">
    <span> < </span>
    <span> > </span>
</div>
</div>
<script>
var one=document.getElementsByClassName("one")[0];
    var two=document.getElementsByClassName("two")[0];
    var imglist=document.getElementsByClassName("imglist")[0];
    var dian=document.getElementsByClassName("dian")[0].children;
    var jian=document.getElementsByClassName("jian")[0].children;
    var time=null;
    var count=0;
    var index=0;
    var speed=1000;
    function animate(){
        time=setInterval(function(){
                transanimate()
        },speed)
    }
    //图片切换
    function transanimate(){
        two.className="two three";
        count++;
        two.style.marginLeft=(-400*count)+"px";
        setTimeout(function(){
        if(count >= two.children.length-1){
            two.className="two";
            count=0;
            two.style.marginLeft=0+"px";
        }
            //记录图片索引
            index= count == 6 ?0:count;
            addcolor();
        },400)
    }
    //点的事件
    function addcolor(){
        for(var i=0;i<dian.length;i++){
            if(i==index){
                dian[i].className="bgcolor";
            }
            else{
                dian[i].className="";
            }
        }
    }
    //箭头事件
    function jiantou(){
        jian[1].onclick=function(){
            transanimate()
        }
        jian[0].onclick=function(){
                count--;
                if(count <0){
                    two.className="two";
                    count=two.children.length-2;
                    two.style.marginLeft="-2400px";
                }
                setTimeout(function(){
                    two.className="two three";
                    two.style.marginLeft=(-400*count)+"px";
                    setTimeout(function() {
                       index=count;
                        addcolor();
                    },500)
        },0.1)
        }
    }
    //点的进入事件
    function indian(){
        for(var i=0;i<dian.length;i++){
            dian[i].index=i;
            dian[i].onmouseenter=function(){
                count=this.index-1;
                clearInterval(time);
                transanimate();
                index=this.index;
                addcolor();
            }
        }
    }
    //鼠标进入图片事件
    function mouse(){
        one.onmouseenter=function(){
            clearInterval(time);
    }
        one.onmouseleave=function(){
            animate();
        }
    }
    window.onload=function(){
        animate();
        mouse();
        addcolor();
        indian();
        jiantou();
    }

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

Sk8？？？

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
图片的横向滚动实现

<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .one{...
复制链接

扫一扫

专栏目录