经典的jQuery图片广告轮番切换特效

最新推荐文章于 2025-06-10 11:36:51 发布

转载最新推荐文章于 2025-06-10 11:36:51 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/s7mmersupport/archive/2010/06/29/1767152.html

文章标签：

#javascript #数据库 #ViewUI

本文介绍了一款基于jQuery的图片广告轮播插件，具备淡入淡出过渡效果及缩略图预览功能，适合网页设计中实现动态图片展示。代码调用简单，可修改为动态数据库版。

查看效果

下载地址

jQuery经典的图片广告轮番切换特效，带缩略图，淡入淡出过渡，调用简单方便，可以修改为动态数据库版，使用了jquery插件，由于缩略图只能布局指定张数的图片，因此本图片切换的图片数量是有限制的。

前台部分代码

代码

<! 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" />
< title > 广告   </ 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 ="http://www.jscss8.com/" 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 ="http://www.jscss8.com/" 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 ="http://www.jscss8.com/" 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 ="http://www.jscss8.com/" 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 ="http://www.jscss8.com/" 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 ="http://www.jscss8.com/" 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 ="http://www.jscss8.com/" 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 >
</ body >
</ html >

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/29/1767152.html