图片滚动效果

原创 2012年03月30日 21:31:09

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

页面图片滚动效果

  • 2015年06月29日 14:52
  • 5KB
  • 下载

模拟false的图片滚动效果

  • 2013年03月27日 16:39
  • 1.01MB
  • 下载

CSS 实现触屏【图片文字】左右滚动效果

实现一个css 来控制图片和文字的左右拖动的效果。具体的效果图 如下图所示:最开始的时候,产品给了我一张静态图片,让我按照这个来是实现页面。跟我说了一下说是可以播放滑动的。我以为是让我写一个轮播图。...

js实现图片平滑滚动效果

  • 2014年10月01日 00:33
  • 106KB
  • 下载

Flash唱片封面图片滚动效果

  • 2010年05月15日 12:36
  • 102KB
  • 下载

网页中文字及图片实现滚动效果

哈哈,我想说好东西怎么能不共享呢!实现网页

jQuery+CSS实现的图片滚动效果

  • 2013年03月18日 06:46
  • 36KB
  • 下载

vue实现图片滚动(类似走马灯效果)

上次写了一个简单的图片轮播,这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装。 父: ...

百度图片滚动浏览效果

  • 2009年11月17日 12:35
  • 1.06MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片滚动效果
举报原因:
原因补充:

(最多只允许输入30个字)