【原理簡述】
這里大概說一下整個流程：
1，將除了第一張以外的圖片全部隱藏，
2，獲取第一張圖片的alt信息顯示在信息欄，并添加點擊事件
3，為4個按鈕添加點擊偵聽，點擊相應的按鈕，用fadeOut，fadeIn方法顯示圖片
4，設置setInterval，定時執行切換函數
【代碼說明】
filter(":visible") :獲取所有可見的元素
unbind()：從匹配的元素中刪除綁定的事件
siblings：取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合
例：找到每個div的所有同輩元素中帶有類名為selected的元素。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
執行 $("div").siblings()，結果
[ <p>Hello</p>, <p>And Again</p> ]
【程序源碼】
HTML部分：
<body><div id="banner"> <div id="banner_bg"></div><!--標題背景--><div id="banner_info"></div><!--標題--><ul><li class="on">1</li><li>2</li><li>3</li><li>4</li></ul><div id="banner_list"><a href="#" target="_blank"><img src="imgs/p1.jpg" title="橡樹小屋的blog" alt="橡樹小屋的blog"/></a><a href="#" target="_blank"><img src="imgs/p5.jpg" title="橡樹小屋的blog" alt="橡樹小屋的blog"/></a><a href="#" target="_blank"><img src="imgs/p3.jpg" title="橡樹小屋的blog" alt="橡樹小屋的blog"/></a><a href="#" target="_blank"><img src="imgs/p4.jpg" title="橡樹小屋的blog" alt="橡樹小屋的blog"/></a></div></div></body>
CSS部分：
<style type="text/css">#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}#banner_list img {border:0px;}#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; width:478px;}#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;margin:0; padding:0; bottom:3px; right:5px;}#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}#banner ul li.on { background:#900}#banner_list a{position:absolute;} <!-- 讓四張圖片都可以重疊在一起--></style>JS部分:
<script type="text/javascript">var t = n =0, count;$(document).ready(function(){ count=$("#banner_list a").length;$("#banner_list a:not(:first-child)").hide();$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));$("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});$("#banner li").click(function() {var i = $(this).text() -1;//獲取Li元素內的值，即1，2，3，4n = i;if (i >= count) return;$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);document.getElementById("banner").style.background="";$(this).toggleClass("on");$(this).siblings().removeAttr("class");});t = setInterval("showAuto()", 4000);$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});})function showAuto(){n = n >=(count -1) ?0 : ++n;$("#banner li").eq(n).trigger('click');}</script>以上就是JQuery實現圖片輪播的全部思路過程，希望對大家的學習有所幫助。
新聞熱點
疑難解答
