实现功能
1.在没有点击和经过的时候图片和小圆点自动切换
2.点击小圆点的时候切换图片
3.上翻页和下翻页
实现效果
为了效果更明显更容易理解所以没溢出隐藏
实现方法1
上图利用定位控制图片的移动
<div class="box">
<ul class='count'>
<li>
<img src="./one_piece-001.jpg" alt="">
</li>
<li>
<img src="./one_piece-004.jpg" alt="">
</li>
<li>
<img src="./one_piece-005.jpg" alt="">
</li>
<li>
<img src="./one_piece-009.jpg" alt="">
</li>
<li>
<img src="./one_piece-001.jpg" alt="">
</li>
</ul>
<div class="list">
<p class='on'></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="left"><</div>
<div class="right">></div>
</div>
li {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.box {
margin: auto;
width: 700px;
height: 500px;
background-color: #ccc;
/* overflow: hidden; */
position: relative;
}
.count {
width: 35000px;
display: flex;
position: absolute;
left: 0;
top: 0;
}
.count li {
width: 700px;
height: 500px;
}
/*图片的宽高和大盒子宽高相等*/
.count li img {
width: 700px;
height: 500px;
}
.list {
display: flex;
position: absolute;
right: 0;
bottom: 0;
margin-right: 50px;
margin-bottom: 30px;
}
.list p {
width: 20px;
height: 20px;
/* background-color: peru; */
border-radius: 50%;
margin: 10px;
border: 1px solid #f00;
}
.on {
background-color: #f00;
}
.left,
.right {
width: 60px;
height: 60px;
background-color: #666;
font-size: 30px;
text-align: center;
line-height: 60px;
color: #fff;
position: absolute;
opacity: .8;
}
.left {
left: 0;
top: 200px;
}
.right {
right: 0;
top: 200px;
}
//获取元素
var oUl = document.querySelector('ul');
var oP = document.querySelectorAll('p');
var prev = document.querySelector('.left');
var next = document.querySelector('.right');
//定义第几张图片
var index = 0;
//设置定时器
var bigTimer;
var flag;
autoplay()
//自动播放
function autoplay() {
clearInterval(bigTimer)
bigTimer = setInterval(function () {
index++;
move(oUl, -700 * index, 20, 'left', function () {
// 小运动和大定时器之间的时间差
if (index == 4) {
index = 0;
oUl.style.left = 0;
}
})
dot()
}, 2500)
}
//图片滚动时下面的圈圈跟着移动
function dot() {
for (var i = 0; i < oP.length; i++) {
oP[i].classList.remove('on');
}
if (index == 4) {
oP[0].classList.add('on');
} else {
oP[index].classList.add('on')
}
}
//点击对应的小圆点,显示对应的图片
oP.forEach(function (val, i) {
val.onclick = function () {
if (flag && i !== index) {
clearInterval(bigTimer);
index = i;
dot();
move(oUl, -700 * index, 20, 'left', function () {
if (index == 4) {
index = 0;
oUl.style.left = 0;
}
})
}
//不点击的话就继续播放
autoplay()
}
})
prev.onclick = function () {
if (flag) {
clearInterval(bigTimer);
if (index == 0) {
index = 4;
oUl.style.left = -index * 700 + 'px'
}
index--;
dot();
move(oUl, -700 * index, 20, 'left', function () {
// 小运动和大定时器之间的时间差
if (index == 4) {
index = 0;
oUl.style.left = 0;
}
})
autoplay()
}
}
next.onclick = function () {
if (flag) {
clearInterval(bigTimer);
index++;
dot();
move(oUl, -700 * index, 20, 'left', function () {
// 小运动和大定时器之间的时间差
if (index == 4) {
index = 0;
oUl.style.left = 0;
}
})
autoplay()
}
}
//运动函数
// move(oUl, -35000, 20, 'left')
function move(ele, end, speed, prop, cb) {
flag = false;
// 获取初始位置
var start = parseInt(getStyle(ele, prop));
// 速度
speed = (end > start) ? speed : -speed;
var t = setInterval(function () {
start += speed;
ele.style[prop] = start + 'px';
if (Math.abs(start - end) < Math.abs(speed)) {
start = end;
clearInterval(t);
flag = true;
// 防止运动过头
ele.style[prop] = start + 'px';
// 运动结束之后做其他事情 -- 调用
// if(cb) {
// cb()
// }
cb && cb()
}
}, 10)
}
//做兼容
function getStyle(ele, prop) {
if (window.getComputedStyle) {
return getComputedStyle(ele)[prop]
}
return ele.currentStyle[prop]
}
//鼠标失去焦点的时候清除定时器
window.onblur = function () {
clearInterval(bigTimer)
}
window.onfocus = function () {
autoplay()
}
实现方法2
利用透明度实现
<div class="box">
<ul>
<li class="on">
<img src="../images/1.jpg" alt="">
</li>
<li>
<img src="../images/2.jpg" alt="">
</li>
<li>
<img src="../images/3.jpg" alt="">
</li>
<li>
<img src="../images/4.jpg" alt="">
</li>
</ul>
<p id="prev"></p>
<p id="next"></p>
<ol>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.box {
width: 400px;
height: 300px;
margin: 40px auto;
position: relative;
/* overflow: hidden; */
background-color: #ddd;
}
img{
width: 400px;
height: 300px;
}
.box ul li {
width: 400px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 40px;
font-weight: bold;
border: 1px solid #000;
position: absolute;
top: 0;
opacity: 0;
transition: 1s;
}
.box ul .on{
opacity: 1;
}
.box ol {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
}
.box ol li {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #f00;
margin: 10px;
transition: 1s;
}
.on {
background-color: #f00;
}
p{
position: absolute;
width: 30px;
height: 30px;
top: 0;
bottom: 0;
margin: auto;
background-color: pink;
}
#prev{
left: 0;
}
#next{
right: 0;
}
var t , index = 0;
var oUlLis = document.querySelectorAll('ul li');
console.log(oUlLis)
var oOlLis = document.querySelectorAll('ol li');
var oBox = document.querySelector('.box');
var oUl = document.querySelector('ul');
var flag ;
autoplay() ;
oBox.onmouseover = function() {
clearInterval(t)
}
oBox.onmouseout = function() {
autoplay()
}
next.onclick = function(){
console.log(index)
oUlLis[index].addEventListener('webkitTransitionEnd' , function(){
flag = true;
console.log(1)
})
if(flag) {
clearInterval(t);
index++ ;
if(index == oUlLis.length) {
index = 0
}
showOne()
autoplay()
}
}
function autoplay() {
t = setInterval(() => {
index++ ;
if(index == oUlLis.length) {
index = 0
}
showOne()
},2000)
}
function showOne() {
oUlLis.forEach(function(val , i){
val.classList.remove('on');
oOlLis[i].classList.remove('on');
})
oUlLis[index].classList.add('on');
oOlLis[index].classL