jquery 幻燈片效果
阿新 • • 發佈:2017-11-12
remove display inline -1 function val line hide hidden
對jquery沒有深入研究過,只是怎麽簡單怎麽來,符合自己的需求即可。以下是代碼。
使用的是ThinkPHP框架,圖片等是循環出來的,下面是模板中的代碼:
<div id="rotation"> <volist name="banner" id="vo"> <div mid="{$i}"> <a href=""><img alt="" src="__PUBLIC__/images/post{$i}.jpg"></a> <span>{$vo.title}</span> </div>
</volist>
<ul id="banner-button"> <volist name="banner" id="vo"> <li mid="{$i}">·</li> </volist> </ul>
</div>
在HTML中是這樣:
<div id="rotation"> <div mid="1"> <a href=""><imgalt="" src="/images/post1.jpg"></a> <span>標題</span> </div> <div mid="2"> <a href=""><img alt="" src="/images/post2.jpg"></a> <span>標題</span> </div> <div mid="3"> <a href=""><imgalt="" src="/images/post3.jpg"></a> <span>標題</span> </div> <div mid="4"> <a href=""><img alt="" src="/images/post4.jpg"></a> <span>標題</span> </div> <ul id="banner-button"> <li mid="1">·</li> // 這些是點擊按鈕切換到對應數字的圖片 <li mid="2">·</li> <li mid="3">·</li> <li mid="4">·</li> </ul> </div>
CSS代碼:
#rotation { width: 669px; padding: 10px 10px 0 10px; border: 1px solid #ccc; margin-bottom: 3em; box-shadow: 5px 5px 5px #ccc; background: #fff; position: relative; } #rotation a { height: 309px; overflow: hidden; display: inline-block; } #rotation img { width: 100%; height: 100%; } #rotation span { padding: 10px 0; padding-left: 15px; font-size: 18px; margin: 0; color: #666; cursor: default; display: inline-block; } span#tip2, span#tip3 { display: none; } #img2, #img3 { display: none; } #rotation ul { display: inline-block; cursor: default; position: absolute; bottom: 0; right: 10px; } #rotation ul li { display: inline; color: #666; font-size: 3em; line-height: 38px; cursor: pointer; } #rotation ul li.active { color: #bbb; }
jquery代碼:
var t = button_id = 0, count; $(document).ready(function(){ $(‘#rotation div:not(:first)‘).hide(); // 隱藏除了第一個的其他圖片 $(‘#rotation ul li:first‘).addClass(‘active‘); // 給按鈕加上樣式 count = $(‘#rotation div‘).length; // 計算總數 $(‘#banner-button li‘).click(function(){ button_id = $(this).attr(‘mid‘)-1; // 點擊的是第幾個按鈕 if ($(‘#rotation div:visible‘).attr(‘mid‘) != button_id+1){ // 排除正在展示的圖片按鈕被點擊 $(‘#rotation div‘).filter(":visible").hide().parent().children().eq(button_id).fadeIn(1000); // 隱藏可見的div並顯示對應的div $(this).toggleClass("active"); // 給按鈕增加樣式 $(this).siblings().removeAttr("class"); // 移除之前的樣式 } });
t = setInterval("show_bann()", 4000); // 自動執行
$(‘#rotation‘).hover(function(){
clearInterval(t);
},function(){
t = setInterval("show_bann()", 4000);
});
}); function show_bann() { button_id = button_id >=(count -1) ?0 : ++button_id; $("#banner-button li").eq(button_id).trigger(‘click‘); }
下面是完成後的樣子,圖片和字每4秒更換,如果鼠標放在上面會取消計時函數,移走後重新計時。
jquery 幻燈片效果