贴吧客户端jQuery焦点图轮播滚动切换特效代码

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

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

以下是贴吧客户端jQuery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<link rel="stylesheet" href="css/zzsc.css" type="text/css" media="screen" />
<title>贴吧客户端jQuery焦点图</title>
</head>
<body>
<br>
<div id="main-outer">
	<div id="main-wrap">
		<div id="main">
			<div class="content">
				<!--图片轮播-->
				<div class="hot_wrap">
					<div id="target" class="tbui_slideshow_container">
						<ul class="tbui_slideshow_list">
							<li><a href="#" target="_blank">
							<img src="images/1.png" width="1000" height="440" />
							</a></li>
							<li><a href="#" target="_blank">
							<img src="images/2.png" width="1000" height="440" />
							</a></li>
							<li><a href="#" target="_blank">
							<img src="images/3.png" width="1000" height="440" />
							</a></li>
						</ul>
					</div>
					<div class="slide_bg">
					</div>
					<!--导航条的结构-->
					<ul id="controller">
						<li>1</li>
						<li>2</li>
						<li>3</li>
					</ul>
					<a href="#" id="prev">上一页</a> <a href="#" id="next">下一页</a>
				</div>
				<div class="left-wrap">
				</div>
			</div>
			<div class="clear">
			</div>
		</div>
	</div>
	<!-- end of #main-wrap -->
	<script type="text/javascript" src="js/jquery-min-1.7.js" charset="utf-8"></script>
	<script src="js/all_dfd5691e.js"></script>
	<script>
$(function () {
new SlideShow({
nav: "#controller",
effect : "fade",
target: "#target",
activeClass: "active",
next: "#next",
prev: "#prev",
auto: true
})
})
</script>
</div>
</body>
</html>

JS代码(all_dfd5691e.js):

function $$(a){
	if(typeof a=="string"){
	return document.getElementById(a)}
return a}
function bindEvent(b,c,a){
	if(b.attachEvent){
	b.attachEvent("on"+c,function(){
	a.call(b,window.event)}
)}
else{
	if(b.addEventListener){
	b.addEventListener(c,a,false)}
else{
	b["on"+c]=a}
}
}
function addClass(c,b){
	var a=new RegExp("(^|\\s)"+b+"(\\s|$)");
	if(!a.test(c.className)){
	c.className=c.className+" "+b}
}
function removeClass(c,b){
	var a=new RegExp("(^|\\s)"+b+"(\\s|$)","g");
	c.className=c.className.replace(a," ")}
function hide(a){
	a.style.display="none"}
function show(a){
	a.style.display=""}
var FlashAdv=function(g,c,b,d,a,f,e){
	this.wrap=$$(g);
	this.dots=$$(b);
	this.num=c;
	this.width=d||document.documentElement.clientWidth;
	this.height=a||358;
	this.intermission=f||4000;
	this.duration=e||50;
	this.si=null}
;
	FlashAdv.prototype={
	creat:function(){
	this.wrap.style.width=this.width*this.num+"px";
	this.index=0;
	for(var a=0;
	a<this.wrap.children.length;
	a++){
	this.wrap.children[a].style.width=this.width+"px"}
}
,slide:function(c){
	var g=this,b=-g.width*c,e=parseFloat(g.wrap.style.left)||0,f=b-e,d=Math.abs(f/g.duration),a=f==0?1:Math.abs(f)/f;
	g.si&&clearInterval(g.si);
	g.si=setInterval(function(){
	e=parseFloat(g.wrap.style.left)||0;
	if(Math.abs(b-e)<=d){
	clearInterval(g.si);
	d=Math.abs(b-e)}
g.wrap.style.left=e+a*d+"px"}
,1)}
,changeDot:function(a){
	for(var b=0;
	b<this.dots.children.length;
	b++){
	this.dots.children[b].style.background="#B3B3B3"}
this.dots.children[a].style.background="#397ee5"}
,autoPlay:function(){
	var a=this;
	a.autoSi=setInterval(function(){
	var b=(a.index-0+1)%a.num;
	a.slide(b);
	a.index=b}
,a.intermission)}
,bindEvent:function(){
	var d=this,c,b=function(e){
	d.slide(e);
	d.index=e;
	clearInterval(d.autoSi);
	d.autoPlay()}
;
	for(var a=0;
	a<this.dots.children.length;
	a++){
	addEvent(this.dots.children[a],"click",function(f){
	var g=f.target||f.srcElement;
	b(g.getAttribute("index"))}
)}
}
}
;
	function SlideShow(a){
	this.initial(a)}
SlideShow.prototype={
	defaultOptions:{
	effect:"slide",activeClass:"tbui_slideshow_active",interval:5000,slide:{
	speed:500}
,fade:{
	speed:500}
}
,initial:function(b){
	b=$.extend({
}
,this.defaultOptions,b);
	var a=this;
	this.options=b;
	this.animating=false;
	this.current=0;
	this.vendorPrefix=this._getVendorPrefix();
	this.$nav=$(b.nav);
	this.$navItem=this.$nav.children();
	this.total=this.$navItem.size();
	this.$container=$(b.target);
	this.$list=this.$container.children(".tbui_slideshow_list");
	this.$tokens=this.$list.children();
	if(!b.width){
	b.width=this.$container.width()}
if(!b.height){
	b.height=this.$container.height()}
this.$container.add(this.$list).css({
	width:b.width,height:b.height}
);
	this.interval=b.interval||5000;
	this.$navItem.first().addClass(b.activeClass);
	this.$tokens.first().show();
	this.$navItem.hover(function(){
	var c=this;
	if(b.auto){
	a.stop()}
this.delayHandler=setTimeout(function(){
	a.delayHandler=null;
	a.setActive($(c).index())}
,200)}
,function(){
	if(b.auto){
	a.play()}
if(this.delayHandler){
	clearTimeout(this.delayHandler)}
}
);
	this.effectHandler=this["_"+b.effect];
	if(b.auto){
	this.play();
	this.$list.hover(function(){
	a.stop()}
,function(){
	a.play()}
)}
if(b.next){
	$(b.next).click(function(c){
	c.preventDefault();
	c.stopPropagation();
	a.next()}
)}
if(b.prev){
	$(b.prev).click(function(c){
	c.preventDefault();
	c.stopPropagation();
	a.prev()}
)}
}
,setActive:function(a){
	if(!this.animating&&a!==this.current){
	this.$navItem.removeClass(this.options.activeClass).eq(a).addClass(this.options.activeClass);
	this.effectHandler(a)}
}
,next:function(){
	var a=this.current+1;
	if(a==this.total){
	a=0}
this.setActive(a)}
,prev:function(){
	var a=this.current-1;
	if(a==-1){
	a=this.total-1}
this.setActive(a)}
,play:function(){
	var a=this;
	if(this.autoHandler==null){
	this.autoHandler=setInterval(function(){
	a.next()}
,this.options.interval)}
}
,stop:function(){
	clearInterval(this.autoHandler);
	this.autoHandler=null}
,_slide:function(f){
	var d,g,b,c,e,a,h;
	var i=this;
	this.animating=true;
	d=this.current;
	h=f>d?1:-1;
	g=f>d?-this.options.width:this.options.width;
	c=f;
	this.$tokens.eq(d).siblings().css({
	display:"none",left:0,zIndex:0}
);
	this.$tokens.eq(c).css({
	display:"block",left:h*this.options.width,zIndex:10}
);
	if(this.vendorPrefix){
	e=this.vendorPrefix;
	a=e+"Transform";
	b=e+"TransitionDuration";
	this.$list[0].style[a]="translateX("+g+"px)";
	this.$list[0].style[b]=this.options.slide.speed+"ms";
	this.$list.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){
	i.$list[0].style[a]="";
	i.$list[0].style[b]="";
	i.$tokens.eq(c).css({
	left:0}
);
	i.$tokens.eq(d).css({
	display:"none",left:0,zIndex:0}
);
	i.animating=false;
	i.current=c;
	i.$list.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd")}
)}
else{
	i.$list.stop().animate({
	left:g}
,this.options.slide.speed,function(){
	i.$list.css({
	left:0}
);
	i.$tokens.eq(c).css({
	left:0}
);
	i.$tokens.eq(d).css({
	display:"none",left:0,zIndex:0}
);
	i.current=c;
	i.animating=false}
)}
}
,_fade:function(c){
	var a=this;
	var d,b;
	this.animating=true;
	d=this.current;
	b=c;
	this.$tokens.eq(b).css({
	display:"none",left:0,zIndex:10}
);
	this.$tokens.eq(d).stop().fadeOut(this.options.fade.speed);
	this.$tokens.eq(b).stop().fadeIn(this.options.fade.speed,(function(){
	a.$tokens.eq(b).css({
	zIndex:0}
);
	a.animating=false;
	a.current=b}
))}
,_getVendorPrefix:function(){
	var a,b,c,d,e;
	a=document.body||document.documentElement;
	c=a.style;
	d="Transition";
	e=["Moz","Webkit","Khtml","O","ms"];
	b=0;
	while(b<e.length){
	if(typeof c[e[b]+d]==="string"){
	return e[b]}
b++}
return false}
}
;
	var closeBtn=$$("close");
	bindEvent(closeBtn,"click",function(a){
	hide($$("board-wrap"));
	$$("main-wrap").style.position="relative"}
);
	bindEvent(closeBtn,"mouseover",function(){
	addClass(this,"hover")}
);
	bindEvent(closeBtn,"mouseout",function(){
	removeClass(this,"hover")}
);
	(function(g){
	var b=g("#other-prod"),d=b.find("ul"),f=g(".all-app");
	f.click(function(){
	a()}
);
	function c(){
	f.addClass("actived");
	f.attr("show",1);
	b.slideDown()}
function e(){
	f.attr("show",0);
	f.removeClass("actived");
	b.slideUp()}
function a(){
	if(f.attr("show")==1){
	e()}
else{
	c()}
}
}
)(jQuery);

CSS代码(zzsc.css):

html,table,td,tr,body,ul,li,p,h2{margin:0;padding:0;}
ul,li,ol{list-style:none;}
img{border:0;}
.clear{clear:both;}
.dib{display:inline-block;zoom:1;display:inline;}
body{font:12px/1.5 ΢���ź�,Arial;}
h2{font:16px/1.2;}
a{text-decoration:none;}
#main{width:1000px;margin:0 auto;text-align:left;position:relative;z-index:1;}
#controller{width:100px;height:13px;text-align:center;position:absolute;bottom:9px;left:475px;}
#controller li{display:inline;float:left;margin:0 5px;width:13px;height:13px;text-indent:-99999px;cursor:pointer;background:url(icon_page.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",src='icon_page.png',sizingMethod='crop');}
#controller li.active{background:url(icon_page_active.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",src='icon_page_active.png',sizingMethod='crop');}
.tbui_slideshow_container{width:1000px;height:440px;overflow:hidden;position:relative;}
#next,#prev{width:65px;height:65px;overflow:hidden;display:block;position:absolute;top:188px;text-indent:-9999px;cursor:pointer;}
#prev{left:10px;background:url(btn_pre.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",src='btn_pre.png',sizingMethod='crop');}
#next{right:10px;background:url(btn_next.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",src='btn_next.png',sizingMethod='crop');}
.tbui_slideshow_container .tbui_slideshow_slide{position:absolute;top:0;left:0;z-index:0;display:none;webkitBackfaceVisibility:hidden;}
.tab_list{display:none;}
.tbui_slideshow_list img{width:1000px;height:440px;overflow:hidden;}
.slide_bg{width:1000px;height:35px;position:absolute;bottom:0;left:0;background:#000;filter:Alpha(Opacity=55);opacity:0.55;}
.down_wrap{padding-left:112px;}
.down_col{float:left;display:inline;margin:0 50px 0 0;width:280px;background:url(down_dotted_line.jpg) repeat-y right 10px;}
.down_col dt{height:59px;}
.down_col dd{font-size:14px;line-height:18px;color:#787878;font-family:Arial,"??",Helvetica,sans-serif;margin:0;}
.down_col_ewm{width:130px;margin:0;background-image:none;}
.down_col_ewm dt{height:81px;padding:15px 0 10px;}
.down_col_ewm dd{text-align:center;}
.ewm_box img{width:81px;height:81px;display:block;margin:0 auto;}
.down_col_center{}
.down_more_blank{height:68px;width:300px;margin:39px auto 0;padding-top:18px;}

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