可左右翻页的jQueryBanner效果轮播滚动切换特效代码

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

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

以下是可左右翻页的jQueryBanner效果轮播滚动切换特效代码的示例演示效果:

当前平台(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代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}" />
<title>{title}</title>
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
<style>
/* 焦点图 */

img{border:0}
#slideshow{position: relative;height: 300px;width: 930px;margin: 0 auto;}
#slideshow a{float: left;display: inline;}
#slideshow .img{position: absolute;width: 930px;height: 300px;overflow: hidden}
#slideshow .img span{position: absolute;width: 19999px;display: block}
#slideshow .btns{z-index: 10;position: absolute;width: 930px}
#slideshow .btns b{position: absolute;width: 100px;display: block;height: 14px;overflow: hidden;top: 275px;left: 50%}
#slideshow .btns b i{width: 10px;background: #414140;float: left;height: 10px;font-size: 0px;overflow: hidden;cursor: pointer;margin-right: 6px;border: #414140 2px solid;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px}
#slideshow .btns b i: hover{background: #a7a7a6}
#slideshow .btns b i.on{background: #3cd2f1;cursor: default}
#slideshow .btns b i.on: hover{background: #3cd2f1;cursor: default}
#slideshow .btns s{position: absolute;width: 60px;display: none;height: 80px;overflow: hidden;top: 115px;cursor: pointer}
#slideshow .btns s i{position: absolute;width: 60px;background: url(images/btn_slideshow.png);height: 160px;_filter: progid: dximagetransform.microsoft.alphaimageloader(enabled=true, sizingmethod=scale, src="images/btn_slideshow.png");_background: none;}
#slideshow .btns s.prev{left: 0px}
#slideshow .btns s.prev i{top: -80px}
#slideshow .btns s.next{right: 0px}
.slideshow-hover#slideshow .btns s{display: block}
.paging{opacity: 0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;-khtml-opacity: 0.5;height: 300px;position: absolute;background: #000;overflow: hidden}
.wtit .info,.wtit .tit{float: left;}
.wtit .info{padding: 35px 0 0 20px;color: #989898;}
.wtit .info span{margin: 0 8px;}
</style>
</head>
<body>

<div id="slideshow" rel="auto-play">
  <div class="img"> <span><a href="#" target="_blank"><img src="images/01.jpg" /></a><a href="#" target="_blank"><img src="images/02.jpg" /></a><a href="#" target="_blank"><img src="images/03.jpg" /></a></span>
    <div class="paging pattern"></div>
    <div class="paging subpattern"></div>
  </div>
</div>
<script type='text/javascript' src='js/jquery.slider.js'></script>
</body>
</html>

JS代码(jquery.slider.js):

(function(){
	var $root = $('#slideshow'),root_w = $root.width();
	var p = $root.find('> div.img > span'),n = p.children().length;
	p.children().eq(0).clone().appendTo(p);
	function onoff(on,off){
	(on !== -1) && btns.eq(on).addClass('on');
	(off !== -1) && btns.eq(off).removeClass('on');
}
function dgo(n,comp){
	// hack for slast var idx = n > max ? 0:n;
	onoff(idx,cur);
	cur = idx;
	p.stop().animate({
	left:-1 * root_w * n}
,{
	duration:dur,complete:comp}
);
	if(idx == 0 ){
	p.children().eq(n-1).clone().appendTo('.pattern');
}
else{
	$('.pattern').empty()}
;
	//p.children().eq(n-1).clone().appendTo('.pattern');
}
// next if dir > 0 // prev if dir < 0 // reinit if dir == 0 // slast -> 如果播放完最后1张，要如何处理 // true 平滑切换到第1张 var cur = 0,max = n - 1,pt = 0,stay = 5 * 1000,/* ms */
 dur = .6 * 1000,/* ms */
 btns;
	function go(dir,slast){
	pt = +new Date();
	if (dir === 0){
	onoff(cur,-1);
	p.css({
	left:-1 * root_w * cur}
);
	return;
}
var t;
	if (dir > 0){
	t = cur + 1;
	if (t > max && !slast){
	t = 0;
}
if (t <= max){
	return dgo(t);
}
return dgo(t,function(){
	p.css({
	left:0}
);
}
);
}
else{
	t = cur - 1;
	if (t < 0){
	t = max;
	p.css({
	left:-1 * root_w * (max + 1)}
);
	return dgo(t);
}
else{
	return dgo(t);
}
}
}
btns = $((new Array(n + 1)).join('<i></i>')) .each(function(idx,el){
	$(el).data({
	idx:idx}
);
}
);
	var pn_btn = $('<s class="prev"><i></i></s><s class="next"><i></i></s>');
	$('<div class="btns"/ >') .append( $('<b/>') .append(btns) .delegate('i','click',function(ev){
	dgo($(this).data('idx'));
}
) .css({
	width:n * 20,marginLeft:-10 * n}
) ) .delegate('s','click',function(ev){
	go($(this).is('.prev') ? -1:1,true);
}
) .append(pn_btn) .appendTo($root);
	go(1);
	// 自动播放 var ie6 = $.browser.msie && $.browser.version < '7.0';
	$root.hover(function(ev){
	// $root[(ev.type == 'mouseenter' ? 'add':'remove') + 'Class']('show-hover');
	if (ie6){
	pn_btn[ev.type == 'mouseenter' ? 'show':'hide']();
}
else{
	pn_btn.stop()['fade' + (ev.type == 'mouseenter' ? 'In':'Out')]('fast');
}
}
);
	if ($root.attr('rel') == 'auto-play'){
	var si = setInterval(function(){
	var now = +new Date();
	if (now - pt < stay){
	return;
}
go(1,true);
}
,5000);
	p.mouseover(function(){
	clearInterval(si);
}
) p.mouseout(function(){
	si = setInterval(function(){
	var now = +new Date();
	if (now - pt < stay){
	return;
}
go(1,true);
}
,5000);
}
)}
var wid = $(document.body).width();
	var swid = (wid-930)/2;
	var bwid = root_w * n;
	$('#slideshow').css('width',wid);
	$('#slideshow .img').css('width',wid);
	$('#slideshow .btns').css('left',swid)$('.paging').css('width',swid);
	$('.subpattern').css('right',0);
	$('#slideshow .img span').css(({
	paddingLeft:swid}
))}
)();

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