焦点图(轮播)
博客专区 > 0000001 的博客 > 博客详情
焦点图(轮播)
0000001 发表于3年前
焦点图(轮播)
  • 发表于 3年前
  • 阅读 264
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: slider

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

<div>

<a href=""><img src="" alt=""></a>

<a href=""><img src="" alt=""></a>

<a href=""><img src="" alt=""></a>

<a href=""><img src="" alt=""></a>

<a href=""><img src="" alt=""></a>

</div>

</div>

<script language="javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>

<script type="text/javascript">

// Banner 轮播

var t = n = 0, count; 

$(function(){

count=$(".slider_list a").length; 

$(".slider_list a:not(:first-child)").hide();  

$(".slider li").click(function() { 

var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4 

n = i; 

if (i >= count) return; 

$(".slider_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); 

$(this).siblings().removeClass("cur").end().addClass("cur");

}); 

t = setInterval("showAuto()", 3000); 

$(".slider").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);}); 

});

function showAuto() 

n = n >=(count - 1) ? 0 : ++n; 

$(".slider li").eq(n).trigger('click');

}; 

</script>

</body>

</html>



共有 人打赏支持
粉丝 36
博文 140
码字总数 46256
×
0000001
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: