<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}
.outer{width:800px; height:400px; overflow:hidden; margin:0 auto;}
.inner{width:3200px; height:400px; position:relative;}
.inner ul{ position:absolute; left:0; top: 0;}
.inner ul li{ float:left;}
.inner ul li img{ width:800px; height:400px;}
.prePage{ width:50px; height:100px; line-height:100px; display:block; margin-top:-50px; font-size:40px; text-align:center; background:rgba(200,200,200,0.5); position:absolute; left: 0;top: 50%;}
.nextPage{width:50px; height:100px; line-height:100px; display:block; margin-top:-50px; font-size:40px; text-align:center; background:rgba(200,200,200,0.5); position:absolute; left:750px;top: 50%;}
</style>
<script src="jquery-2.2.2.min.js"></script>
<script>
$(function(){
var page = 1;
var flag = true;
var time1 = null;
//调用一个轮播运动
time1 = setInterval(function(){
page++;
if(page>5)
{
page = 2;
}
changePage(page);
}, 2000)
//鼠标放上去的时候 停止计时器
$(".outer").mouseover(function(){
clearInterval(time1);
})
//鼠标离开的时候 调用计时器
$(".outer").mouseout(function(){
time1 = setInterval(function(){
page++;
if(page>5)
{
page = 2;
}
changePage(page);
}, 3000)
})
//点击上一页
$(".prePage").click(function(){
if(flag){
page--;
if(page < 1)
{
page = 4;
}
changePage(page);
}
})
//点击下一页
$(".nextPage").click(function(){
if(flag){//这里flag为ture
page++;
if(page>5)
{
page = 2;
}
flag = false; //点击一次page变化 运动一次后将flag关闭 false
changePage(page);//运动完之后 又将false变为true 当再次点击的时候又进入循环
}
})
//运动函数
function changePage(page){
var num1 =page * (-800);
if(num1 <= -4000)
{
num1 = -800;
}
$(".inner > ul").animate({"left":num1},2000)
flag = true;//运动完之后打开 这样不会导致在图片还没有完成一次运动过程的时候就被下一次的点击切换到另一张图片了，在还没有完成一次运动过程的时候是点击切换不了的
}
})
</script>
</head>
<body>
<div class="outer">
<div class="inner">
<ul style = "left:-800px">
<li><img src="img/292326.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292323.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292325.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292326.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li>
</ul>
<span class="prePage"><</span>
<span class="nextPage">></span>
</div>
</div>
</body>
</html>
