淘宝商城多格jQuery焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是淘宝商城多格jQuery焦点图轮播滚动切换特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>{title}</title>
    <meta name="keywords" content="jquery特效,jquery焦点图,jquery图片轮换,jquery相册效果,焦点图实例,淘宝焦点图代码下载,{keyword},JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为{title}" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            color: #222;
            font-family: Verdana,Arial,Helvetica,sans-serif;
            background: #f0f0f0;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            zoom: 1;
        }

        ul, li {
            list-style: none;
        }

        img {
            border: 0;
        }

        .wrapper {
            width: 600px;
            margin: 0 auto;
            padding-bottom: 50px;
        }

        .ad {
            width: 468px;
            margin: 10px auto 0;
        }

        .ad li {
            padding-top: 5px;
        }

        h1 {
            height: 50px;
            line-height: 50px;
            font-size: 22px;
            font-weight: normal;
            font-family: "Microsoft YaHei",SimHei;
        }

        .shuoming {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding-bottom: 10px;
        }

        .shuoming dt {
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            text-indent: 10px;
        }

        .shuoming dd {
            line-height: 20px;
            padding: 5px 20px;
        }

        .wrapper {
            width: 780px;
        }
        /* tmall focus */
        #focus {
            width: 780px;
            height: 380px;
            overflow: hidden;
            position: relative;
        }

        #focus ul {
            height: 380px;
            position: absolute;
        }

        #focus ul li {
            float: left;
            width: 780px;
            height: 380px;
            overflow: hidden;
            position: relative;
            background: #000;
        }

        #focus ul li div {
            position: absolute;
            overflow: hidden;
        }

        #focus .btnBg {
            position: absolute;
            width: 780px;
            height: 40px;
            left: 0;
            bottom: 0;
            background: #000;
        }

        #focus .btn {
            position: absolute;
            width: 770px;
            height: 24px;
            left: 0;
            bottom: 8px;
            padding-left: 10px;
        }

        #focus .btn span {
            display: inline-block;
            _display: inline;
            _zoom: 1;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 20px;
            font-family: "Microsoft YaHei",SimHei;
            margin-right: 10px;
            cursor: pointer;
            color: #fff;
        }

        #focus .btn span.on {
            background: #000;
            color: #fcc;
        }
    </style>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
            var len = $("#focus ul li").length; //获取焦点图个数
            var index = 0;
            var picTimer;

            //以下代码添加数字按钮和按钮后的半透明长条
            var btn = "<div class='btnBg'></div><div class='btn'>";
            for (var i = 0; i < len; i++) {
                btn += "<span>" + (i + 1) + "</span>";
            }
            btn += "</div>"
            $("#focus").append(btn);
            $("#focus .btnBg").css("opacity", 0.5);

            //为数字按钮添加鼠标滑入事件，以显示相应的内容
            $("#focus .btn span").mouseenter(function () {
                index = $("#focus .btn span").index(this);
                showPics(index);
            }).eq(0).trigger("mouseenter");

            //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
            $("#focus ul").css("width", sWidth * (len + 1));

            //鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，所以会有变暗的效果
            $("#focus ul li div").hover(function () {
                $(this).siblings().css("opacity", 0.7);
            }, function () {
                $("#focus ul li div").css("opacity", 1);
            });

            //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
            $("#focus").hover(function () {
                clearInterval(picTimer);
            }, function () {
                picTimer = setInterval(function () {
                    if (index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
                        showFirPic();
                        index = 0;
                    } else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
                        showPics(index);
                    }
                    index++;
                }, 3000); //此3000代表自动播放的间隔，单位：毫秒
            }).trigger("mouseleave");

            //显示图片函数，根据接收的index值显示相应的内容
            function showPics(index) { //普通切换
                var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
                $("#focus ul").stop(true, false).animate({ "left": nowLeft }, 500); //通过animate()调整ul元素滚动到计算出的position
                $("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
            }

            function showFirPic() { //最后一张图自动切换到第一张图时专用
                $("#focus ul").append($("#focus ul li:first").clone());
                var nowLeft = -len * sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
                $("#focus ul").stop(true, false).animate({ "left": nowLeft }, 500, function () {
                    //通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
                    $("#focus ul").css("left", "0");
                    $("#focus ul li:last").remove();
                });
                $("#focus .btn span").removeClass("on").eq(0).addClass("on"); //为第一个按钮添加选中的效果
            }
        });

    </script>
</head>

<body>
    <div class="wrapper">
        <h1>jQuery淘宝商城多格焦点图效果</h1>
        <div id="focus">
            <ul>
                <li>
                    <div style="left:0; top:0; width:560px; height:380px;"><a href="#" target="_blank"><img src="img/a01.jpg" alt="标题" /></a></div>

                    <div style="right:0; top:0; width:220px; height:140px;"><a href="#" target="_blank"><img src="img/a02.jpg" alt="标题" /></a></div>
                    <div style="right:0; top:140px; width:220px; height:140px;"><a href="#" target="_blank"><img src="img/a03.jpg" alt="标题" /></a></div>
                    <div style="right:0; bottom:0; width:220px; height:100px;"><a href="#" target="_blank"><img src="img/a04.jpg" alt="标题" /></a></div>
                </li>

                <li>
                    <div style="left:0; top:0; width:780px; height:380px;"><a href="#" target="_blank"><img src="img/b01.jpg" alt="标题" /></a></div>
                </li>

                <li>
                    <div style="left:0; top:0; width:260px; height:210px;"><a href="#" target="_blank"><img src="img/c01.jpg" alt="标题" /></a></div>

                    <div style="left:260px; top:0; width:260px; height:210px;"><a href="#" target="_blank"><img src="img/c02.jpg" alt="标题" /></a></div>
                    <div style="left:0; top:210px; width:520px; height:170px;"><a href="#" target="_blank"><img src="img/c03.jpg" alt="标题" /></a></div>
                    <div style="right:0; top:0; width:260px; height:380px;"><a href="#" target="_blank"><img src="img/c04.jpg" alt="标题" /></a></div>
                </li>

                <li>
                    <div style="left:0; top:0; width:560px; height:380px;"><a href="#" target="_blank"><img src="img/d01.jpg" alt="标题" /></a></div>
                    <div style="right:0; top:0; width:220px; height:140px;"><a href="#" target="_blank"><img src="img/d02.jpg" alt="标题" /></a></div>
                    <div style="right:0; top:140px; width:220px; height:140px;"><a href="#" target="_blank"><img src="img/d03.jpg" alt="标题" /></a></div>
                    <div style="right:0; bottom:0; width:220px; height:100px;"><a href="#" target="_blank"><img src="img/d04.jpg" alt="标题" /></a></div>

                </li>

                <li>
                    <div style="left:0; top:0; width:780px; height:380px;"><a href="#" target="_blank"><img src="img/e01.jpg" alt="标题" /></a></div>
                </li>
            </ul>
        </div>
    </div><!-- wrapper end -->
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)