js无缝轮播

最新推荐文章于 2023-02-20 20:49:33 发布

辣姐什么鬼

最新推荐文章于 2023-02-20 20:49:33 发布

阅读量531

点赞数

分类专栏： web前端文章标签： web前端 javascript

本文链接：https://blog.csdn.net/liona_koukou/article/details/69950231

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

其中对上一页下一页按钮设置visibility属性是为了解决轮播中点击上一页下一页导致的bug，应为是a标签所以用了visibility属性，如果是按钮button可以直接设置在轮播过程中按钮不可点击，当然其他解决方法都可以，以实际为准

代码如下：换换图片就可以直接用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {margin:0;padding:0;}
        #scrollImg{width:1000px;margin:100px auto;}
        #prev{float:left;line-height:250px;}
        #next{float:right;line-height:250px;}
        #div1 {width:800px;height:250px;margin:0px auto;position:relative;overflow:hidden;}
        #div1 ul {position:absolute;left:0;top:0;}
        #div1 ul li {float:left;list-style:none;width:200px;height:250px;}
        #div1 ul li img{width:100%;height:100%;}
    </style>
</head>
<body>
<div id="scrollImg">
    <a href="javascript:void(0)" id="prev">向左</a>
    <a href="javascript:void(0)" id="next">向右</a>
    <div id="div1">
        <ul>
            <li><img src="image/0.jpeg" /></li>

            <li><img src="image/1.JPEG" /></li>

            <li><img src="image/3.jpg" /></li>

            <li><img src="image/4.jpeg" /></li>
        </ul>
    </div>
</div>
<script>
    window.onload=function(){
        var oDiv=document.getElementById("div1");
        var oUl=document.getElementsByTagName("ul")[0];
        var oLi=document.getElementsByTagName("li");
        var index=0;
        var timer;//定时器
        oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//将轮播内容复制一份
        oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
        //移动速度
        var speed=-10;
        //控制滚动的方向
        var prev=document.getElementById("prev");
        var next=document.getElementById("next");
       //上一页
        prev.onclick=function(){
            if(index==4){
                index=1;
                oUl.style.left="0px";
            }else{
                index++;
                speed=10;
            }
            move();
        };
        //下一页
        next.onclick=function(){
            if(index==0){
                index=3;
                oUl.style.left=-oUl.offsetWidth/2+"px";
            }else{
                index--;
                speed=-10;
            }
            move();
        };
        function  move(){
            timer=setInterval(function () {
                oUl.style.left=oUl.offsetLeft-speed+"px";
                var stop=-index*oLi[0].offsetWidth+"px";
                prev.style.visibility="hidden";
                next.style.visibility="hidden";
                if(oUl.style.left==stop){
                    clearInterval(timer);
                    prev.style.visibility="visible";
                    next.style.visibility="visible";
                }
            },20);
        }
    }
</script>
</body>
</html>

辣姐什么鬼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
js无缝轮播

其中对上一页下一页按钮设置visibility属性是为了解决轮播中点击上一页下一页导致的bug，应为是a标签所以用了visibility属性，如果是按钮button可以直接设置在轮播过程中按钮不可点击，当然其他解决方法都可以，以实际为准代码如下：换换图片就可以直接用 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; ...
复制链接

扫一扫