Carousel
Functional Requirements:
- When the mouse passes over the carousel module, the left and right buttons are displayed, and the left and right buttons are hidden when the mouse is left.
- Click the right button once, the picture will play one picture to the left, and the left button is the same.
- While the picture is playing, the small circle module below changes along with it.
- Click the small circle to play the corresponding picture.
- The carousel will automatically play the pictures even if the mouse does not pass over the carousel.
- When the mouse passes by, the carousel map module, and the automatic playback stops.
Carousel JavaScript source code is at the bottom
index.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>
<!-- 这个animate.js 必须写到 index.js的上面引入 -->
<script src='./JS/animate.js'></script>
<!-- 引入我们首页的js文件 -->
<script src="./JS/index.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="w">
<div class="main">
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
⬅
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> ➡</a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="circle">
</ol>
</div>
</div>
</div>
</body>
</html>
index.css
.w {
width: 1200px;
margin: 0 auto;
}
/*清除元素默认的内外边距 */
* {
margin: 0;
padding: 0
}
/*去掉列表前面的小点*/
li {
list-style: none;
}
/*让button 按钮 变成小手*/
button {
cursor: pointer;
}
/*取消链接的下划线*/
a {
color: #666;
text-decoration: none;
}
/*清除浮动*/
a {
color: #666;
text-decoration: none;
}
.main {
width: 900px;
height: 455px;
margin-left: 219px;
margin-top: 10px;
}
.fl {
float: left;
}
.focus {
position: relative;
width: 721px;
height: 455px;
background-color: purple;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
animate.js
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
Carousel Chart JavaScript Breakdown
1. Create a new js file and import it into the page. When the mouse passes over the carousel module, the left and right buttons are displayed, and the left and right buttons are hidden when the mouse is left.
The first step is to get the left and right buttons, add the mouse passing and leaving events, the mouse passing, display the left and right buttons, the mouse leaving, hide the left and right buttons
2. Dynamically generate a small circle at the bottom
Get ul and ol elements, add li elements by creating elements, and then set the default background of the small dots of the first li element to white
The css code of the small dot is implemented as:
The effect is as follows:
3. Click which small circle, which small circle will change the background color (exclusive idea)
The reason why the click event is added when creating li is because every small li needs to be added. If the click event is placed outside the for loop, only the last li will add the click event
4. Click the small circle to switch pictures
- At this time, the animate animation function is used to import the js file (note that because index.js depends on animate.js, animate.js should be written
on index.js) - The premise of using the animation function, the element must have positioning
- It's ul that moves instead of li
- The core algorithm of scrolling pictures: click on a small circle, let the picture scroll the index number of the small circle multiplied by the width of the picture as the ul movement distance
- At this time, we need to know the index number of the small circle. We can set a custom attribute for the small circle when generating it, and get this custom attribute when clicking.
5. Click the button on the right to scroll the picture
Click the button on the right once to scroll the picture one by one. Declare a variable num, click once, increment by 1, and multiply this variable by the width of the picture, which is the scrolling distance of ul. The principle of seamless scrolling of pictures: Copy the first li of ul and put it at the end of ul. When the picture scrolls to the last picture of the clone, let ul quickly jump to the leftmost without animation: left It is 0 and num is assigned a value of 0, and the picture can be scrolled from the beginning
But there will be a problem in this way: the first is that there will be one more small circle below, and the second is that the flexibility is not good, so we can change the method of adding li at the end to the method of cloning the first picture
Optimization method: clone the last picture
Clone the first picture, clone ul first li cloneNode() add true deep clone copy child nodes inside false shallow clone add to ul last appendChild
6. Click the button on the right, and the small circle will change along with it
7. Click the left button to flip (the method is similar to the right button)
8. Realize the automatic playback function, and when the mouse is on the picture, the picture will not be switched, and the picture will be automatically switched when the mouse is left
Add the function of stopping and starting the timer respectively when the mouse passes and the mouse leaves
index.js complete source code
window.addEventListener('load', function () {
//获取左右按钮
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
//鼠标经过显示左右按钮，停止定时器
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;//清除定时器
})
//鼠标离开隐藏按钮，开启定时器
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function(){
//手动调用点击事件
arrow_r.click();
},2000)
})
//动态生成小圆圈，有几张图生成几个小圆圈，图的个数可以通过li的个数得到
var ul = focus.querySelector('ul');//ul很多，我们只需要fucus里面的ul
var ol = focus.querySelector('.circle')
//通过ul.children.length可以获得ul中有几个li，即有几张图片
for (var i = 0; i < ul.children.length; i++) {
//创建li，把li插入到ol中
var li = document.createElement('li');
li.setAttribute('index', i);//自定义设置小圆圈的索引号
ol.appendChild(li);
//生成小圆圈的同时，绑定小圆圈的点击事件
li.addEventListener('click', function () {
//排他思想，先把所有的li全部去除类
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//点击哪个li就设置哪个li为current类
this.className = 'current';
//点击小圆圈移动图片，移动的是ul，不是li
//ul的移动距离就是小圆圈的索引号乘以图片的宽度,向左移动，是负值
//点击哪个li，就获得哪个li的索引号
var index = this.getAttribute('index');//获取索引号
//当我们点击了某个li，就要把当前的索引号给num
num = index;
//当我们点击了某个li，就要把当前的索引号给circle
circle = index;
animate(ul, -index * focusWidth);
})
//之所以在创建li的时候添加点击事件是因为，每一个小li都需要添加
//如果将点击事件放在for循环外面，那么只有最后一个li添加了点击事件
}
//把ol中第一个li设置current类（第一个li默认为白色）
ol.children[0].className = 'current';
//克隆第一张图片
//克隆不会多出一个小圆圈的原因是，我们在生成小圆圈的下面克隆了第一张图片，因此不会在多出小圆圈
var first = ul.children[0].cloneNode(true);//深拷贝
ul.appendChild(first);
var num = 0;
//点击右侧按钮，图片滚动
var circle = 0;
arrow_r.addEventListener('click', function () {
//如果走到最后一张图片，此时我们的ul要快速复原，left改为0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth);
//点击右侧按钮，小圆圈跟随一起变化 ，可以再声明一个变量控制小圆圈的播放
circle++;
//如果circle ==4，说明我们走到了最后克隆的那张图片了，此时circle要赋值为0
if (circle == ol.children.length) {
circle = 0;
}
//先清除其余小圆圈的类名，在留下当下小圆圈的类名（排他思想）
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//左侧按钮实现向左滚动
arrow_l.addEventListener('click', function () {
//如果走到最后一张图片，此时我们的ul要快速复原，left改为0
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth);
//点击右侧按钮，小圆圈跟随一起变化 ，可以再声明一个变量控制小圆圈的播放
circle--;
//如果circle <0，第一个小圆圈要改为第四个小圆圈
if (circle <0) {
circle = ol.children.length - 1;
}
//先清除其余小圆圈的类名，在留下当下小圆圈的类名（排他思想）
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//实现自动播放功能
var timer = setInterval(function(){
//手动调用点击事件
arrow_r.click();
},2000)
})