本文實例講述了jQuery圖片輪播滾動切換特效。分享給大家供大家參考。具體如下:
jQuery圖片輪播滾動切換代碼是一款簡單的jquery四張圖片輪播滾動切換效果代碼,實現過程很簡單。
運行效果圖:-------------------查看效果 下載源碼-------------------
小提示:瀏覽器中如果不能正常運行,可以嘗試切換瀏覽模式。
在head區域引入CSS樣式:
<link rel="stylesheet" type="text/css" href="css/style.css" />
為大家分享的jQuery圖片輪播滾動切換代碼如下
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery圖片輪播滾動切換代碼</title><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript" src="js/script.js"></script><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="Div1"> <b class="Div1_prev Div1_prev1" ><img src="images/lizi_img011.jpg" title="上一頁" /></b> <b class="Div1_next Div1_next1" ><img src="images/lizi_img012.jpg" title="下一頁"/></b> <div class="Div1_main"> <div> <span class="Div1_main_span1"> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> </div> <div> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> </div> <div> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> <span> <a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a> <a href="javascript:void(0)" class="Div1_main_a2">+詳情點擊</a> </span> </div> </div></div></body></html>
以上就是為大家分享的jQuery圖片輪播滾動切換特效代碼,希望大家可以喜歡,并應用到實踐中。
新聞熱點
疑難解答