原生js手写轮播图滑动特效
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 8000px;
height: 410px;
float: left;
cursor: pointer;
}
div {
position: relative;
left: 300px;
top: 200px;
width: 1000px;
height: 410px;
overflow: hidden;
}
#ul li {
float: left;
}
#ul>li img {
vertical-align: middle;
}
.show {
display: block;
}
ul span {
position: absolute;
top: 50%;
cursor: pointer;
}
ul span:first-of-type,
ul span:last-of-type {
opacity: .7;
transition: all .2s linear;
}
ul span:first-of-type {
left: 10px;
}
ul span:last-of-type {
left: 95%;
}
ul span:last-of-type:hover,
ul span:first-of-type:hover {
transform: scale(1.3);
opacity: 1;
}
#circleList {
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%);
}
#circleList li {
list-style: none;
float: left;
width: 30px;
height: 30px;
background-color: #ffffff;
margin: 0 20px;
border-radius: 50%;
cursor: pointer;
}
.yellow {
background-color: yellow !important;
}
</style>
<script src="../cuicui_Tool.js"></script>
</head>
<body>
<div>
<ul id="ul" style="margin-left: 0px;">
<li index="0" style="opacity: 1;"><img src="images/1.jpg"></li>
<li index="1" style="opacity: 1;"><img src="images/2.jpg"></li>
<li index="2" style="opacity: 1;"><img src="images/3.jpg"></li>
<li index="3" style="opacity: 1;"><img src="images/4.jpg"></li>
<li index="4" style="opacity: 1;"><img src="images/5.jpg"></li>
<li index="5" style="opacity: 1;"><img src="images/6.jpg"></li>
<span id="left"><img src="images/l.png"></span>
<span id="right"><img src="images/r.png"></span>
</ul>
</div>
</body>
<script>
// 申明一个计数器
var n = 0;
// 申明一个事件锁
var isMove = false;
var ullength = $('#ul li').length;
// 创建一个ol节点存放小圆点
var ol = document.createElement('ol');
// 添加 id 名方便编写样式
ol.setAttribute('id', "circleList");
//将ol插入到div中
$('div').appendChild(ol);
// 根据图片数量创建li节点并插入ol中
for (var i = 0; i < ullength; i++) {
li = document.createElement('li');
li.setAttribute('index', i);
$('ol').appendChild(li);
}
$('ol li')[0].className = "yellow"
// 右边按钮点击事件
$('#right').onclick = function () {
// 如果ismover为true则表示当前有计时器正在工作 则不执行下面代码
if (isMove) {
return;
}
n++;
isMove = true;
// 当图片轮播到最后一个时 克隆一个节点插入到最后一个
if (n >= $('#ul li').length) {
newFirst = $('#ul li')[0].cloneNode(true);
$('#ul').insertBefore(newFirst, $('#left'));
}
// 添加计时器 使ul 滚起来
move = setInterval(function () {
// 获取ul的marginleft
var ml = parseInt($('#ul').style.marginLeft);
// 利用计时器为ul添加marginleft值
$('#ul').style.marginLeft = ml - 50 + 'px';
// 当ul的marginlleft小于等于n*-1000时表示到达了所要切换的图片
if (ml <= n * -1000) {
// 重新为ul赋值 保证其到达刚好的位置
$('#ul').style.marginLeft = n * -1000 + 'px';
// 则停止计时器
clearInterval(move);
circle(n > ullength - 1 ? 0 : n);
// 如果图片走到最后一张了则
if (n === ullength) {
// 让他偷偷的到达第一张的位置 删除掉刚刚克隆的图片
$('#ul').style.marginLeft = 0 + 'px';
$('#ul').removeChild($('#ul li')[ullength]);
n = 0;
}
//并且吧isMove变为false
isMove = false;
// 结束本次点击事件
return;
}
}, 16)
}
// 向左边切换的按钮
$('#left').onclick = function () {
// 如果ismover为true则表示当前有计时器正在工作 则不执行下面代码
if (isMove) {
return;
}
n--;
isMove = true;
// 当到达第一张时
if (n === -1) {
// 把最后一张克隆了插入到最前面
newFirst = $('#ul li')[ullength - 1].cloneNode(true);
$('#ul').insertBefore(newFirst, $('#ul li')[0]);
// 让当前的图片到达现在的第二张 原来的第一张的位置
$('#ul').style.marginLeft = n * 1000 + 'px';
//从新赋值n
n = 0;
}
// 添加计时器 使ul 滚起来
move = setInterval(function () {
// 获取ul的marginleft
var ml = parseInt($('#ul').style.marginLeft);
// 利用计时器为ul添加marginleft值
$('#ul').style.marginLeft = ml + 50 + 'px';
// 当ul的marginlleft大于等于n*-1000时表示到达了所要切换的图片
if (ml >= n * -1000) {
// 重新为ul赋值 保证其到达刚好的位置
$('#ul').style.marginLeft = n * -1000 + 'px';
// 则停止计时器
clearInterval(move);
circle(n < 0 ? ullength - 1 : n);
//并且吧isMove变为false
// 如果图片走到第一张了了则
isMove = false;
console.log(ullength);
if ($('ul li').length > ullength) {
$('ul').removeChild($('ul li')[0])
n = 5;
circle(n)
$('#ul').style.marginLeft = n * -1000 + "px";
}
// 结束本次点击事件
return;
}
}, 16)
}
function circle(n) {
// 清空所有小圆点样式
for (var i = 0; i < $('ol li').length; i++) {
$('ol li')[i].className = "";
}
$('ol li')[n].className = "yellow";
}
clear = setInterval(function () {
$('#right').click();
}, 1000)
// 触摸到div的时候清空计时器
$('div').onmouseenter = function () {
clearInterval(clear);
}
// 离开div的时候重新开启计时器
$('div').onmouseleave = function () {
clear = setInterval(function () {
$('#right').click();
}, 1000)
}
</script>
</html>