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 profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery响应式焦点图</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div class="mBody" style="padding:10px 0;">
        <div id="content">
            <div class="main">
                <div class="indexPicBox mb10">
                    <div class="hotPic">
                        <div class="num">
                            <span class="cur">1</span><span>2</span><span>3</span>
                        </div>
                        <ul class="pic">
                            <li style="display:block;">
                                <a title="前端开发工具大全" href="#/" target="_blank">
                                    <img src="images/1.jpg" />
                                </a>
                            </li>
                            <li>
                                <a title="前端开发工具书推荐" href="#/" target="_blank">
                                    <img src="images/2.jpg" />
                                </a>
                            </li>
                            <li>
                                <a title="瀑布流布局大全" href="#" target="_blank">
                                    <img src="images/3.jpg" />
                                </a>
                            </li>
                        </ul>
                    </div>
                    <script type="text/javascript">
                        //焦点图
                        $(function () {
                            var sw = 0;
                            $(".hotPic .num span").mouseover(function () {
                                sw = $(".hotPic .num span").index(this);
                                myShow(sw);
                            });
                            function myShow(i) {
                                $(".hotPic .num span").eq(i).addClass("cur").siblings("span").removeClass("cur");
                                $(".hotPic .pic li").eq(i).stop(true, true).fadeIn(600).siblings("li").fadeOut(600);
                                //$(".hotPic .text p").eq(i).show().siblings("p").hide();
                            }
                            //滑入停止动画，滑出开始动画
                            $(".hotPic").hover(function () {
                                if (myTime) {
                                    clearInterval(myTime);
                                }
                            }, function () {
                                myTime = setInterval(function () {
                                    myShow(sw)
                                    sw++;
                                    if (sw == $(".hotPic .pic li").length) { sw = 0; }
                                }, 3000);
                            });
                            //自动开始
                            var myTime = setInterval(function () {
                                myShow(sw)
                                sw++;
                                if (sw == $(".hotPic .pic li").length) { sw = 0; }
                            }, 3000);
                        })
                    </script>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码(style.css):

*{border:0;margin:0;padding:0;}
body{background:#f5f5f5;color:#666;font:400 12px/1.5 Arial;}
h2{font-size:16px;}
a:link,a:visited{color:#666;text-decoration:none;}
a:hover{text-decoration:underline;color:#31b2ff;}
ul,li{list-style:none;}
.clear{clear:both;}
.clearfix:after{content:"";display:block;visibility:hidden;height:0;clear:both;}
.clearfix{zoom:1;}
.mb10{margin-bottom:10px;}
.mBody{background:#f5f5f5;}
#content{width:960px;margin:0 auto;padding-top:10px;overflow:hidden;zoom:1;}
.main{float:left;width:650px;}
.mainBox{width:618px;padding:0 15px;border:1px solid #e5e5e5;background:#fff;}
.main ul li{list-style:none;}
.main .post,.main .left{margin-top:10px;}
#sidebar{float:right;width:300px;}
#sidebar li ul{}
#sidebar li ul li{}
#sidebar li ul.children li,#sidebar li ul.children li ul li{padding-left:18px;background:url(images/tier.gif) 6px 5px no-repeat;}
.indexPicBox{width:638px;height:280px;padding:5px;border:1px solid #e5e5e5;background:#fff;}
.hotPic{width:638px;height:280px;position:relative;overflow:hidden;}
.hotPic .num{position:absolute;right:0;bottom:0;z-index:10;width:638px;padding-right:8px;height:30px;text-align:right;}
.hotPic .num span{width:20px;height:20px;display:inline-block;line-height:20px;font-size:14px;text-align:center;margin:5px 2px 0;cursor:pointer;background:#222;color:#fff;}
.hotPic .num span.cur{background:#54BFFF;color:#fff;}
.hotPic .pic{position:relative;z-index:5;}
.hotPic .pic li{position:absolute;display:none;}
.hotPic .pic li img{width:638px;height:280px;display:block;}
.hotPic .text{position:absolute;bottom:0;left:10px;z-index:12;width:520px;height:30px;line-height:30px;overflow:hidden;font-family:Microsoft YaHei;}
.hotPic .text p{position:absolute;display:none;color:#fff;font-weight:800;font-size:15px;}

附件:下载该文件资源,减少时间成本(增值服务)