图片滚动效果

<!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>
<style>
.scroll{
 position:relative;
 width:600px;
 background-color:#CCC;
 padding:2px;
 height:160px;
 overflow:hidden;
 }
.items{
 position:absolute;
 margin:0px 0px;
 padding:0px 0px;
 list-style-type:none;
 width:9999em;
 }
.items li{
 float:left;
 }
</style>
<script language="javascript" type="text/ecmascript"  src="../include/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
 //定义第几个图片移动
 var i=1;
 var nowPage=1;
 var pageSize=3;
 var pages=Math.ceil($(".items>li").length/pageSize);
 
 //增加按钮的监听事件
 $("#prev").click(function(){
  if(nowPage==1){
   return;
   }
  nowPage--;
 //获取第i个图片居左的距离
 var left=$(".items>li").eq((nowPage-1)*pageSize).position().left;
 //alert(left);
 //让ul产生动画,向左移动
 $(".items").animate({left:-left},"swing").show("show");
          i++;
  
 });
 
 //增加向右移动听事件
 $("#next").click(function(){
  if(nowPage==pages){
   return;
   }
  
 //获取第i个图片居左的距离
 var left=$(".items>li").eq(nowPage*pageSize).position().left;
 //alert(left);
 //让ul产生动画,向左移动
 $(".items").animate({left:-left},"swing").show("show");
          i--;
     nowPage++;
 });
  
});
</script>
</head>

<body>
<div class="scroll">
     <ul class="items">
     <li><img src="images/3.jpg"  width="150" height="150"></li>
     <li><img src="images/11.jpg" width="150" height="150"></li>
     <li><img src="images/22.jpg" width="150" height="150"></li>
     <li><img src="images/3.jpg" width="150" height="150"></li>
     <li><img src="images/11.jpg" width="150" height="150"></li>
     <li><img src="images/22.jpg" width="150" height="150"></li>
     <li><img src="images/3.jpg" width="150" height="150"></li>
     <li><img src="images/11.jpg" width="150" height="150"></li>
     <li><img src="images/22.jpg" width="150" height="150"></li>
     <li><img src="images/3.jpg" width="150" height="150"></li>
     <li><img src="images/11.jpg" width="150" height="150"></li>
     </ul>
</div>
<input id="prev" type="button" value="<<">
<input id="next" type="button" value=">>">

</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

flash 图片滚动效果 源文件

2011年03月18日 160KB 下载

js图片左右滚动效果

2009年07月28日 2KB 下载

jQuery图片滚动效果 前台技术

2009年08月03日 1.15MB 下载

图片滚动效果图片滚动效果

2010年09月18日 10KB 下载

仿六间房(6.cn)图片滚动效果

2009年02月27日 20KB 下载

Zen cart bestsellers图片滚动效果

2011年08月29日 26KB 下载

没有更多推荐了,返回首页

不良信息举报

图片滚动效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭