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>jQuery自适应焦点图</title>
<link href="css/foucs.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.foucs.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div id="main">
        <div id="index_b_hero">
            <div class="hero-wrap">
                <ul class="heros clearfix">
                    <li class="hero">
                        <a href="#" target="_blank" title="第一张图的说明">
                            <img src="images/1.jpg" class="thumb" alt="内容" />
                        </a>
                    </li>
                    <li class="hero">
                        <a href="#" target="_blank" title="第二张图的说明">
                            <img src="images/2.jpg" class="thumb" alt="内容" />
                        </a>
                    </li>
                    <li class="hero">
                        <a href="#" target="_blank" title="第三张图的说明">
                            <img src="images/3.jpg" class="thumb" alt="内容" />
                        </a>
                    </li>
                    <li class="hero">
                        <a href="#" target="_blank" title="第4张图的说明">
                            <img src="images/4.jpg" class="thumb" alt="内容" />
                        </a>
                    </li>
                </ul>
            </div>
            <div class="helper">
                <div class="mask-left">
                </div>
                <div class="mask-right">
                </div>
                <a href="#" class="prev icon-arrow-a-left"></a>
                <a href="#" class="next icon-arrow-a-right"></a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $.foucs({ direction: 'right' });
    </script>
</body>
</html>

JS代码(jquery.foucs.js):

;
	(function ($){
	$.extend({
	'foucs':function (con){
	var $container = $('#index_b_hero'),$imgs = $container.find('li.hero'),$leftBtn = $container.find('a.prev'),$rightBtn = $container.find('a.next'),config ={
	interval:con && con.interval || 3500,animateTime:con && con.animateTime || 500,direction:con && (con.direction === 'right'),_imgLen:$imgs.length}
,i = 0,getNextIndex = function (y){
	return i + y >= config._imgLen ? i + y - config._imgLen:i + y;
}
,getPrevIndex = function (y){
	return i - y < 0 ? config._imgLen + i - y:i - y;
}
,silde = function (d){
	$imgs.eq((d ? getPrevIndex(2):getNextIndex(2))).css('left',(d ? '-1920px':'1920px')) $imgs.animate({
	'left':(d ? '+':'-') + '=960px'}
,config.animateTime);
	i = d ? getPrevIndex(1):getNextIndex(1);
}
,s = setInterval(function (){
	silde(config.direction);
}
,config.interval);
	$imgs.eq(i).css('left',0).end().eq(i + 1).css('left','960px').end().eq(i - 1).css('left','-960px');
	$container.find('.hero-wrap').add($leftBtn).add($rightBtn).hover(function (){
	clearInterval(s);
}
,function (){
	s = setInterval(function (){
	silde(config.direction);
}
,config.interval);
}
);
	$leftBtn.click(function (){
	if ($(':animated').length === 0){
	silde(false);
}
}
);
	$rightBtn.click(function (){
	if ($(':animated').length === 0){
	silde(true);
}
}
);
}
}
);
}
(jQuery));

CSS代码(foucs.css):

@charset "utf-8";a,body,div,html,img,li,ul{border:0;margin:0;padding:0;font-size:100%;}
html,body{height:100%;}
img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic;}
ol,ul{list-style:none;}
li{display:list-item;}
body{min-width:960px;}
.clearfix:before,.clearfix:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.icon-arrow-a-left,.icon-arrow-a-right{background:url(../images/icon-sd26986d847.png) no-repeat;}
.icon-arrow-a-left{background-position:0 0;height:50px;width:50px;}
.icon-arrow-a-left:hover,.icon-arrow-a-left.arrow-a-left_hover,.icon-arrow-a-left.arrow-a-left-hover{background-position:-60px 0;}
.icon-arrow-a-right{background-position:-120px 0;height:50px;width:50px;}
.icon-arrow-a-right:hover,.icon-arrow-a-right.arrow-a-right_hover,.icon-arrow-a-right.arrow-a-right-hover{background-position:-180px 0;}
html,body{background:#fff;font:12px/1.5 tahoma,helvetica,arial,\5b8b\4f53,sans-serif;}
* html,* html body{background-image:url(about:blank);background-attachment:fixed;zoom:1;}
a{color:#262626;text-decoration:none;}
a:hover{color:#FF4503;text-decoration:underline;}
#main{overflow:hidden;zoom:1;position:relative;}
#index_b_hero{width:960px;height:410px;margin:auto;position:relative;}
#index_b_hero img{width:950px;height:400px;}
#index_b_hero .heros{width:960px;height:410px;}
#index_b_hero .hero-wrap{overflow:visible;position:absolute;}
#index_b_hero .next,#index_b_hero .prev{filter:alpha(Opacity=70);opacity:.7;position:absolute;top:50%;margin-top:-25px;margin-left:5px;background-color:#303030;z-index:3;}
#index_b_hero .next:hover,#index_b_hero .prev:hover{background-color:orangered;}
#index_b_hero .next{margin:-25px 5px 0 0;right:0;}
#index_b_hero .disabled{background-color:#eee;}
#index_b_hero .mask-left,#index_b_hero .mask-right,#index_b_hero .hero{background:#fff;padding:5px;z-index:1;position:absolute;top:0;left:0;width:950px;height:400px;overflow:hidden;left:1920px;}
#index_b_hero .mask-right,#index_b_hero .mask-left{z-index:4;left:-960px;filter:alpha(Opacity=50);opacity:.5;background:#fff;overflow:hidden;}
#index_b_hero .mask-right{left:960px;}
#index_b_hero .active{z-index:2;left:0;}

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