目录
原始注释版
<!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;
}
/* img {
width: 560px;
height: 300px;
} */
.list img {
/* width: 560px; */
position: absolute;
/* height: 300px; */
top: 0;
left: 0;
display: none;
}
.list img.choose {
display: block;
}
.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;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 560px;
height: 300px;
}
/* 对应下面top,及列的设置 */
/* .content .row {
height: 100px;
position: relative;
} */
.content .col {
position: absolute;
width: 112px;
height: 100px;
display: inline-block;
/* background-color: pink; */
}
</style>
</head>
<body>
<div class="list">
<img class="choose" src="/lianxi/专项练习/图片/0.jpg" alt="0">
<img src="/lianxi/专项练习/图片/1.jpg" alt="1">
<img src="/lianxi/专项练习/图片/2.jpg" alt="2">
<img src="/lianxi/专项练习/图片/3.jpg" alt="3">
<img src="/lianxi/专项练习/图片/4.jpg" alt="4">
<div class="content"></div>
<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>
//获取元素
var $img = $('.list img');
var $btns = $('.btns span');
var $content = $('.content');
//当前显示图片的序号
var id = 0;
//定时器句柄,一个引用,存储定时器的
var timebar;
// // 法一:创建div的表格,通过for循环创建 //3行6列
// for (var i = 0; i < 3; i++) {//外面控制行
// //创建行元素
// //$()方法内部,书写标签就会创建元素
// //如果是单标签,可以简写成单标签元素,如下
// var row = $('<div class="row" />')
// //里面控制列
// for (var j = 0; j < 6; j++) {
// var col = $('<div class="col" />')
// //将列放入 行内
// row.append(col)
// }
// //将 行 放入 content元素内
// $content.append(row)
// }
//法二:字符串拼接
var str = '';
// ` //要得到的单行样式
// <div class="row">
// <div class="col"></div>
// <div class="col"></div>
// <div class="col"></div>
// <div class="col"></div>
// <div class="col"></div>
// </div>
// `
//外部控制行 //3行5列
for (var i = 0; i < 3; i++) {
str += '<div class="row">'
//里面控制列
for (var j = 0; j < 5; j++) {
str += '<div class="col"></div>'
}
str += '</div>'
}
//写入内容
$content.html($(str));
//渲染第 2 张图片(让content去)
$content
.find('.col')
// .css('background-image', 'url(/lianxi/专项练习/图片/' + id + '.jpg)')
// .css({
// backgroundImage: url(/lianxi/专项练习 / 图片 / + id + "." + jpg)
// })
.each(function (index) {
//知道索引值后,可以获取到每个图片的行列
//一共是 3行5列 ,每个 元素的索引值 除以 5 ,
//可得 行列号 , //建议不加,整数余数分别 +1 的话,可以更直观
// console.log(index, 行:parseInt(index / 5), index % 5);
//行:parseInt(index / 5) 列: index % 5
//设置背景图片位置
$(this).css({
// backgroundPosition:''
backgroundPositionX: -112 * (index % 5),
backgroundPositionY: -100 * parseInt(index / 5),
top: 100 * parseInt(index / 5),
left: 112 * (index % 5),
})
})
// $content.find('.col').css({
// backgroundImage: 'url(/lianxi/专项练习/图片/' + id + '.jpg)',
// width: 0,
// height: 0,
// opacity: 0
// }).each(function () {
// //为每一个元素设置不同时间的动画
// $(this).animate({
// width: 112,
// height: 100,
// opacity: 1
// //时间为0.5-3s
// }, 500 + 2500 * Math.random())
// })
//启动定时器
function startInterval() {
timebar = setInterval(function () {
//页面必须显示前一张图片 id++ 之前的id就是前一张图片
//其他元素删除choose类
$img.eq(id).addClass('choose').siblings().removeClass('choose')
//更改id
id++;
//判断条件
// if (id >= $img.length) {
// //最后一张图片的下一张设置为第一张
// id = 0;
// };
doAnimat();
}, 5000)
}
//封装 执行动画 函数
function doAnimat() {
//判断边界 //第 1 张 和 最后 1 张
if (id > $img.length) {
id = 0;
} else if (id < 0) {
id = $img.length - 1;
};
//启动动画
$content.find('.col').css({
backgroundImage: 'url(/lianxi/专项练习/图片/' + id + '.jpg)',
width: 0,
height: 0,
opacity: 0
}).each(function () {
//为每一个元素设置不同时间的动画true
//stop(true)清空动画,只执行最后一次点击的命令
$(this).stop(true).animate({
width: 112,
height: 100,
opacity: 1
//时间为0.5-3s
}, 500 + 2500 * Math.random())
})
//更新小圆点
$btns.eq(id).addClass('choose').siblings().removeClass('choose')
}
//启动动画
startInterval();
//点击后,动画执行前的准备
function prepareAnimate() {
clearInterval(timebar);
$img.eq(id).addClass('choose').siblings().removeClass('choose')
}
// 点击下一张图片
$('.next').click(function () {
// // 1.清除定时器
// clearInterval(timebar);
// // 2.显示上一张图片 id
// $img.eq(id).addClass('choose').siblings().removeClass('choose')
prepareAnimate();
// 3.更新id
id++;
// 4.处理边界
// if (id >= $img.length) {
// //最后一张图片的下一张设置为第一张
// id = 0;
// };
// 5.执行动画// 6.处理小圆点
doAnimat();
// 7.启动定时器
startInterval();
})
// 点击上一张
$('.prev').click(function () {
// // 1.清除定时器
// clearInterval(timebar);
// // 2.显示上一张图片 id
// $img.eq(id).addClass('choose').siblings().removeClass('choose')
prepareAnimate();
// 3.更新id
id--;
// 4.处理边界
// if (id < 0) {
// id = $img.length - 1;
// };
// 5.执行动画// 6.处理小圆点
doAnimat();
// 7.启动定时器
startInterval();
})
//点击小圆点
$btns.click(function () {
//1.获取index
var index = $(this).index();
//2.判断与id是否相同
if (id === index) {
return;
}
//3.准备动画
prepareAnimate();
//4.更改id
id = index;
//5.执行动画
doAnimat();
//6.启动定时器
startInterval();
})
</script>
</body>
</html>
无注释版
<!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 {
position: absolute;
top: 0;
left: 0;
display: none;
}
.list img.choose {
display: block;
}
.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;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 560px;
height: 300px;
}
.content .col {
position: absolute;
width: 112px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div class="list">
<img class="choose" src="/lianxi/专项练习/图片/0.jpg" alt="0">
<img src="/lianxi/专项练习/图片/1.jpg" alt="1">
<img src="/lianxi/专项练习/图片/2.jpg" alt="2">
<img src="/lianxi/专项练习/图片/3.jpg" alt="3">
<img src="/lianxi/专项练习/图片/4.jpg" alt="4">
<div class="content"></div>
<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>
var $img = $('.list img');
var $btns = $('.btns span');
var $content = $('.content');
var id = 0;
var timebar;
var str = '';
for (var i = 0; i < 3; i++) {
str += '<div class="row">'
for (var j = 0; j < 5; j++) {
str += '<div class="col"></div>'
}
str += '</div>'
}
$content.html($(str));
$content
.find('.col')
.each(function (index) {
$(this).css({
backgroundPositionX: -112 * (index % 5),
backgroundPositionY: -100 * parseInt(index / 5),
top: 100 * parseInt(index / 5),
left: 112 * (index % 5),
})
})
//启动定时器
function startInterval() {
timebar = setInterval(function () {
$img.eq(id).addClass('choose').siblings().removeClass('choose')
id++;
doAnimat();
}, 5000)
}
//封装 执行动画 函数
function doAnimat() {
if (id > $img.length) {
id = 0;
} else if (id < 0) {
id = $img.length - 1;
};
//启动动画
$content.find('.col').css({
backgroundImage: 'url(/lianxi/专项练习/图片/' + id + '.jpg)',
width: 0,
height: 0,
opacity: 0
}).each(function () {
$(this).stop(true).animate({
width: 112,
height: 100,
opacity: 1
}, 500 + 2500 * Math.random())
})
//更新小圆点
$btns.eq(id).addClass('choose').siblings().removeClass('choose')
}
startInterval();
//点击后,动画执行前的准备
function prepareAnimate() {
clearInterval(timebar);
$img.eq(id).addClass('choose').siblings().removeClass('choose')
}
// 点击下一张图片
$('.next').click(function () {
prepareAnimate();
id++;
doAnimat();
startInterval();
})
$('.prev').click(function () {
prepareAnimate();
id--;
doAnimat();
startInterval();
})
//点击小圆点
$btns.click(function () {
var index = $(this).index();
if (id === index) {
return;
}
prepareAnimate();
id = index;
doAnimat();
startInterval();
})
</script>
</body>
</html>