图片的无缝滚动与简单的图片轮播

最新推荐文章于 2021-09-20 12:42:53 发布

Sk8？？？

最新推荐文章于 2021-09-20 12:42:53 发布

阅读量233

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

图片的无缝滚动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            width: 1000px;;
            height: 200px;
            overflow-y: hidden;
            overflow-x: hidden;
        }
        .b{
            width: 2400px;
            height: 200px;
        }
        .c,.d{
            width: 1200px;
            height: 200px;
            float: left;
        }
        .b img{
            width: 300px;
            height: 200px;
            float: left;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b">
        <div class="c">
            <img src="img/1.jpg">
            <img src="img/2.jpg">
            <img src="img/3.jpg">
            <img src="img/4.jpg">
        </div>
        <div class="d">
            <img src="img/1.jpg">
            <img src="img/2.jpg">
            <img src="img/3.jpg">
            <img src="img/4.jpg">
        </div>
    </div>
</div>
<script>
    var a=document.getElementsByClassName("a")[0];
    var b=document.getElementsByClassName("b")[0];
    var c=document.getElementsByClassName("c")[0];
    var d=document.getElementsByClassName("d")[0];
    var speed=1;
    var time=null;
    show();
    //图片进行滚动函数
    function show(){
        time=setInterval(function(){
            a.scrollLeft -= speed;
            if(a.scrollLeft<=0){
                a.scrollLeft=1200;
            }
        },10);
    }
    //设置鼠标事件
    a.onmouseenter=function(){
        clearInterval(time);
    }
    a.onmouseleave=function(){
        show();
    }
</script>
</body>
</html>

简单的图片轮播

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a {
            position: relative;
            width: 600px;
            height: 270px;
        }

        .a > img {
            width: 100%;
            height: 100%;
        }
        .b {
            position: absolute;
            width: 100%;
            left: 0;
            top: 120px;
        }
        .b > span {
            display: block;
            background: #fff;
            color: black;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .b> span:nth-child(1) {
            float: left;
        }

        .b > span:nth-child(2) {
            float: right;
        }
        .dian {
            position: absolute;
            left: 0;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }

        .dian > div {
            display: inline-block;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            height: 10px;
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
<div class="a">
    <img src="img/1.jpg" class="imglist" alt="" />
    <div class="b">
        <span> < </span>
        <span> > </span>
    </div>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script>
    var a=document.getElementsByClassName("a")[0];
    var imglist=document.getElementsByClassName("imglist")[0];
    var b=document.getElementsByClassName("b")[0].children;
    var dian=document.getElementsByClassName("dian")[0].children;
    var num=1;
    var time=null;
    dian[num-1].style.backgroundColor="red";
    showpic();
    function showpic(){
        time = setInterval(function(){
            num++;
            for(var i=0;i<dian.length;i++){
                dian[i].style.backgroundColor="";
            }
            if(num>4){
                num=1;
            }
            //图片路径的切换
            dian[num-1].style.backgroundColor="red";
            imglist.src="./img/"+num+".jpg";
        },1000)
    }
    a.onmouseenter = function () {
        clearInterval(time);
    }
    a.onmouseleave = function () {
        showpic();
    }
    for(var i=0;i< b.length;i++){
        b[i].index=i;
        //点击事件 点击左右按钮 图片发生变化
        b[i].onclick=function(){
            if(this.index==0){
                num--;
                if(num<1){
                    num=4;
                }
            }else{
                num++;
                if(num>4){
                    num=1;
                }
            }
            imglist.src="./img/"+num+".jpg";
            //点颜色的变化
            for(var i=0;i<dian.length;i++){
                dian[i].style.backgroundColor="";
            }
            dian[num-1].style.backgroundColor="red";
        }
    }
</script>
</body>
</html>