js轮播图

最新推荐文章于 2020-07-01 08:12:18 发布

sink_sand

最新推荐文章于 2020-07-01 08:12:18 发布

阅读量155

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/weixin_42317515/article/details/81261829

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <style>
        .container{width: 600px;position: absolute;height: 400px;margin: auto;top:0;left: 0;bottom: 0;right: 0;overflow: hidden}
        .list{width: 4200px;height: 400px;position: absolute;}
        .list img { float: left;}
        #buttons { position: absolute; height: 12px; width: 80px; z-index: 2; bottom: 20px; left: 262px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 4px;}
        #buttons .on {  background: orangered;}
        .arrow{cursor:pointer;width: 40px;height: 40px;display:none;background-color: rgba(255,2255,255,0.1);z-index: 2;line-height: 35px;top:180px;text-align: center;position: absolute;color: #eee;font-weight: bold;font-size: 36px}
        .arrow:hover{background-color: rgba(255,2255,255,0.3)}
        .container:hover .arrow{display: block}
        #pre{left: 20px}
        #next{right: 20px}
    </style>
</head>
<body>
    <div class="container">
        <div class="list" style="left: -600px">
            <img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/8124d690-8fb0-11e8-920d-44032ca554a5.jpeg" alt="">
            <img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/4de3a402-8fb0-11e8-ae84-44032ca554a5.jpeg" alt="">
            <img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/5d17e394-8fb0-11e8-8d7e-44032ca554a5.jpeg" alt="">
            <img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/69c9519a-8fb0-11e8-9fb0-44032ca554a5.jpeg" alt="">
            <img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/779910c0-8fb0-11e8-a3f4-44032ca554a5.jpeg" alt="">
            <img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/8124d690-8fb0-11e8-920d-44032ca554a5.jpeg" alt="">
            <img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/4de3a402-8fb0-11e8-ae84-44032ca554a5.jpeg" alt="">
        </div>
        <div id="buttons">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div href="javascript:;" id="pre" class="arrow"><</div>
        <div href="javascript:;" id="next" class="arrow">></div>
    </div>
    <script>
        window.onload=function () {
            var container=document.getElementsByClassName("container")[0];
            var pre=document.getElementById("pre");
            var next=document.getElementById("next");
            var list=document.getElementsByClassName("list")[0];
            var buttons=document.getElementById("buttons").getElementsByTagName("span")
            var index=1;
            var animated=false;
            var timer;

            function autoPlay() {                            //自动轮播
                timer=setInterval(function () {
                    next.onclick();
                },3000)
            }
            autoPlay()
            function stop() {           //结束自动轮播
                clearInterval(timer)
            }
            container.onmouseover=function () {
                stop();
            }
            function showButton() {                 //改变小圆点颜色
                for(var i=0;i<buttons.length;i++) {
                    buttons[i].className = ""
                }
                buttons[index-1].className='on'
            }
            function animate(offset) {   //图片跳转动作
                var newLeft=parseInt(list.style.left) + offset
                var time=300
                var interval=10
                var speed=offset/(time/interval)
                function go() {
                    if((speed<0 && parseInt(list.style.left)>newLeft)||(speed>0 && parseInt(list.style.left)<newLeft)){
                        animated=true
                        list.style.left=parseInt(list.style.left)+speed+'px'
                        setTimeout(go,interval)
                    }else{
                        animated=false
                        list.style.left=newLeft + 'px'
                        if(newLeft > -600){
                            list.style.left=-3000 + 'px'
                        }
                        if(newLeft < -3000){
                            list.style.left=-600 + 'px'
                        }
                    }
                }
                go();
            }
            pre.onclick=function () {       //左箭头点击
                if(!animated){
                    animate(600);
                }
                if(index==1){
                    index=5
                }else{
                    index-=1
                }
                showButton()
            }
            next.onclick=function () {             //右箭头点击
                if(!animated){
                    animate(-600);
                }
                if(index==5){
                    index=1
                }else{
                    index+=1;
                }
                showButton()
            }
            for (var i=0;i<buttons.length;i++){      //小圆点点击
                buttons[i].index=i
                buttons[i].onclick=function () {
                    if(this.className=='on'){
                        return
                    }
                    var distance=(this.index+1-index)*(-600)
                    if(!animated){
                        animate(distance);
                    }
                    index=this.index+1
                    showButton()
                }
            }
        }
    </script>
</body>
</html>

sink_sand

关注

0
点赞
踩
3

收藏

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

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫