<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
#container{
width: 600px;
height: 400px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#list{
width: 4200px;
height: 400px;
position: absolute;
}
#list img{
float: left;
}
#pointDiv{
position: absolute;
bottom: 20px;
width: 80px;
left: 260px;
}
#pointDiv span{
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
border:1px solid #fff;
float: left;
margin-right: 5px;
}
#pointDiv .on{
background: orangered;
}
#pointDiv span:last-child{
margin-right: 0;
}
.arrow{
position: absolute;
cursor: pointer;
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 32px;
background: rgba(0,0,0,0.3);
top: 180px;
}
.arrow:hover{
background: rgba(0,0,0,0.7);
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
#container:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
<div id="pointDiv">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script src="js/jquery.1.10.2.js"></script>
<script>
$(function(){
/*
* 功能说明
* 1.点击向左向右图片 图片滑动
* 2.无限循环切换,第一页的上一页为最后页 最后一页的下一页为第一页
* 3.每隔多久图片自动滑动下一页
* 4.当鼠标移动图片区域时候 自动切换停止 鼠标离开 自动切换开启
* 5.切换页面 圆点更新
* 6.点击圆点切换到对应页
* */
var $container = $('#container');
var $list = $('#list');
var $points = $('#pointDiv span');
var $prev = $('#prev');
var $next = $('#next');
var imgCount = $points.length;
var index = 0;
var PAGE_WIDTH = 600;
var TIME = 400;//翻页持续时间
var TIME_TIME = 20;//单元移动的持续时间
var moving = false;//标识是否正在翻页
// 1.点击向左向右图片 图片滑动
$next.click(function(){
nextPage(true);
})
$prev.click(function(){
nextPage(false);
})
// 2.无限循环切换,第一页的上一页为最后页 最后一页的下一页为第一页
var intervalId = setInterval(function(){
nextPage(true);
},3000)
// 4.当鼠标移动图片区域时候 自动切换停止 鼠标离开 自动切换开启
$('#container').hover(function(){
clearInterval(intervalId)
},function(){
intervalId = setInterval(function(){
nextPage(true);
},3000)
})
// 6.点击圆点切换到对应页
$points.click(function(){
var targetIndex = $(this).index();
if(targetIndex != index){
nextPage(targetIndex);
}
})
function nextPage(next){
if(moving){
return;
}
moving = true;//标识正在翻页
//总的偏移量
var offset = 0;
if(typeof next == 'boolean'){
offset = next ? -PAGE_WIDTH : PAGE_WIDTH;
}else{
offset = -(next-index) * PAGE_WIDTH;
}
//单元移动的偏移量 总的偏移量 / 一共的单元
var itemOffset = offset/(TIME/TIME_TIME);
//获取当前left的值
var currLeft = $list.position().left;
//目标处的值
var targetLeft = currLeft + offset;
console.log(targetLeft);
/*
* next为正 右移 left变小 速度为负 目标位置小于当前位置
* left 0(-3000) -600 -1200 -1800 -2400 -3000 -3600(-600)
*
* next为负 左移 left变大 速度为正 目标位置大于当前位置
* */
//启动定时器用来不断更新list的left值 到达目的地 定时器就要停止
var intervalId = setInterval(function(){
currLeft += itemOffset;
if(currLeft == targetLeft){
clearInterval(intervalId);
//标识翻页停止
moving = false;
//如果到达了最右边的图片1.jpg,瞬间定位到第二张的1.jpg
if(currLeft == -(imgCount + 1)* PAGE_WIDTH){
currLeft = -PAGE_WIDTH;
//如果到达了最左边的图片5.jpg,瞬间定位到倒数第二张的5.jpg
}else if(currLeft == 0){
currLeft = -imgCount * PAGE_WIDTH;
}
}
$list.css('left',currLeft);
},TIME_TIME)
/*
* index 0 ---- 6 1----5
* targetIndex 0 --- 4
* */
updatePoints(next);
}
function updatePoints(next){
var targetIndex = 0;
if(typeof next == 'boolean'){
if(next){
targetIndex = index + 1;
if(targetIndex == imgCount){
targetIndex = 0;
}
}else{
targetIndex = index -1;
if(targetIndex == -1){
targetIndex = imgCount - 1;
}
}
}else{
targetIndex = next;
}
//将当前index的span class移除
$points[index].className = '';
//给目标圆点添加
$points[targetIndex].className = 'on';
//更新index的值
index = targetIndex;
}
})
</script>
</body>
</html>
jQuery轮播
最新推荐文章于 2022-11-21 20:33:59 发布