<!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>jquery实现可控方向图片的滚动</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;
}
.items li img{
width:150px;
height:150px;}
</style>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<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="../../include/jquery.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/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
</ul>
</div>
<input type="button" value="<<" id="prev"/>
<input type="button" value=">>" id="next" />
</body>
</html>