jQuery幻燈片特效代碼分享 鼠標(biāo)滑過按鈕時(shí)切換(2)
這篇文章主要介紹了jQuery實(shí)現(xiàn)幻燈片焦點(diǎn)圖,可實(shí)現(xiàn)非常炫目時(shí)尚的幻燈片效果,非常具有實(shí)用價(jià)值,基本能滿足你在網(wǎng)頁上使用幻燈片(焦點(diǎn)圖)效果,具體如下
幻燈片效果描述:用鼠標(biāo)滑過右下角數(shù)字按鈕幻燈片進(jìn)行左右切換進(jìn)行切換。
自定義切換參數(shù)效果:向下切換、切換時(shí)間為8秒、鼠標(biāo)滑過按鈕時(shí)切換
運(yùn)行效果截圖如下:
具體代碼如下
<head> <title>Jquery幻燈片焦點(diǎn)圖插件</title> <script src="js/jquery-1.4a2.min.js" type="text/javascript"></script> <script src="js/jquery.-1.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#KinSlideshow").KinSlideshow({ moveStyle:"down", intervalTime:8, mouseEvent:"mouseover", titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} }); }) </script> <style type="text/css"> .code{ height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;} .code pre{ font-family:"Courier New";font-size:14px;} .code pre code.note{ color:#999} .code2{border:1px solid #FEB0B0; background:#FFF1F1; margin-top:10px;} .code2 pre{ margin-left:20px; font-size:12px;} .info{ font-size:12px; color:#666666; font-family:Verdana; margin:20px 0 50px 0;} .info p{ margin:0; padding:0; line-height:22px; text-indent:40px;} h2.title{ margin:0; padding:0; margin-top:50px; font-size:18px; font-family:"微軟雅黑",Verdana;} h2.title span.titleInfo{ font-size:12px; color:#333; margin-left:10px;font-family:Verdana;} h3.title{ font-size:16px; font-family:"微軟雅黑",Verdana;} .importInfo{ font-family:Verdana; font-size:14px;} </style> </head> <body> <li><h3><a href="demo2.html">自定義切換參數(shù)效果</a></h3></li> </ol> <div id="KinSlideshow" style="visibility:hidden;"> <a target="_blank"><img src="images/11.png" alt="" width="600" height="300" /></a> <a target="_blank"><img src="images/23.png" alt="" width="600" height="300" /></a> <a target="_blank"><img src="images/22.png" alt="" width="600" height="300" /></a> <a target="_blank"><img src="images/5.jpg" alt="" width="600" height="300" /></a> <a target="_blank"><img src="images/4.jpg" alt="" width="600" height="300" /></a> </div> </body> </html>
希望本文所述對(duì)大家的Jquery特效設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕切換圖片
- 使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換
- 基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
- jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
- Jquery幻燈片特效代碼分享?鼠標(biāo)點(diǎn)擊按鈕時(shí)切換(1)
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
- jquery仿QQ商城帶左右按鈕控制焦點(diǎn)圖片切換滾動(dòng)效果
- jQuery實(shí)現(xiàn)簡單的按鈕顏色變化
相關(guān)文章
基于JQuery和CSS3實(shí)現(xiàn)仿Apple TV海報(bào)背景視覺差特效源碼分享
這是一款效果非常炫酷的jQuery和CSS3仿Apple TV海報(bào)背景視覺差特效。該視覺差特效在使用鼠標(biāo)在屏幕上下左右移動(dòng)的時(shí)候,海報(bào)中的各種元素以不同的速度運(yùn)動(dòng),形成視覺差效果,并且還帶有一些流光特效。2015-09-09jQuery插件FusionCharts實(shí)現(xiàn)的MSBar2D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的MSBar2D圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件結(jié)合xml數(shù)據(jù)載入實(shí)現(xiàn)繪制MSBar2D圖的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2017-03-03jQuery判斷多個(gè)input file 都不能為空的例子
這篇文章主要介紹了jQuery判斷多個(gè)input file 都不能為空的例子,即一次性判斷多個(gè)上傳文件選擇框不能為空的方法,需要的朋友可以參考下2015-06-06多種方法實(shí)現(xiàn)360瀏覽器下禁止自動(dòng)填寫用戶名密碼
這篇文章主要介紹了多種方法實(shí)現(xiàn)360瀏覽器下禁止自動(dòng)填寫用戶名密碼,需要的朋友可以參考下2014-06-06Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")
下面小編就為大家?guī)硪黄狫query循環(huán)截取字符串的方法(多出的字符串處理成"...")。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jQuery實(shí)現(xiàn)的簡單拖拽功能示例【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單拖拽功能,涉及jQuery基于事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)拖拽功能的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08