您的位置：首页 > Web前端 > JQuery

jquery实现动画效果

2012-03-30 19:31 585 查看

<!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 language="javascript" type="text/javascript" src="../include/jquery.js"></script>

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

$(document).ready(function(){

//alert($(".items>li").length);

//定义第几个图片移动

var i=1;

//设置延迟时间

var delay=1000; //越大越慢

var speed="slow";

var nowPage=1;

//每屏移动图片的个数

var pageSize=3;

var pages=Math.ceil($(".items>li").length/pageSize);

//设置方向的标志,当dir=true的时候向后移动

var dir=true;

//增加按钮的监听事件

$("#prev").click(function(){

Prev();

//获取第i个图片居左的距离

var left=$(".items > li").eq((nowPage-1)*pageSize).position().left;

//让ul产生动画，向左移动

$(".items").animate({left:-left},"swing").show("slow");

});

//点击了向右移动

$("#next").click(function(){

Next();

//获取第i个图片居左的距离

var left=$(".items > li").eq(nowPage*pageSize).position().left;

//alert(left);

//让ul产生动画，向左移动

$(".items").animate({left:-left},"swing").show("slow");

});

function goMove(location){

//获取第i个图片居左的距离

var left=$(".items > li").eq(location).position().left;

//让ul产生动画，向左移动

$(".items").animate({left:-left},"swing").show("slow");

}

//定义向后移动

function Next(){

if(nowPage==pages){

//当最后一屏不能再向后移动了

dir=false;

return;

}

//调用nove的方法

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();

}else{

Prev();

}

setTimeout(autoPlay,delay);

}

autoPlay();

});

</script>

<style>

#scroll{

position:relative;

background-color:#CCC;

padding:2px;

width:600px;

height:150px;

overflow:hidden;

}

.items{

position:absolute;

margin:0px 0px;

padding:0px 0px;

list-style-type:none;

width:9999em;}

.items li{

float:left;}

</style>

</head>

<body>

<div id="scroll">

<ul class="items">

<li><img src="00.jpg" width="150"></li>

<li><img src="11.jpg" width="150"></li>

<li><img src="22.jpg" width="150"></li>

<li><img src="00.jpg" width="150"></li>

<li><img src="11.jpg" width="150"></li>

<li><img src="22.jpg" width="150"></li>

<li><img src="00.jpg" width="150"></li>

<li><img src="11.jpg" width="150"></li>

<li><img src="22.jpg" width="150"></li>

<li><img src="00.jpg" width="150"></li>

<li><img src="11.jpg" width="150"></li>

<li><img src="22.jpg" width="150"></li>

</ul>

</div>

<input type="button" value="<<" id="prev">

<input type="button" value=">>" id="next">

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航