JQuery实现简单图片轮播

最新推荐文章于 2024-08-27 19:30:26 发布

fish_520_mi

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量355

点赞数

文章标签： JQuery 图片轮播

本文链接：https://blog.csdn.net/fish_520_mi/article/details/80549371

版权

<!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">
        <!--topList-->

        <ul id="check">
            <li>装机必备</li>
            <li>精品应用</li>
            <li>精品游戏</li>
            <div><input type="button" id="stop" value="停止轮播"></div>
            <div class="clear"></div>
        </ul>

        <!--装机必备listElement-->
        <div>
            <ul>
               <li>
                    <img src="images/icon_large_004.png">
                    <span>携程旅行</span><br/>
                    <a href="#">下载</a>
                </li>
            </ul>
        </div>
        <!--精品应用listElement-->
        <div>
            <ul>
                <li>
                    <img src="images/icon_large_003.png">
                    <span>Weibo</span><br/>
                    <a href="#">下载</a>
                </li>

            </ul>
        </div>

        <!--精品游戏listElement-->
        <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}