jquery实现可控方向的图片滚动效果

最新推荐文章于 2024-07-30 22:36:34 发布

置顶 zhaoxinglei0309

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量1.5k

点赞数 1

文章标签： jquery function javascript button delay swing

本文链接：https://blog.csdn.net/zhaoxinglei0309/article/details/7412875

版权

<!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;
	background-color:#CCC;
	padding:2px;
	width:600px;
	height:150px;
	overflow:hidden;
	}
	
.items{
	
	margin:0px 0px;
	padding:0px 0px;
	list-style-type:none;
	position:absolute;
	width:9999em;
	}

.items li{
	float:left;
	}

</style>
<script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>


<script language="javascript" type="text/javascript">

  
  $(document).ready(function (){
  //设置延迟时间
  var delay=3000;//越大越慢
  //设定速度
  var speed="slow";  //fast 快，normal 中
  //每屏移动的图片的
  var pageSize=3;
  
  
  //定义第几个图片移动
  var i=1;
  //设置当前屏
  var nowPage=1;
  //总屏数
  var pages=Math.ceil($(".items>li").length/pageSize);
  //设置方向的标志  并且约定，当dir=true的时候，向后滚动
  var dir=true;
  
  //增加按钮的监听事件
  $("#prev").click(function (){
		
	//调用向前滚动
	Prev();
	
	});
	  
	  
	//点击了向右移动
  $("#next").click(function (){ 

     //调用向后滚动的方法
     Next();
			
  });
	  

	  
  function goMove(location){

		   //获取第i个图片距左的距离
  var left=$(".items > li").eq(location).position().left;

  //让ul产生动画，向左移动
  $(".items").animate({left:-left},"swing").show(speed);
		  
	}
	
	
	//定义向后移动的方法
   function Next(){
	   
	    //判断是否到最后一屏
	  if(nowPage==pages){
		  //当最后一屏时，不能在向后移动了
		  dir=false;
		  return ;  
	  }	   
	 
		//调用move的方法
		goMove(nowPage*pageSize);
		i--;
		//当前屏++
		nowPage++;
   
	
	}
	
	
	//定义向前移动的方法
	function Prev(){
		
		//判断是否是第一屏  
		if(nowPage==1){
		   dir=true;
		   return ;
		  }
		 //当前页--
		 nowPage--;
		 
		 //调用移动的方法
		 goMove((nowPage-1)*pageSize);
		 
		 i++;
	}
	
	
	//定时自动执行
	function autoPlay(){
		
		//我们可以根据dir的状态值，判断是向前还是向后滚动
		if(dir){
			//如果dir=true，表明还没有到最后一屏，所以可以执行Next();
		    Next();	
		}else{
			
		    Prev();
		
		}
		
		setTimeout(autoPlay,delay);
		
	}
	
    autoPlay();
  
  });

  

</script>
</head>

<body>
<div class="scroll">
   <ul class="items">
     <li><img src="images/fj.jpg" width="150" /></li>
     <li><img src="images/111.gif" width="150" /></li>
     <li><img src="images/222.gif" width="150" /></li>
     <li><img src="images/fj.jpg" width="150" /></li>
     <li><img src="images/111.gif" width="150" /></li>
     <li><img src="images/222.gif" width="150" /></li>
     <li><img src="images/fj.jpg" width="150" /></li>
     <li><img src="images/111.gif" width="150" /></li>
     <li><img src="images/222.gif" width="150" /></li>
     <li><img src="images/fj.jpg" width="150" /></li>
     <li><img src="images/111.gif" width="150" /></li>
     
   </ul>
</div>
<input type="button" value="<<" id="prev"/>

<input type="button" value=">>" id="next" />
</body>
</html>

效果图如下

zhaoxinglei0309

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现可控方向的图片滚动效果

可控方向的图片滚动效果.scroll{ position:relative; background-color:#CCC; padding:2px; width:600px; height:150px; overflow:hidden; } .items{ margin:0px 0px; padding:0px 0px; list-st
复制链接

扫一扫