jquery-animate-imagescroll 图片滚动

最新推荐文章于 2024-04-19 01:15:59 发布

齐雪松

最新推荐文章于 2024-04-19 01:15:59 发布

阅读量2.3k

点赞数 2

文章标签： function button delay swing xhtml class

本文链接：https://blog.csdn.net/qxs101307204/article/details/7413325

版权

<!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>
<script src="../../jquery/jquery-1.7.1.js"></script>
<style>
img {
	width:200px;
	height:200px;
	}
.scroll{
	position:relative;
	width:800px;
	background-color:#0C3;
	padding:2px;
	height:200px;
	overflow:hidden;
	}
.item{
	position:absolute;
	margin:0px 0px;
	padding:0px 0px;
	list-style-type:none;
	width:9999em;}
.item li{
	float:left;}
</style>
<script>
$(document).ready(function (){
	//设定速度
var speed='slow';
//设置延迟时间
var delay=2000; //值越大越慢
//定义坐标，第几个图片可以移动
var i=1;
//设置当前屏
var nowPage=1;
//每屏移动的个数
var pageSize=3;
//总屏数
var pages=Math.ceil($('.item>li').length/pageSize);
//设置方向的标志 并且约定 当dir=true时,向后滚动
var dir=true;

//增加按钮的监听事件
$('#prev').click(function (){
//调用向前移动的
Prev();
	
	});
	
//点击向右移动
//增加按钮的监听事件
$('#next').click(function (){
//调用方法
Next();
	 });
	
	function goMove(location){
	//获取第i个元素居左的距离
var left=$('.item > li').eq(location).position().left;	
//让所有的ul产生动画 向左移动
$('.item').animate({left:-left},'swing').show('slow');
		}
		
	//定义向后移动的方法
	function Next(){
			//判断是否到最后一屏
	if(nowPage==pages){
		//当最后一屏时，不能在向后移动了
		dir=false;
		return ;
		}
	 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="item">
<li><img src="../../images/S1054963.JPG"></li>
<li><img src="../../images/S1054964.JPG"></li>
<li><img src="../../images/S1054965.JPG"></li>
<li><img src="../../images/S1054966.JPG"></li>
<li><img src="../../images/S1054967.JPG"></li>
<li><img src="../../images/S1054968.JPG"></li>
<li><img src="../../images/S1054969.JPG"></li>
<li><img src="../../images/S1054970.JPG"></li>
<li><img src="../../images/S1054971.JPG"></li>
<li><img src="../../images/S1054972.JPG"></li>
<li><img src="../../images/S1054973.JPG"></li>
<li><img src="../../images/S1054974.JPG"></li>
<li><img src="../../images/S1054975.JPG"></li>
<li><img src="../../images/S1054976.JPG"></li>
<li><img src="../../images/S1054970.JPG"></li>
<li><img src="../../images/S1054971.JPG"></li>
<li><img src="../../images/S1054972.JPG"></li>
</ul>
</div>
<input type="button" id="prev" value="向左移动">
<input type="button" id="next" value="向右移动">
</body>
</html>

齐雪松

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-animate-imagescroll 图片滚动

可控方向的图片滚动效果img { width:200px; height:200px; }.scroll{ position:relative; width:800px; background-color:#0C3; padding:2px; height:200px; overflow:hidden; }.item{ positio
复制链接

扫一扫