JQUERY圖片循環滾動

時間 2020-01-18
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQUERY圖片循環滾動</title>
	<meta charset="utf-8" />
    <style>
        body,ul,li{
            margin:0;
            padding:0;
        }
        body{
            font:14px/24px Microsoft YaHei;
            color:#333;
        }
        ul{
            list-style:none;
        }
        a{
            color:#333;
            outline:none;
            text-decoration:none;
        }
        a:hover{color:#ffd800;}
        .warp{width:1326px;padding-top:30px; margin:0 auto;background:#ccc;}
        .boxs {
            padding: 15px;
            margin: 0 auto 30px;
            background-color: #e4fbff;
            width:1296px;
        }
        .autoBox{
            position:relative;
            margin:0 auto;
            overflow:hidden;
        }
        .autoBox ul{
            position:absolute;
            list-style:none;
            z-index:2;
        }
        #autoScroll{
            width:auto;
            height:264px;
        }
        #autoScroll ul li{
            float:left;
            width:308px;
            height:258px;
            padding:3px;
            margin:0 5px;
            _display:inline;
        }
        #autoScroll ul li a{
            display: block;
            padding: 3px;
            border: 1px solid #dbdbdb;
            box-shadow: 0 0 3px rgba(170, 223, 252, 0.5);
        }
        #autoScroll li img{
            width:300px;
            height:250px;
            display:block;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="boxs">
            <div class="autoBox" id="autoScroll">
                <ul>
                    <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview1"/></a></li>
                    <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview2" /></a></li>
                    <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview3" /></a></li>
                    <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview4" /></a></li>
                    <li><a href="#"><img src="http://www.qianduanzhan.com/300x250?text=Preview5" /></a></li>
                </ul>
            </div>
        </div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
        //方法一，不完善
        (function(jQuery){
            $.fn.autoScroll = function (o) {
                o = $.extend({//設置默認參數
                    direction: "left",
                    interval: null,
                    speed: null,
                    distance: null,
                    liWidth: null,
                    liHeight: null,
                    showNum:null
                }, o || {});
                return this.each(function () {//回調開始
                    var $ts = $(this),
                        $ul = $ts.children("ul"),
                        $li = $ul.children("li"),
                        len = $li.length;
                    if (o.direction == "left" || o.direction == "right") {
                        $ts.css({ "width": o.showNum * o.liWidth });
                        $ul.css({ "width": len * o.liWidth });
                        $li.css({ "float": "left" });
                    };
                    switch (o.direction) {//分兩種狀況，進行事件調用
                        case "left": sroLeft();
                            break;
                        case "right": sroRight();
                            break;
                    };
                    function sroLeft() {//向左滾動事件
                        $ul.css("left", 0);
                        var left;
                        function leftMoving() {
                            var dis = -o.distance,
                                dif = -o.liWidth * (len - o.showNum),
                                left = parseFloat($ul.css("left"));
                            if (left <= dif) {
                                $ul.css("left", 0);
                                left = 0;
                                $ul.delay(o.interval);
                            };
                            var ltDis = left + dis;
                            if (ltDis <= dif) {
                                ltDis = dif;
                            }
                            $ul.animate({ "left": ltDis + "px" }, o.speed);
                        };
                        $ul.hover(function(){
                            clearInterval(fnLeft);
                        }, function(){
                            fnLeft = setInterval(function(){leftMoving() }, o.interval);
                        });
                        fnLeft = setInterval(function(){leftMoving() },o.interval);
                    }
                    /*function sroRight(){}*/
                });

            };
        })(jQuery);
    </script>
    <script>
        $(function () {
            $("#autoScroll").autoScroll({
                direction: "left", //滾動方向
                interval: 40,     //滾動間隔
                speed: 10,       //滾動完成耗時,必定要小於'滾動間隔'
                distance: 3,     //單次滾動距離
                liWidth: 324,   //單個li的盒模型高度&寬度(包括margin值。左右滾動只有liWidth參數)
                showNum: 4       //顯示幾個li，父級高會自適應，但不要超過最大個數
            });
        });
    </script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。