<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.list {
width: 560px;
height: 300px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.list img {
width: 560px;
position: absolute;
height: 300px;
left: 560px;
}
.prev,
.next {
position: absolute;
top: 50%;
left: 0;
width: 30px;
height: 35px;
margin-top: -25px;
color: white;
background-color: rgba(0, 0, 0, 0.4);
font-size: 30px;
text-align: center;
line-height: 30px;
}
.prev {
left: 0;
}
.next {
left: 530px;
}
.btns {
position: absolute;
left: 0;
right: 0;
bottom: 30px;
text-align: center;
}
.btns span {
padding: 5px;
font-size: 0;
margin: 0 5px;
background-color: white;
border-radius: 50%;
}
.btns .choose {
background-color: red;
}
</style>
</head>
<body>
<div class="list">
<img src="/lianxi/专项练习/图片/1.jpg" alt="0">
<img src="/lianxi/专项练习/图片/3.jpg" alt="1">
<img src="/lianxi/专项练习/图片/4.jpg" alt="2">
<img src="/lianxi/专项练习/图片/5.jpg" alt="3">
<img src="/lianxi/专项练习/图片/6.jpg" alt="4">
<div class="btns">
<span class="choose"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="prev"><</div>
<div class="next">></div>
</div>
<script src="/lianxi/专项练习/06.1jQ手风琴等小动画/jQuery/jquery01.js"></script>
<script>
//jo级思路，一共三张图，
// 1，顺序自动轮播时：把要轮的图直接插在右侧，然后整个舞台向左移
// 2，反方向点击轮播时，插在左侧，舞台向右移动
//维护当前显示图片的索引值
var $img = $('.list img');
var $btns = $('.btns span');
var index = 0;
//循环定时器
var timebar;
//默认显示第一张图片
$img.eq(index).css('left', 0)
//启动轮播函数
function startInterval() {
timebar = setInterval(change, 3000)
}
//启动轮播
startInterval();
//更改图片及位置
function change(fn) {
//判断动画执行完毕
//前一张图片,向左移动560
$img.eq(index).stop(true).animate({ left: -560 }, 500)
//显示下一张
index++;
//判断边界
if (index >= 5) {
index = 0;
}
//处理当前的元素
$img.eq(index).stop(true).css('left', 560).animate({ left: 0 }, 500, fn)
//处理小圆点
$btns
//当前选中的
.eq(index).addClass('choose')
//处理（清理）其他的(siblings()返回被选元素的所有同级元素。)
.siblings().removeClass('choose');
};
//点击下一张按钮
$('.next').click(function () {
//清空定时器
clearInterval(timebar);
//更改索引值
//处理边界
//更改样式
change(startInterval)
})
//点击上一张按钮
$('.prev').click(function () {
//清空定时器
clearInterval(timebar);
//处理上一个元素
$img.eq(index).stop(true).animate({ left: 560 }, 500)
//更改索引值
index--;
//处理边界
if (index < 0) {
index = 4;
}
//更改样式
$img.eq(index).stop(true).css('left', -560).animate({ left: 0 }, 500, startInterval)
//处理小圆点
$btns
//当前选中的
.eq(index).addClass('choose')
//处理（清理）其他的(siblings()返回被选元素的所有同级元素。)
.siblings().removeClass('choose');
})
//点击小圆点
$btns.click(function () {
//获取索引值
var i = $(this).index();
//如果点击右侧按钮，向左移动
if (i > index) {
//清除定时器
clearInterval(timebar)
// 处理前一个图片
$img.eq(index).stop(true).animate({ left: -560 }, 500)
//更改索引值
index = i;
//处理当前图片,放到 右侧
$img.eq(index).css('left', 560).stop(true).animate({ left: 0 }, 500, startInterval)
//处理小圆点
$btns
//当前选中的
.eq(index).addClass('choose')
//处理（清理）其他的(siblings()返回被选元素的所有同级元素。)
.siblings().removeClass('choose');
} else if (i < index) {
//如果点击左侧按钮，向右移动
//清除定时器
clearInterval(timebar)
// 处理前一个图片
$img.eq(index).stop(true).animate({ left: 560 }, 500)
//更改索引值
index = i;
//处理当前图片,放到 左侧
$img.eq(index).css('left', -560).stop(true).animate({ left: 0 }, 500, startInterval)
//处理小圆点
$btns
//当前选中的
.eq(index).addClass('choose')
//处理（清理）其他的(siblings()返回被选元素的所有同级元素。)
.siblings().removeClass('choose');
}
})
// //维护当前显示图片的索引值
// var $img = $('.list img');
// var $btns = $('.btns span');
// var index = 0;
// //循环定时器
// var timebar;
// //默认显示第一张图片
// $img.eq(index).css('left', 0)
// //启动轮播函数
// function startInterval() {
// timebar = setInterval(change, 3000)
// }
// //启动轮播
// startInterval();
// //更改图片及位置
// function change() {
// //定义一个开关
// var num = 0;
// //判断动画执行完毕
// function end() {
// //执行完毕，并且传递了回调函数，就执行回调函数
// num++;
// if (num === 2 && fn) {
// fn();
// }
// }
// //前一张图片,向左移动560
// $img.eq(index).stop(true).animate({ left: -560 }, 500, end)
// //显示下一张
// index++;
// //判断边界
// if (index >= 5) {
// index = 0;
// }
// //当前图片，放在舞台右侧，再向左移动560
// dealFn();
// };
// //处理当前的元素
// function dealFn(end) {
// $img.eq(index).stop(true).css('left', 560).animate({ left: 0 }, 500, end)
// //处理小圆点
// $btns
// //当前选中的
// .eq(index).addClass('choose')
// //处理（清理）其他的(siblings()返回被选元素的所有同级元素。)
// .siblings().removeClass('choose');
// }
// //点击下一张按钮
// $('.next').click(function () {
// //清空定时器
// clearInterval(timebar);
// //更改索引值
// //处理边界
// //更改样式
// change(startInterval)
// })
// //点击上一张按钮
// $('.prev').click(function () {
// //清空定时器
// clearInterval(timebar);
// //对执行完动画的统计
// var num = 0;
// //定义end方法
// function end() {
// num++;
// //如果结束了
// if (num === 2) {
// //启动定时器
// startInterval()
// }
// }
// //处理上一个元素
// $img.eq(index).stop(true).animate({ left: 560 }, 500, end)
// //更改索引值
// index--;
// //处理边界
// if (index < 0) {
// index = 4;
// }
// //更改样式
// $img.eq(index).stop(true).css('left', -560).animate({ left: 0 }, 500, end)
// //处理小圆点
// $btns
// //当前选中的
// .eq(index).addClass('choose')
// //处理（清理）其他的(siblings()返回被选元素的所有同级元素。)
// .siblings().removeClass('choose');
// })
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
