图片滚动效果

原创 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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS控制图片滚动的效果

页面图片滚动效果

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

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

模拟false的图片滚动效果

  • 2013-03-27 16:39
  • 1.01MB
  • 下载

js实现图片平滑滚动效果

  • 2014-10-01 00:33
  • 106KB
  • 下载

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net var speed=30; var colee2=document.getEleme...

滚动播放文字或者图片信息效果

源码地址    package com.example.shifteffect; import com.app.plugs.effect.EffectUtil; import com.app.pl...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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