jquery简单焦点图

最新推荐文章于 2024-08-11 18:40:36 发布

abcd473530061

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量65

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/lglijing/p/3489098.html

版权

!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>

转载于:https://www.cnblogs.com/lglijing/p/3489098.html

abcd473530061

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery简单焦点图

!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 ht...
复制链接

扫一扫