垂直无缝滚动

最新推荐文章于 2024-06-11 17:26:16 发布

iteye_6992

最新推荐文章于 2024-06-11 17:26:16 发布

阅读量115

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#outDiv{
width:790px;
height:240px;
margin-left:10px;
margin-top:10px;
border:1px solid #000;
position:relative;
overflow:hidden;
}
.imgs{
position:absolute;
top:0;
left:0;
}
.imgs img{
border:none;
float:left;
}
.num{
position:absolute;
bottom:0px;
height:30px;
}
.num li{
width:158px;
height:30px;
background-color:#666;
float:left;
line-height:30px;
color:#fff;
}
.num .active{
background-color:#900;
}
</style>
</head>

<body>
<div id="outDiv">
<ul class="imgs">
     <li><img src="img_1.jpg" /></li>
<li><img src="img_2.jpg" /></li>
<li><img src="img_3.jpg" /></li>
<li><img src="img_4.jpg" /></li>
<li><img src="img_5.jpg" /></li>
</ul>
<ul class="num">
     <li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
/*
* 垂直无缝滚动；
* ie8，ff，opera中兼容，其余浏览器未测；
* *****made by keimon*****
* ********2013-01-11********
*/
$(function(){
   $('.imgs').html($('.imgs').html()+$('.imgs').html());
   var outHeight = $('#outDiv').height();
   var len = $('.num li').length;
   var timer
   var j=0;
   //自动滚动
   function scroll(i){
      if(i==5){
      $('.imgs').css('top','0');
   i=0;
   }
      $('.imgs').animate({'top':'-='+outHeight+'px'},'slow');
   $('.num li').removeClass('active')
               .eq(i).addClass('active');
   timer = setTimeout(function(){
      scroll(i);
   },3000)
   i++;
   }
   scroll(j);
   //鼠标移入，移出num时
   for(var i=0; i<len; i++){
      $('.num li').eq(i).hover(function(){
      var itemLi = this;
   var index = $('.num li').index(itemLi);
      clearTimeout(timer);
      $('.num li').removeClass('active')
               .eq(index).addClass('active');
   $('.imgs').animate({'top':-outHeight*index+'px'},'fast');
   },function(){
      var itemLi = this;
   var index = $('.num li').index(itemLi);
      timer = setTimeout(function(){
      scroll(index+1);
   },3000)
   })
   }
})
</script>
</body>
</html>

iteye_6992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
垂直无缝滚动

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;me
复制链接

扫一扫

专栏目录