jquery广告无缝轮播代码实例

最新推荐文章于 2024-08-30 11:20:32 发布

csmzl

最新推荐文章于 2024-08-30 11:20:32 发布

阅读量1.4k

点赞数

分类专栏： JS和JQuery Web 文章标签： jquery html 广告实例图片

本文链接：https://blog.csdn.net/csmzl/article/details/54093083

版权

JS和JQuery 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

Web

8 篇文章 0 订阅

订阅专栏

jquery广告无缝轮播代码实例

需要自行添加五张图片和引用jquery库

纵向轮播实例：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery广告无缝轮播演示</title>
        <script src="../js/jquery-1.12.4.js"></script>
        <style type="text/css">
            li {
                list-style: none;
                width: 380px; 
                height: 180px; 
                float: left;
            }
            img {
                height: 180px;
                width: 380px;
            }
            ul{
                position: relative;
                height: 180px;
                width: 380px;
                top: 0px;
                padding: 0;
                margin: 0;
            }
            .divFollow a{
                background-color: #FFFFFF;
                width: 18px;
                height: 5px;
                display: inline-block;
            }
            .mains .title {
                font-size: 25px;
            }
            .g1 {
                width: 380px;
                height: 180px;
                margin: 0 auto;
                overflow: hidden;
            }
            #bb{
                width: 380px;
                height: 180px;
                position: relative;
            }

        </style>
    </head>

    <body>
        <div class="mains">
            <div class="title">jquery广告无缝轮播演示</div>
            <div class="g1">
                <ul id="ulID">
                    <li><img src="../img/1.jpg"></li>
                    <li><img src="../img/2.jpg"></li>
                    <li><img src="../img/3.jpg"></li>
                    <li><img src="../img/4.jpg"></li>
                    <li><img src="../img/5.jpg"></li>
                    <li><img src="../img/1.jpg"></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            var PlaceTop = parseInt($("#ulID").css("top"));
            function moveUL() {
                var ulID = $("#ulID");
                PlaceTop = --PlaceTop;
                if(PlaceTop == -916) {
                    PlaceTop = -17;
                }
                ulID.css("top", PlaceTop);
                if(PlaceTop < -916) {
                    alert("Eror!");
                    clearInterval(int);
                }
            }
            int = setInterval("moveUL()", 10);
            $(".g1").hover(function() {
                clearInterval(int);
            }, function() {
                int = setInterval("moveUL()", 10);
            });
        </script>
        <br>
        <div style="text-align: center;overflow: hidden;width: 380px;height: 180px;margin: 0 auto;">
            <div id="bb" style="display: inline-block;left:0px;">
                <img style="left:0px;position: absolute;" src="../img/1.jpg" />
                <img style="left:-380px;position: absolute;" src="../img/2.jpg" />
                <img style="left:-760px;position: absolute;" src="../img/3.jpg" />
                <img style="left:-1140px;position: absolute;" src="../img/1.jpg" />
            </div>
            <div id="bbFollow" class="divFollow" style="position: absolute;margin-top: -33px;width: 365px;text-align: right;">
                <a></a>
                <a></a>
                <a></a>
            </div>
        </div>
        <script type="text/javascript">
            var moveId = $("#bb")
            var PlaceLeft = parseInt(moveId.css("left"));
            var intval;
            var follow = 0;
            var cicleTime = 18;
            function moveImg() {
                PlaceLeft = ++PlaceLeft;
                if(PlaceLeft == 1140) {
                    PlaceLeft = 0;
                }
                follow = parseInt(PlaceLeft / 380);         
                if (follow > 2) {
                    follow = 0;
                }
                //小图
                $("#bbFollow a").each(function (index) {
                    if (follow == index) {
                        $(this).css("background-color", "#f6de09")
                    } else {
                        $(this).css("background-color", "#fff")
                    }
                })
                moveId.css("left", PlaceLeft);
            }
            intval = setInterval("moveImg()", cicleTime);
            $("#bb").hover(function() {
                clearInterval(intval);
            }, function() {
                intval = setInterval("moveImg()", cicleTime);
            });

        </script>
    </body>

</html>