描述：

讓圖片按分頁的形式顯示，點擊那一頁。就顯示哪副圖片，應該就是幻燈片的效果了。

思路：

1，一副幻燈片的效果，有頁碼區域和圖片區域。

2，頁碼區域如何實現，頁碼的阿拉伯數字哪里來？圖片區域圖片是要重合疊加的，當頁面剛加載完的時候，首先顯示的是第一張圖片，其他不顯示。

3，點擊頁碼，圖片區域要顯示相應的圖片，如何實現？

4，我該采取哪種頁碼區域和圖片區域的代碼的組合方式？

此時腦里有了一種組合方式：

我覺得讓頁碼區域直接用HTML寫上，看著不舒服，此刻我就決定用讓JS來實現頁碼區域，HTML只實現圖片區域。頁碼區域干脆就顯示在圖片區域左上方。管它合理不合理，先寫了再說。

HTML:

<!--ID為images就是包含頁碼區域和圖片區域的盒子--><div id="images"><a href="#"><img src="images1.jpg" alt=""/></a><a href="#"><img src="images2.jpg" alt=""/></a><a href="#"><img src="images3.jpg" alt=""/></a><a href="#"><img src="images4.jpg" alt=""/></a><a href="#"><img src="images5.jpg" alt=""/></a></div>

CSS:

?

#images{/*因為頁碼有margin等邊距，寬高可以自行設置差不多就可以了*/width: 155px;height: 170px;/*用360browser刷新頁面會出現閃一下出現其他的頁面,故超出了就隱藏，就不會閃一下出現其他頁面了*/overflow: hidden;/*為了讓圖片以images的左上角為基點*/position: relative;}img{width:150px;height: 150px;border: 0px;} /*jquery代碼里添加的頁碼類*/.page{/*為頁碼增加點間距*/margin: 5px;}.hover{cursor: pointer;color: blue;background-color: cyan;}

?

Jquery：

?

// a圖片鏈接對象的集合（數組）var $img_obj = $('#images a'); // a圖片鏈接的個數var img_obj_num = $img_obj.length; // 第一張圖片鏈接對象var first_img = $img_obj.eq(0); // 頁面剛加載完成時，隱藏所有圖片連接，再只顯示第一張圖片鏈接 $img_obj.hide();first_img.show();// 讓所有的a連接對象絕對定位，并且距左5px，因為稍后頁碼需要5px的間距$img_obj.css({'position':'absolute','left':5}); // 頁面區域的盒子對象var page_div = $('<div id="pages"></div>'); // 把頁面區域插入到第一個a圖片鏈接的前面，因為是div，獨占一行，于是默認頁碼會在左上角 page_div.insertBefore(first_img); // 循環把頁碼添加到頁碼區域，并未每個頁面添加一個page類for(var i=1;i<=img_obj_num;i++){// alert(i);$('<span class="page">'+i+'</span>').appendTo('div#pages');} // 鼠標劃入劃出頁碼，頁碼的效果 $('.page').hover(function(){$(this).addClass('hover');}, function(){$(this).removeClass('hover');}); // 點擊頁碼時a圖片鏈接的切換$('.page').click(function(){ // 當點擊時，首先隱藏所有，然后顯示當前頁碼的a圖片鏈接 $img_obj.hide(); // 獲取當前的頁碼值page_num = $(this).text(); // 當前頁碼減1等于索引值need_to_show_img = $img_obj.eq(page_num-1); // 顯示當前索引值的圖片鏈接 need_to_show_img.show();});

?

截圖（點擊相應的頁碼：）：

?

?

?

?

轉載于:https://www.cnblogs.com/wenzichiqingwa/archive/2012/11/23/2784198.html

總結

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

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