Jquery特效六:图片自动变换特效
2011-02-14 15:05
260 查看
效果图及代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssrain</title>
<link media="all" href="images/show.css" type="text/css" rel="stylesheet">
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" src="images/slide.js"></script>
</head>
<body>
<!--大图轮换区-->
<div id="topstory">
<div id="highlight">
<div id="featured">
<!--标签开始 -->
<div class="image" id="image_53691">
<a title="08广告创意风暴（十）" href="http://c.chinavisual.com/2008/02/21/c47492/index.shtml"
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_53777">
<a class="open" title="13家经典“大牌”的logo进化" href="http://c.chinavisual.com/2008/02/18/c47426/index.shtml"
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_54034">
<a class="open" title="视觉专访：悉尼奥运会首席设计顾问Michael Bryce" href="http://c.chinavisual.com/2008/02/22/c47526/index.shtml"
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_52906">
<a class="open" title="adidas“没有不可能”(四)" href="http://c.chinavisual.com/2008/02/19/c47469/index.shtml"
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_52902">
<a class="open" title="adidas“没有不可能”(三)" href="http://c.chinavisual.com/2008/02/19/c47468/index.shtml"
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_52895">
<a class="open" title="adidas“没有不可能”(二)" href="http://c.chinavisual.com/2008/02/19/c47464/index.shtml"
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_52890">
<a class="open" title="iphone ipod该换衫了？定制壁纸给你换！" href="http://c.chinavisual.com/2008/02/19/c47457/index.shtml"
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_53691" href="#image_53691">
<img height="20" src="images/e8bbb9f5e00523d5528615a835201266_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_53777" href="#image_53777">
<img height="20" src="images/7bb09aff47d9393658b0385f2aabf5a5_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_54034" href="#image_54034">
<img height="20" src="images/3e85fb19e8c09f630f68a9b5120fa264_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_52906" href="#image_52906">
<img height="20" src="images/4d39c524100fd0385e7c9de82efd8e33_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_52902" href="#image_52902">
<img height="20" src="images/354a2840f556bfeaf96c84a00cbe09ac_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_52895" href="#image_52895">
<img height="20" src="images/c00d230fbc41140319a1ff901fdbe9c4_1_48_20.jpg" width="48">
</a></li>
<li class="last_img slideshowItem"><a id="thumb_52890" href="#image_52890">
<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 = ["53691", "53777", "54034", "52906", "52902", "52895", "52890"];
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssrain</title>
<link media="all" href="images/show.css" type="text/css" rel="stylesheet">
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" src="images/slide.js"></script>
</head>
<body>
<!--大图轮换区-->
<div id="topstory">
<div id="highlight">
<div id="featured">
<!--标签开始 -->
<div class="image" id="image_53691">
<a title="08广告创意风暴（十）" href="http://c.chinavisual.com/2008/02/21/c47492/index.shtml"
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_53777">
<a class="open" title="13家经典“大牌”的logo进化" href="http://c.chinavisual.com/2008/02/18/c47426/index.shtml"
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_54034">
<a class="open" title="视觉专访：悉尼奥运会首席设计顾问Michael Bryce" href="http://c.chinavisual.com/2008/02/22/c47526/index.shtml"
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_52906">
<a class="open" title="adidas“没有不可能”(四)" href="http://c.chinavisual.com/2008/02/19/c47469/index.shtml"
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_52902">
<a class="open" title="adidas“没有不可能”(三)" href="http://c.chinavisual.com/2008/02/19/c47468/index.shtml"
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_52895">
<a class="open" title="adidas“没有不可能”(二)" href="http://c.chinavisual.com/2008/02/19/c47464/index.shtml"
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_52890">
<a class="open" title="iphone ipod该换衫了？定制壁纸给你换！" href="http://c.chinavisual.com/2008/02/19/c47457/index.shtml"
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_53691" href="#image_53691">
<img height="20" src="images/e8bbb9f5e00523d5528615a835201266_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_53777" href="#image_53777">
<img height="20" src="images/7bb09aff47d9393658b0385f2aabf5a5_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_54034" href="#image_54034">
<img height="20" src="images/3e85fb19e8c09f630f68a9b5120fa264_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_52906" href="#image_52906">
<img height="20" src="images/4d39c524100fd0385e7c9de82efd8e33_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_52902" href="#image_52902">
<img height="20" src="images/354a2840f556bfeaf96c84a00cbe09ac_1_48_20.jpg" width="48">
</a></li>
<li class="slideshowItem"><a id="thumb_52895" href="#image_52895">
<img height="20" src="images/c00d230fbc41140319a1ff901fdbe9c4_1_48_20.jpg" width="48">
</a></li>
<li class="last_img slideshowItem"><a id="thumb_52890" href="#image_52890">
<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 = ["53691", "53777", "54034", "52906", "52902", "52895", "52890"];
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现图片左右间隔滚动特效(可自动播放)
- jquery实现图片左右间隔滚动特效(可自动播放)
- 基于Jquery的图片自动分组且自适应页面的缩略图展示特效
- jquery 视觉特效（图片自动移动，左侧消失，右侧进入）
- jQuery图片自动轮转动画特效
- Jquery特效五:图片点击变换特效
- jquery实现图片左右间隔滚动特效(可自动播放)
- Jquery特效八:图片TAB LIST变换
- jquery实现图片左右间隔滚动特效(可自动播放)
- JQuery 可自定义自动播放图片 文字 也可以带按钮点击特效
- jQuery实现图片轮播特效代码分享
- Jquery全屏图片自动切换插件,支持窗口变化图片大小等比例变化
- 使用jquery实现仿百度自动补全特效
- 【HTML5示例代码分享】HTML5图片自动归类特效
- jQuery实现图片与文字描述左右滑动自动切换的方法
- 精心挑选的23款美轮美奂的 jQuery 图片特效插件
- jquery实现横向图片轮播特效代码分享
- 一款基于jquery超炫的图片切换特效
- jquery制作banner图片左右上下切换滚动特效
- Jquery特效一:图片轮换显示