JQuery实现简单图片轮播

系统管理员 2022-05-23 05:13 309阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>listDemo</title>
    
        <link rel="stylesheet" href="css/demo.css">
        <style>
            .hovers{border-bottom: 3px solid orange;cursor: pointer}
        </style>
    </head>
    <body>
        <div id="main">
            
    
            <ul id="check">
                <li>装机必备</li>
                <li>精品应用</li>
                <li>精品游戏</li>
                <div><input type="button" id="stop" value="停止轮播"></div>
                <div class="clear"></div>
            </ul>
    
            
            <div>
                <ul>
                   <li>
                        <img src="images/icon_large_004.png">
                        <span>携程旅行</span><br/>
                        <a href="#">下载</a>
                    </li>
                </ul>
            </div>
            
            <div>
                <ul>
                    <li>
                        <img src="images/icon_large_003.png">
                        <span>Weibo</span><br/>
                        <a href="#">下载</a>
                    </li>
    
                </ul>
            </div>
    
            
            <div>
                <ul>
                    <li>
                        <img src="images/icon_large_005.png">
                        <span>美团</span><br/>
                        <a href="#">下载</a>
                    </li>
    
                </ul>
            </div>
        </div>
        <script src="js/jquery.js"></script>
        <script>
            var check = $("#check li");
           var element = $("#main>div");
           //alert(check.length+":"+element.length);
    
            //点击鼠标实现图片的切换
            $("#check li").click(function(){
                var index = $("#check li").index(this);
                check.eq(index).addClass("hovers");
                //alert(index+":"+element.length);
                element.eq(index).fadeIn("slow");
                for(var i=0;i<element.length;i++){
                    if(i != index){
                        element.eq(i).css("display","none");
                        check.eq(i).removeClass("hovers");
                    }
                }
    
            });
    
            //轮播图的实现（通过调用setInterval（）方法）
            var index = 0;
            function changeImg(){
                if(index>2){
                    index=0;
                }
                check.eq(index).addClass("hovers");
                element.eq(index).fadeIn("slow");
                for(var i=0;i<element.length;i++){
                    if(i != index){
                        check.eq(i).removeClass("hovers");
                        element.eq(i).css("display","none");
                    }
                }
                index++;
            };
    
            //通过调用setInterval（）方法定时触发changeImg()函数
            //该方法会返回一个值作为停止调用的句柄
            //通过window.clearInterval(返回值)即可停止触发
            var stop = setInterval("changeImg()",1000);
            $("#stop").click(function () {
                window.clearInterval(stop);
            });
        </script>
    </body>
    </html>

demo.css：

*{margin: 0; padding: 0}
    body{width: 100%; height: 100%}
    ul{list-style: none}
    a{text-decoration: none;color: black}
    .clear{clear: both}
    #main{width: 800px;height: 400px;font-size: 14px;position:relative;margin: 0 auto;text-align: center;box-shadow: 1px 1px 2px 3px lightcyan}
    #main>ul>li{float: left; width:100px;height: 30px;line-height: 30px;}
    #main>ul>li:not(:first-child){margin-left: 35px;}
    #main>div{width: 800px;position: absolute;top: 50px;left: 5px;display: none;}
    #main>div>ul>li{float: left;margin-left: 10px;padding: 15px;margin-top: 20px; line-height: 20px}
    #main>div>ul>li:not(:first-child){margin-left: 30px}
    #main>div>ul>li>img{width: 72px;height: 72px;display: block}