當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery 幻灯片图像切换效果

發布時間：2025/4/14 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery 幻灯片图像切换效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

圖圖：

碼碼：

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery幻燈片插件SkitterSlideshow </title> <link rel="stylesheet" type="text/css" href="css/default.css"> <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" /> <style type="text/css">#page { margin: 0 auto; width: 600px; height:450px;background: #fff; margin-top: 20px; margin-bottom: 20px; border: 1px solid #777; box-shadow: #999 1px 1px 3px; } </style> </head> <body> <div class="htmleaf-container"><div id="page"><div id="content"><div class="border_box"><div class="box_skitter box_skitter_large"><ul><li><a href=""><img src="images/example/tutu1.jpg" class="circles" /></a><div class="label_text"><p>小褐兔子</p></div></li><li><a href=""><img src="images/example/tutu2.jpg" class="circlesInside" /></a><div class="label_text"><p>貓貓抱兔兔</p></div></li><li><a href=""><img src="images/example/tutu3.jpg" class="circlesRotate" /></a><div class="label_text"><p>小兔兔睡覺覺</p></div></li><li><a href=""><img src="images/example/tutu4.jpg" class="cubeShow" /></a><div class="label_text"><p>小黃兔子</p></div></li> </ul></div></div></div></div> </div><script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.skitter.min.js"></script> <script type="text/javascript">$(document).ready(function() {$('.box_skitter_large').skitter({theme: 'default',dots: true, preview: true,numbers_align: 'center'});}); </script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
代碼說明：

定義div，id為page
在其中定義div，id為content
在其中定義div，css類為border_box
在其中定義div，css類為box_skitter box_skitter_large
在其中定義ul li列表，
在li中包含a鏈接，可指向自己需要跳轉到的鏈接；
在a鏈接中包含img元素，img的src為需要展示的圖片，li中包含一個p元素，定義了圖片對應的說明文字；
img的css類定義了圖片切換的幻燈方式；

引入jquery，jquery.easing.1.3.js，jquery.skitter.min.js

在文檔加載完成執行 box_skitter_large類的skitter函數，設置主題為默認、顯示圓點、可預覽；

#page { margin: 0 auto; width: 600px; height:450px;background: #fff; ?margin-top: 20px; margin-bottom: 20px; border: 1px solid #777; box-shadow: #999 1px?

1px 3px; }
定義了：
上下外邊距為0，右左外邊距為自動;這樣整個幻燈片將會居中；
寬度，高度，背景色；
邊框：1px寬，實線，背景色為16進制777；
box-shadow定義了一個邊框陰影；

說明：資源為網上下載；本文圖片所示代碼，（兔兔），由鄙人實現；代碼說明為鄙人所寫；

下載：

http://pan.baidu.com/s/1pJtGHZl

總結

以上是生活随笔為你收集整理的jquery 幻灯片图像切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。