js实现图片轮播图

偏执的太偏执、 2022-01-07 10:21 390阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>
    <style>
        *{
        
            margin:0;
            padding:0;
        }
        ul li{
        
            list-style:none;
        }
        .banner{
        
            width:100%;
            height:590px;
            position: relative;
        }
        .bimg{
        
            width:100%;
            height:590px;
            position: relative;
        }
        .bimg li{
        
            position: absolute;
            width: 100%;
            height: 590px;
            opacity: 0;
            transition: .3s;
            z-index: 0;
            background: red;
        }
        .bimg li.on{
        
            opacity: 1;
            z-index: 1;
        }
    
    </style>
    <body>
    <div class="banner">
        <ul class="bimg">
            <li class="on" style="background:url('https://m.360buyimg.com/babel/jfs/t1/29896/20/13350/41922/5c9ed5d7E2e2b6412/8b81cde63fbac215.jpg')center center no-repeat">
    
            </li>
            <li style="background:url('https://m.360buyimg.com/babel/jfs/t1/23375/23/13064/94132/5c9dbd64E41cec9c9/a84a20b6fd02f06c.jpg')center center no-repeat">
    
            </li>
            <li style="background:url('https://m.360buyimg.com/babel/jfs/t1/20204/8/11496/97824/5c8f393cE5ebd698b/a6727f61aa8217b3.jpg')center center no-repeat">
    
            </li>
        </ul>
    </div>
    <div class="option">
        <a href="javascript:void(0);" οnclick="left();">左</a>
    
        <ul class="hover-ul"><li>1</li><li>2</li><li>3</li></ul>
    </div>
    <script>
        $(function(){
        
            setInterval("auto_banner_do();",3000);
    
            //悬停 
            $(".hover-ul li").hover(function(){
        
                var len = $(".banner .bimg li").length;
                var index = $(".hover-ul li").index(this);
                index++;
                auto_banner(index);
            });
        });
        var banner_i = 2;
        function auto_banner_do(){
        
            auto_banner(banner_i);
            banner_i++;
        }
    
        function auto_banner(x){
        
            var len = $(".banner .bimg li").length;
            if( x>len ){
        
                x = 1;
            }
            $(".banner .bimg li").removeClass("on");
            $(".banner .bimg li").eq(x-1).addClass("on");
            banner_i=x;
        }
    
        //向左
        function left(){
        
            var len = $(".banner .bimg li").length;
            var index = $(".banner .bimg li").index($(".banner .bimg li.on"));
            auto_banner(index);
        }
    
    
    
    </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/cl94/p/10629741.html