您的位置：首页 > Web前端 > JQuery

jquery简单焦点图

2013-12-24 15:14 351 查看

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="#" /><script type="text/javascript" src="../华为轮播图/jquery-1.8.3.js"></script><style tppe="text/css">
*{margin:0;padding:0;}
ul li{list-style:none;}
img{border:0;}
.fstL{width:980px;margin:100px auto; overflow:hidden}
.flash{position:relative;width:980px;height:320px;overflow:hidden;}
.slider{position:relative;}
.slider li{float:left;position:absolute;left:0;top:0;}
.num{position:absolute;right:40px;bottom:20px;cursor:pointer;}
.num li{float:left;border-radius:50%;background:#06F;margin-left:10px;text-align:center;font:600 14px/24px Arial, Helvetica,sans-serif;color:#fff;height:24px;width:24px;}
.num li.on{background:#c00;}
</style><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">
//焦点图
$(function() {
var index = 0,len = $(".num >li").length,timer;
$(".num li").mouseover(function() {
index = $('.num li').index(this);
showImg(index);
}).eq(0).mouseover();
$('.flash').hover(function() {
clearInterval(timer);
},function() {
timer = setInterval(function() {
showImg(index)
index++;
if(index == len){index = 0;}
},3000);
}).trigger("mouseleave");
});
function showImg(index) {
//$('.slider').stop(true,false).animate({left:-adWidth*index},800);
$('.slider li').eq(index).stop(true,false).fadeIn(200).siblings().stop(true,false).fadeOut(200);
$('.num li').removeClass('on').eq(index).addClass('on');
}
</script></head><body>
<div class="fstL">

<div class="flash" id="flash">
<ul class="slider">
<li><a href="#"><img src="banner_1.jpg" width="980" height="320"></a></li>
<li><a href="#"><img src="banner_2.jpg" width="980" height="320"></a></li>
<li><a href="#"><img src="banner_3.jpg" width="980" height="320"></a></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航