分享一款简单的淡入淡出带标题的焦点图轮播。
HTML
<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="images/p1.jpg" title="素材火1" alt="素材火1"/></a>
<a href="#" target="_blank"><img src="images/p2.jpg" title="素材火2" alt="素材火2"/></a>
<a href="#" target="_blank"><img src="images/p3.jpg" title="素材火3" alt="素材火3"/></a>
<a href="#" target="_blank"><img src="images/p1.jpg" title="素材火4" alt="素材火4"/></a>
</div>
</div>
jQuery
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,4
n = 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');
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791