原生js写简易轮播

最新推荐文章于 2022-09-02 10:36:25 发布

可乐油条

最新推荐文章于 2022-09-02 10:36:25 发布

阅读量119

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41864230/article/details/81458417

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        section{
            width: 800px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            position: relative;
        }
        .box{
            width: 800px;
            height: 500px;
            overflow: hidden;
            position: relative;

        }
        .lu_box{
            width: 4000px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
        }
        li{
            list-style: none;
            width: 800px;
            height: 500px;
            float: left;
        }
        .next{
            width: 40px;
            height: 40px;
            background: dimgray;
            position: absolute;
            top:0;
            bottom:0;
            margin-top: auto;
            margin-bottom: auto;
            right: 0;
        }
        .prev{
            width: 40px;
            height: 40px;
            background: dimgray;
            position: absolute;
            top:0;
            bottom:0;
            margin-top: auto;
            margin-bottom: auto;
            left: 0;
        }
        .d_box{
            width: 150px;
            height: 35px;
            margin-left: auto;
            margin-right: auto;
            position: absolute;
            left: 0;right: 0;
            top: 450px;
        }
        .d_box>p{
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid blue;
            float: left;
        }
        .active{
            background: brown;
        }
    </style>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
    window.onload=function(){

        var lu_box=document.getElementById('lu_box');
        var next=document.getElementById('next');
        var prev=document.getElementById('prev');
        var lis=document.getElementsByTagName('li');
        var d_p=document.getElementById('d_box').children;
        var index=1;
        function juli(offset){
            var newlist=parseInt(lu_box.style.left)+offset;
            lu_box.style.left=newlist+'px';
            if(newlist>0){
            lu_box.style.left=-3200+'px';
            }
            else if(newlist<-3200){
            lu_box.style.left=0+'px';
            }
        }

    function showbtn(){
        for(var i=0;i<d_p.length;i++){
            if(d_p[i].className=='active'){
                d_p[i].className='';
                break;
            }
            if(index>5){
                index=1;
            }
            else if(index<1){
                index=5
            }
        }
    d_p[index-1].className='active';
    }

    var cst=setInterval(function(){
            juli(-800)
            index+=1;
            showbtn();
            },2000)
        var set=null;
        $('.box').mouseout(function(){
            set=setInterval(function(){
                index+=1;
                showbtn();
            juli(-800)
            },2000)
        })

        $('.box').mousemove(function(){
            var clear_set=clearInterval(set);
            clearInterval(cst);
        })

        next.onclick=function(){
                juli(-800);
                index+=1;
                showbtn()
        }

        prev.onclick=function(){
            juli(800)
            index-=1;
            showbtn()
        }

    }

    </script>
    <body>
    <section>
        <div class="box">
            <div class="lu_box" id="lu_box" style="left:0px">
                <li style="background: red;">1</li>
                <li style="background: gold;">2</li>
                <li style="background: aqua;">3</li>
                <li style="background: wheat;">4</li>
                <li style="background: darkslateblue;">5</li>
            </div>
        </div>

    <div class="d_box" id="d_box">
        <p class="active"></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

    <p class="next" id="next">右 </p>    
    <p class="prev" id="prev">左 </p>    
    </section>


    </body>
</html>

可乐油条

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js写简易轮播

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&gt; section{
复制链接

扫一扫