[原创]Jquery轮播

最新推荐文章于 2024-06-18 11:23:38 发布

a5842811

最新推荐文章于 2024-06-18 11:23:38 发布

阅读量55

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/daimala/articles/3988896.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery轮播</title>
    <script src="../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        *{ margin:0; padding:0;list-style:none;}
        .banner{ width:500px; height:200px; position:relative; overflow:hidden;}
        
        .box{ font-size:16px; font-family:Arial; font-weight:bold; color:#fff;}
        
        .a{ width:500px; height:200px; position:relative; left:0px; float:left;}
        .b{ background-color:Green; width:240px; height:180px; position:absolute; left:10px; top:10px;}
        .c{ background-color:Orange; width:240px; height:180px; position:absolute; left:260px; top:10px;}
        .d{ background-color:Silver; width:480px; height:180px;position:absolute; left:20px; top:10px;}
        
        .e{ background-color:Fuchsia; width:240px; height:180px; position:absolute; left:10px; top:10px;}
        .f{ background-color:Maroon; width:240px; height:180px; position:absolute; left:260px; top:10px;}
        
        .dot{ width:100%; text-align:center; position:absolute; bottom:20px;}
        .dot li{width:10px; height:10px; margin:0 3px; display:inline-block; border:1px solid #ccc;}
        
        .dotli1{ background-color:Teal;}
        .dotli2{ background-color:Orange;}
    </style>
    <script type="text/javascript">
        var z = 0;
        //开启轮播动画
        function startAnimate(j) {
            var n = $(".a").length;
            var timer = setInterval(function () {
                if (j == 0) {
                    z = 0;
                }
                if (j == n-1) {
                    z = 1;
                }

                if (z == 0) {
                    j++;
                }
                else {
                    j--;
                }

                $(".dot li:eq(" + j + ")").click();
            }, 1000);

            return timer;
        }

        //结束轮播动画
        function stopAnimate(timer) {
            clearInterval(timer);
        }

        $(function () {
            //轮播元素个数
            var n = $(".a").length;
            //每个轮播元素的宽度
            var animateWidth = 500;

            //全部轮播元素的长度和
            var boxWidth = (n * animateWidth) + "px";
            $(".box").css("width", boxWidth);

            //开启轮播
            var timer = startAnimate(0);

            var j = -1;
            //触发焦点事件
            $(".dot li").click(function () {
                var i = $(this).index();
                $(".dot li").each(function () {
                    $(this).attr("class", "dotli2");
                    if ($(this).index() == i) {
                        $(this).attr("class", "dotli1");
                    }
                });

                if (j > -1) {
                    $(".a:eq(" + j + ")").stop();
                }

                //轮播元素动画
                $(".a").stop().animate({ "left": parseInt(-animateWidth * i) + "px" });

                j = i;
            });

            //焦点鼠标事件
            $(".dot li").mousedown(function () {
                stopAnimate(timer);

                var i = $(this).index();
                timer = startAnimate(i);
            });
        });
    </script>
</head>
<body>
<div class="banner">
    <div class="box">
        <div class="a">
            <div class="b">1</div>
            <div class="c"></div>
        </div>
        <div class="a">
            <div class="d">2</div>
        </div>
        <div class="a">
            <div class="e">3</div>
            <div class="f"></div>
        </div>
        <div class="a">
            <div class="b">4</div>
            <div class="c"></div>
        </div>
        <div class="a">
            <div class="d">5</div>
        </div>
        <div class="a">
            <div class="e">6</div>
            <div class="f"></div>
        </div>
    </div>
    <div class="dot">
        <ul>
            <li class="dotli1"></li>
            <li class="dotli2"></li>
            <li class="dotli2"></li>
            <li class="dotli2"></li>
            <li class="dotli2"></li>
            <li class="dotli2"></li>
        </ul>
    </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/daimala/articles/3988896.html

a5842811

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[原创]Jquery轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫