QQ相册jQuery渐变式焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 QQ相册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" />
    <meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为QQ相册jQuery渐变式焦点图，属于站长常用代码" />
    <title>QQ相册jQuery渐变式焦点图</title>
    <link href="css/nav.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.nav.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div id="inner">
        <div class="hot-event">
            <div class="switch-nav"><a href="#" onclick="return false;" class="prev"><i class="ico i-prev"></i><span class="hide-clip">上一个</span></a><a href="#" onclick="return false;" class="next"><i class="ico i-next"></i><span class="hide-clip">下一个</span></a></div>
            <div class="event-item" style="display: block;">
                <a target="_blank" href="#" class="banner">
                    <img src="images/1.jpg" class="photo" style="width: 960px; height: 300px;" alt="测试用图片" />
                </a>
            </div>
            <div class="event-item" style="display: none;">
                <a target="_blank" href="#" class="banner">
                    <img src="images/2.jpg" class="photo" style="width: 960px; height: 300px;" alt="测试用图片" />
                </a>
            </div>
            <div class="event-item" style="display: none;">
                <a target="_blank" href="#" class="banner">
                    <img src="images/3.jpg" class="photo" style="width: 960px; height: 300px;" alt="测试用图片" />
                </a>
            </div>
            <div class="event-item" style="display: none;">
                <a target="_blank" href="#" class="banner">
                    <img src="images/4.jpg" class="photo" style="width: 960px; height: 300px;" alt="测试用图片" />
                </a>
            </div>
            <div class="event-item" style="display: none;">
                <a target="_blank" href="#" class="banner">
                    <img src="images/5.jpg" class="photo" style="width: 960px; height: 300px;" alt="测试用图片" />
                </a>
            </div>
            <div class="switch-tab">
                <a href="#" onclick="return false;" class="current">1</a>
                <a href="#" onclick="return false;">2</a>
                <a href="#" onclick="return false;">3</a>
                <a href="#" onclick="return false;">4</a>
                <a href="#" onclick="return false;">5</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('#inner').nav({ t: 2000, a: 1000 });
    </script>
</body>
</html>

JS代码(jquery.nav.js):

;
	(function ($){
	$.fn.extend({
	"nav":function (con){
	var $this = $(this),$nav = $this.find('.switch-tab'),t = (con && con.t) || 3000,a = (con && con.a) || 500,i = 0,autoChange = function (){
	$nav.find('a:eq(' + (i + 1 === 5 ? 0:i + 1) + ')').addClass('current').siblings().removeClass('current');
	$this.find('.event-item:eq(' + i + ')').css('display','none').end().find('.event-item:eq(' + (i + 1 === 5 ? 0:i + 1) + ')').css({
	display:'block',opacity:0}
).animate({
	opacity:1}
,a,function (){
	i = i + 1 === 5 ? 0:i + 1;
}
).siblings('.event-item').css({
	display:'none',opacity:0}
);
}
,st = setInterval(autoChange,t);
	$this.hover(function (){
	clearInterval(st);
	return false;
}
,function (){
	st = setInterval(autoChange,t);
	return false;
}
).find('.switch-nav>a').bind('click',function (){
	var current = $nav.find('.current').index();
	i = $(this).attr('class') === 'prev' ? current - 2:current;
	autoChange();
	return false;
}
).end().find('.switch-tab>a').bind('click',function (){
	i = $(this).index() - 1;
	autoChange();
	return false;
}
);
	return $this;
}
}
);
}
(jQuery));

CSS代码(nav.css):

div{display:block;margin:0;padding:0;border:0 none;outline:0;background:transparent;font-weight:normal;font-style:normal;}
#inner{width:960px;margin:0 auto;}
.hot-event{padding:300px 0 0;position:relative;}
.hot-event .switch-tab{text-align:center;padding:10px 0;}
.hot-event .switch-tab a,.hot-event .switch-tab .current{margin:0 2px;display:inline-block;width:15px;height:15px;background-image:url(../images/bg.png);background-position:-161px 0;font:0/0 arial;color:transparent;overflow:hidden;vertical-align:top;}
.hot-event .switch-tab .current{background-image:url(../images/bg.png);background-position:-195px 0;}
.hot-event .switch-nav{position:absolute;right:12px;top:254px;z-index:2;}
.hot-event .switch-nav .i-prev{background-image:url(../images/bg.png);background-position:-127px 0;}
.hot-event .switch-nav .prev{border-radius:3px 0 0 3px;border-width:1px;}
.hot-event .switch-nav .next{border-radius:0 3px 3px 0;border-width:1px 1px 1px 0;}
.hot-event .switch-nav .i-next{background-image:url(../images/bg.png);background-position:-144px 0;}
.hot-event .switch-nav a{display:inline-block;padding:7px 16px;background:rgba(0,0,0,.3);border-style:solid;border-color:rgba(255,255,255,.6);}
.hot-event .switch-nav a:hover{background:rgba(0,0,0,.2);}
.hot-event .event-item{height:300px;width:960px;position:absolute;z-index:1;left:0;top:0;}
.hot-event .event-item .banner{display:block;}
.hot-event .event-item img{-webkit-box-reflect:below 0 -webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(85%,transparent),to(rgba(255,255,255,.2)));border:0;}
.hide-clip{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;line-height:0!important;width:1px!important;overflow:hidden;}
a{color:#4385a7;}
a{text-decoration:none;}
a .ico{cursor:pointer;}
.ico{display:inline-block;width:16px;height:16px;vertical-align:middle;overflow:hidden;}

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