仿淘宝图片滚动


<!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></title>
</head>
<body>
    <style type="text/css">
        .top_adv
        {
            background: url(../images/top_adv_bg.png) no-repeat;
            height: 200px;
            width: 280px;
            overflow: hidden;
            position: relative;
        }
        .top_adv ul
        {
            padding: 0px;
            margin: 0px;
        }
        .top_adv ul li
        {
            position: relative;
            margin-bottom: 0px;
            list-style: none;
        }
        .top_adv ul li, .top_adv ul li img
        {
            width: 280px;
            height: 200px;
            _display: inline;
        }
        .order
        {
            position: absolute;
            right: 5px;
            bottom: -6px;
            font: 12px/1.5 tahoma, arial;
            height: 18px;
        }
        .order li
        {
            list-style: none;
            float: left;
            color: #d94b01;
            text-align: center;
            line-height: 16px;
            width: 16px;
            height: 16px;
            font-family: Arial;
            font-size: 11px;
            cursor: pointer;
            margin-left: 3px;
            border: 1px solid #f47500;
            background-color: #fcf2cf;
        }
        .order li.on
        {
            line-height: 18px;
            width: 18px;
            height: 18px;
            font-size: 14px;
            margin-top: -2px;
            background-color: #ff9415;
            font-weight: bold;
            color: #FFF;
        }
    </style>
    仿淘宝/alibaba图片切换：
    <div class="top_adv area">
        <ul id="idSlider">
            <li>
                <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg" alt="图片上传预览" />
            </li>
            <li>
                <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg" alt="多级联动菜单" />
            </li>
            <li>
                <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg" alt="浮动定位提示" />
            </li>
            <li>
                <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg" alt="数据延迟加载" />
            </li>
            <li>
                <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song5.jpg" alt="简便文件上传" />
            </li>
        </ul>
        <p class="order">
        </p>
    </div>
</body>
</html>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        ScrollImg("#idSlider", "li", 200, ".order");
    });

    function ScrollImg(iMove, iChild, scrollH, control) {

        var objMove = $(iMove);
        var orderNum = objMove.find(iChild).length;
        var uiHeight = orderNum * scrollH;
        objMove.height(uiHeight);
        var isMove = false;

        for (var i = 1; i <= orderNum; i++) {
            $(".order").append("<li>" + i + "</li>");
        }
        var nextIndex = 0;
        $(control).find(iChild).eq(0).addClass("on");
        //开始滚动
        function autoRun() {
            isMove = true;
            if (nextIndex < orderNum - 1) {
                nextIndex++;
                AddStyle(nextIndex);
                objMove.stop().animate({ marginTop: "-=" + scrollH }, 500, function () { isMove = false; });
            } else {
                nextIndex = 0;
                AddStyle(nextIndex);
                objMove.stop().animate({ marginTop: 0 }, 500, function () { isMove = false; });
            }
        }

        $(control).find(iChild).click(function () {
            var index = nextIndex = $(this).index();
            objMove.animate({ marginTop: -index * scrollH + "px" }, 500);
            AddStyle(index);
        });

        function AddStyle(i) {
            $(control).find(iChild).eq(i).addClass("on").siblings(iChild).removeClass("on");
        }
        var tt = setInterval(function () { if (!isMove) { autoRun(); } }, 2000);
        objMove.hover(function () {
            clearInterval(tt);

        }, function () { tt = setInterval(function () { if (!isMove) { autoRun(); } }, 2000); });
    }
</script>
posted on 2013-08-31 18:14 朝着阅读(463) 评论(0) 收藏举报