jQuery流行广告效果轮播滚动切换特效代码

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

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

以下是 jQuery流行广告效果轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery流行广告效果，属于站长常用代码" />
<title>jQuery流行广告效果</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<script src="js/slide.js" type="text/javascript"></script>
</head>
<body>
<br/><br/>

<!--大图轮换区-->
<DIV id=topstory>
<DIV id=highlight>
<DIV id=featured>
<!--标签开始 -->
<DIV class=image id=image_xixi-01>
<A title=08广告创意风暴（十） href="#" target=_blank>
<IMG alt=08广告创意风暴（十） src="images/47492_253130.jpg">
</A>
<DIV class=word>
<H3>08广告创意风暴（十）</H3>
<P>视觉中国网站编辑收集整理08年最新的广告创意，以连载的形式的呈现的大家的</P>
</DIV>
</DIV>
<!--标签结束 -->
<DIV class=image id=image_xixi-02><A class=open title=13家经典“大牌”的logo进化 
href="#" target=_blank><IMG 
class=full alt=13家经典“大牌”的logo进化 src="images/47426_252416.jpg"> 
</A>
<DIV class=word>
<H3>13家经典“大牌”的logo进化</H3>
<P>看看这些颇有影响力的品牌早期使用的logo，是不是嗅到时代的气息了呢？</P></DIV></DIV>
<DIV class=image id=image_xixi-03><A class=open 
title="视觉专访：悉尼奥运会首席设计顾问Michael Bryce" 
href="#" target=_blank><IMG 
class=full alt="视觉专访：悉尼奥运会首席设计顾问Michael Bryce" 
src="images/47526_253407.jpg"> </A>
<DIV class=word>
<H3>视觉专访：悉尼奥运会首席设计顾问Michael Bryce</H3>
<P>Michael Bryce是全球著名的澳大利亚设计师，他在从建筑设计</P></DIV></DIV>
<DIV class=image id=image_xixi-04><A class=open title=adidas“没有不可能”(四) 
href="#" target=_blank><IMG 
class=full alt=adidas“没有不可能”(四) src="images/47469_252798.jpg"> 
</A>
<DIV class=word>
<H3>adidas“没有不可能”(四)</H3>
<P>运动是一种游戏，一种积极的释放，更是一种生活态度。在运动中解放自己的心灵</P></DIV></DIV>
<DIV class=image id=image_xixi-05><A class=open title=adidas“没有不可能”(三) 
href="#" target=_blank><IMG 
class=full alt=adidas“没有不可能”(三) src="images/47468_252784.jpg"> 
</A>
<DIV class=word>
<H3>adidas“没有不可能”(三)</H3>
<P>运动是一种游戏，一种积极的释放，更是一种生活态度。在运动中解放自己的心灵</P></DIV></DIV>
<DIV class=image id=image_xixi-06><A class=open title=adidas“没有不可能”(二) 
href="#" target=_blank><IMG 
class=full alt=adidas“没有不可能”(二) src="images/47464_252767.jpg"> 
</A>
<DIV class=word>
<H3>adidas“没有不可能”(二)</H3>
<P>运动是一种游戏，一种积极的释放，更是一种生活态度。在运动中解放自己的心灵</P></DIV></DIV>
<DIV class=image id=image_xixi-07><A class=open title="iphone ipod该换衫了？定制壁纸给你换！" 
href="#" target=_blank><IMG 
class=full alt="iphone ipod该换衫了？定制壁纸给你换！" 
src="images/47457_252699.jpg"> </A>
<DIV class=word>
<H3>iphone ipod该换衫了？定制壁纸给你换！</H3>
<P>当我们拥有了ipod或者iphone，也必须享用那些自带壁纸和桌面主题么</P></DIV></DIV></DIV>
<DIV id=thumbs>
<UL>
  <LI class="first btnPrev"><IMG id=play_prev 
  src="images/btn_prev.gif"> </LI>
  <LI class=slideshowItem><A id=thumb_xixi-01 
  href="#image_xixi-01"><IMG height=20 
  src="images/e8bbb9f5e00523d5528615a835201266_1_48_20.jpg" 
  width=48> </A></LI>
  <LI class=slideshowItem><A id=thumb_xixi-02 
  href="#image_xixi-02"><IMG height=20 
  src="images/7bb09aff47d9393658b0385f2aabf5a5_1_48_20.jpg" 
  width=48> </A></LI>
  <LI class=slideshowItem><A id=thumb_xixi-03 
  href="#image_xixi-03"><IMG height=20 
  src="images/3e85fb19e8c09f630f68a9b5120fa264_1_48_20.jpg" 
  width=48> </A></LI>
  <LI class=slideshowItem><A id=thumb_xixi-04 
  href="#image_xixi-04"><IMG height=20 
  src="images/4d39c524100fd0385e7c9de82efd8e33_1_48_20.jpg" 
  width=48> </A></LI>
  <LI class=slideshowItem><A id=thumb_xixi-05 
  href="#image_xixi-05"><IMG height=20 
  src="images/354a2840f556bfeaf96c84a00cbe09ac_1_48_20.jpg" 
  width=48> </A></LI>
  <LI class=slideshowItem><A id=thumb_xixi-06 
  href="#image_xixi-06"><IMG height=20 
  src="images/c00d230fbc41140319a1ff901fdbe9c4_1_48_20.jpg" 
  width=48> </A></LI>
  <LI class="last_img slideshowItem"><A id=thumb_xixi-07 
  href="#image_xixi-07"><IMG height=20 
  src="images/55f1457fa8f165d95fa3ee8f5eb4422a_1_48_20.jpg" 
  width=48> </A></LI>
  <LI class="last btnNext"><IMG id=play_next 
  src="images/btn_next.gif"> 
  <DIV class=clear></DIV></LI></UL></DIV>
<script type=text/javascript>
var target = ["xixi-01","xixi-02","xixi-03","xixi-04","xixi-05","xixi-06","xixi-07"];
</script>
<br/>
</body>
</html>

JS代码(slide.js):

var timer = null;
	var offset = 5000;
	var index = 0;
	//��ͼ�����ֻ�function slideImage(i){
	var id = 'image_'+ target[i];
	$('#'+ id) .animate({
	opacity:1}
,800,function(){
	$(this).find('.word').animate({
	height:'show'}
,'slow');
}
).show() .siblings(':visible') .find('.word').animate({
	height:'hide'}
,'fast',function(){
	$(this).parent().animate({
	opacity:0}
,800).hide();
}
);
}
//bind thumb afunction hookThumb(){
	$('#thumbs li a') .bind('click',function(){
	if (timer){
	clearTimeout(timer);
}
var id = this.id;
	index = getIndex(id.substr(6));
	rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
	this.blur();
	return false;
}
);
}
//bind next/prev imgfunction hookBtn(){
	$('#thumbs li img').filter('#play_prev,#play_next') .bind('click',function(){
	if (timer){
	clearTimeout(timer);
}
var id = this.id;
	if (id == 'play_prev'){
	index--;
	if (index < 0) index = 6;
}
else{
	index++;
	if (index > 6) index = 0;
}
rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
}
);
}
//get indexfunction getIndex(v){
	for(var i=0;
	i < target.length;
	i++){
	if (target[i] == v) return i;
}
}
function rechange(loop){
	var id = 'thumb_'+ target[loop];
	$('#thumbs li a.current').removeClass('current');
	$('#'+ id).addClass('current');
}
function auto(){
	index++;
	if (index > 6){
	index = 0;
}
rechange(index);
	slideImage(index);
	timer = window.setTimeout(auto,offset);
}
$(function(){
	//change opacity $('div.word').css({
	opacity:0.85}
);
	auto();
	hookThumb();
	hookBtn();
}
);

CSS代码(css.css):

*{BORDER-TOP-WIDTH:0px;PADDING-RIGHT:0px;PADDING-LEFT:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;BORDER-RIGHT-WIDTH:0px}
BODY{FONT-SIZE:12px;BACKGROUND:#d9d9d9;FONT-FAMILY:Arial,"����",Helvetica}
LI{FONT-SIZE:12px;LIST-STYLE-TYPE:none}
IMG{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px}
A{TEXT-DECORATION:none}
.clear{CLEAR:both}
#featured{OVERFLOW:hidden;WIDTH:480px;POSITION:relative;HEIGHT:200px}
#featured .word{PADDING-RIGHT:5px;PADDING-LEFT:5px;Z-INDEX:10;BACKGROUND:url(/1/bg_transparent.gif) no-repeat;LEFT:0px;PADDING-BOTTOM:5px;WIDTH:470px;COLOR:#fff;BOTTOM:0px;PADDING-TOP:5px;POSITION:absolute;HEIGHT:32px}
#featured .word H3{FONT-SIZE:13px}
#featured .ui-els-hide{DISPLAY:none}
#thumbs{WIDTH:480px;LIST-STYLE-TYPE:none;HEIGHT:28px}
* HTML #thumbs{HEIGHT:100%}
#thumbs LI{DISPLAY:inline;FLOAT:left;WIDTH:52px;MARGIN-RIGHT:4px;HEIGHT:24px}
#thumbs UL{MARGIN-TOP:3px}
#thumbs LI.last_img{MARGIN-RIGHT:4px}
#thumbs LI.first{MARGIN:5px 10px 0pt 15px;WIDTH:20px;CURSOR:pointer;HEIGHT:13px}
#thumbs LI.last{MARGIN:5px 12px 0pt 8px;WIDTH:20px;CURSOR:pointer;HEIGHT:13px}
#thumbs LI A{BORDER-RIGHT:#9c9c9c 2px solid;BORDER-TOP:#9c9c9c 2px solid;DISPLAY:block;FONT-SIZE:0px;BORDER-LEFT:#9c9c9c 2px solid;WIDTH:48px;BORDER-BOTTOM:#9c9c9c 2px solid}
#thumbs LI A:hover{BORDER-RIGHT:#99cc33 2px solid;BORDER-TOP:#99cc33 2px solid;BORDER-LEFT:#99cc33 2px solid;BORDER-BOTTOM:#99cc33 2px solid}
#thumbs LI A.current{BORDER:#5FC243 2px solid;}
#thumbs LI.first IMG{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px}
#thumbs LI.last IMG{BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px}
#topstory{MARGIN-TOP:5px;MARGIN-left:5px;BACKGROUND:#fff;FLOAT:left;WIDTH:490px;HEIGHT:237px}
#highlight{PADDING-RIGHT:5px;PADDING-LEFT:5px;FLOAT:left;PADDING-BOTTOM:5px;WIDTH:470px;PADDING-TOP:5px}

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