JQuery实现幻灯片上下滚动效果

Eddy 发布于2012-10-18 17:17:32 分类: 网站相关 已浏览loading 网友评论0条 我要评论

 原理就是设置外层position为relative,内层position为absolute,然后控制图片的top属性来实现上下滚动效果。

代码如下:


<!DOCTYPE html>
<head>
<script src="jquery/jquery-1.8.0.js"></script>
<script>
function showImg(index){   
        var adHeight = $(".ad").height();   
        $(".slider").stop(true,false).animate({top : -adHeight*index},500);   
        $(".num li").removeClass("on")   
            .eq(index).addClass("on");   
}

$(function(){
	var index=0;
	$(".num li").mouseover(function(){
		index = $(".num li").index(this);
		showImg(index);
	}) .eq(0).mouseover();
	
	$(".ad").hover(function(){
		clearInterval(adTimer);
	},function(){
		adTimer=setInterval(function(){
			showImg(index);
			index++;
			if(index==3){index=0;}
		},1000);
	}) .trigger("mouseleave");
});
</script>
<title>无标题文档</title>
<style>
ul,li{
list-style:none;
}
.num li{
float:left;
width:20px;
height:20px;
border:1px solid black;
margin-right:5px;
text-align:center;}
.on{
background:#99FFFF;
border:#FF0000;
}
.ad {
width:799px;    
height:151px;    
overflow:hidden;   
position:relative;   
}   
.slider, .num{   
position:absolute;   
}
.num{    
right:5px;    
bottom:5px;   
}
</style>
</head>
<body>
<div class="ad" >  
     <ul class="slider" >  
        <li><img src="image/1.jpg"/></li>  
        <li><img src="image/2.jpg"/></li>
	<li><img src="image/3.jpg"/></li>  
      </ul>  
      <ul class="num" >  
        <li>1</li>  
        <li>2</li>  
        <li>3</li>    
      </ul>  
</div> 
</body>
</html>

已经有(0)位网友发表了评论,你也评一评吧!
原创文章如转载,请注明:转载自Eddy Blog
原文地址:http://www.rrgod.com/webdesign/850.html     欢迎订阅Eddy Blog

关于 jQuery  幻灯  滚动  的相关文章

记住我的信息,下次不用再输入 欢迎给Eddy Blog留言