Jquery 焦點圖用于圖片展示效果代碼

更新時間：2010年05月18日 20:30:53 作者：

今天因網(wǎng)站需要寫了個圖片展示效果,其中用到了Jquery的data函數(shù)，剛學就被我用這了，昨天看時還覺得無甚用處，因為可以人為地給一個節(jié)點加屬性嘛，不過省卻了幾句代碼而已。

效果圖如下所示:

演示代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Jquery圖片展示焦點圖</title> <style type="text/css"> *{ margin:0px; padding:0px; list-style:none; border:0px;} body{ font-size:12px; color:white;} #imageShow{ position:relative; width:586px; height:150px; z-index:1; overflow:hidden;} #imageShow #imageSwitch{ position:absolute; right:0px; bottom:0px; padding-left:50px; z-index:2; background-color:#C08A93; filter: Alpha(opacity=70); opacity:0.7;} #imageShow #imageSwitch li{ float:left; border-left:1px solid white; width:30px; height:14px; line-height:14px; text-align:center;} </style>   </head> <body> <div   class="wppm3vysvbp"   id="imageShow"> <ul id="imageSrc"> <li><img src="http://img.jbzj.com/demoimg/201005/o_1.gif"></li> <li><img src="http://img.jbzj.com/demoimg/201005/o_2.gif"></li> <li><img src="http://img.jbzj.com/demoimg/201005/o_3.gif"></li> <li><img src="http://img.jbzj.com/demoimg/201005/o_4.gif"></li> <li><img src="http://img.jbzj.com/demoimg/201005/o_5.gif"></li> </ul> <ul id="imageSwitch"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

jquery.validate使用攻略第二部
jQuery.validate.js API說明
2010-07-07
ASP SQL防注入的方法
前一篇我們介紹了一種防SQL注入的終極方法，也就是最原始、最簡單、最有效也是最通用的方法，就是數(shù)據(jù)類型的檢查加單引號的處理，具體的內容前面一篇已經介紹過了，這里我就不重復了
2008-12-12
Jquery解析Json格式數(shù)據(jù)過程代碼
Json是一種輕量級的數(shù)據(jù)交換格式，本節(jié)為大家介紹的是Jquery解析Json格式數(shù)據(jù)的過程，很詳細，看看就知道了
2014-10-10
Jquery修改image的src屬性,圖片不加載問題的解決方法
下面小編就為大家?guī)硪黄狫query修改image的src屬性,圖片不加載問題的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
2016-05-05
jQuery針對各類元素操作基礎教程
這篇文章主要介紹了jQuery針對各類元素操作基礎,包括jQuery基礎操作、選擇要操作的元素及處理DOM元素等,是深入學習jQuery所必備的基礎技能,需要的朋友可以參考下
2014-08-08
jquery實現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法
這篇文章主要介紹了jquery實現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法,實例分析了jQuery操作百葉窗翻滾效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
原生Aajax 和jQuery Ajax 寫法個人總結
AJAX:即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。本文重點給大家介紹原生Aajax 和jQuery Ajax 個人總結，一起看看吧
2017-03-03
EasyUI的doCellTip實現(xiàn)鼠標放到單元格上提示單元格內容
本篇文章主要介紹了easyUI的doCellTip 就是鼠標放到單元格上有個提示的功能，對于Javascript教程感興趣的同學可以參考一下
2016-08-08
jQueryUI DatePicker 添加時分秒
本文主要介紹jQueryUI DatePicker添加時分秒的方法，簡單實用，需要的朋友可以參考下。
2016-06-06
非常棒的10款jQuery 幻燈片插件
這篇文章與大家分享的是10款非常棒的 jQuery 幻燈片插件，使用這些插件可以幫助你在網(wǎng)站中加入非常吸引人的幻燈片效果，另外這些插件還有制作教程。
2011-06-06