通过自己的自学,初步完成了淘宝轮播图的实现,可能代码上还没得到很多优化,希望大家可以帮我指出一下,非常感谢!
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
.banner{
width: 520px;
height: 282px;
margin: 100px ;
position: relative;
overflow: hidden;
}
.banner .banner-list{
width: 600%;
height: 100%;
list-style: none;
position: absolute;
top: 0;
}
.banner .banner-list li{
float: left;
}
.banner .banner-dot{
height: 13px;
margin-left: -35px;
position: absolute;
list-style: none;
left: 50%;
bottom: 15px;
background-color: rgba(250,250,250,.3);
border-radius: 5px;
padding:3px;
box-sizing: border-box;
}
.banner .banner-dot li{
width: 8px;
height: 8px;
float: left;
border-radius: 50%;
background-color: #fff;
margin-right: 5px;
}
.banner .banner-dot .show{
background-color: #ff5000;
}
.banner .banner-dot li:last-child{
margin-right: 0px;
}
.banner .banner-icon .icon-left{
width: 40px;
height: 30px;
line-height: 30px;
border-radius:20px;
text-align: right;
padding-right: 8px;
position: absolute;
font-size: 24px;
color: #fff;
box-sizing: border-box;
background-color: rgba(0, 0, 0, .3);
left: -15px;
top: 50%;
display: none;
z-index: 10;
cursor: pointer;
}
.banner .banner-icon .icon-right{
width: 40px;
height: 30px;
line-height: 30px;
border-radius:20px;
text-align: left;
padding-left: 8px;
position: absolute;
font-size: 24px;
color: #fff;
box-sizing: border-box;
background-color: rgba(0, 0, 0, .3);
right: -15px;
top: 50%;
display: none;
z-index: 10;
cursor: pointer;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner-icon">
<span class="icon-right">></span>
<span class="icon-left"> < </span>
</div>
<ul class="banner-list">
<li><img src="https://img.alicdn.com/simba/img/TB1MP9_yYY1gK0jSZTESutDQVXa.jpg " alt=""> </li>
<li><img src="https://img.alicdn.com/simba/img/TB1GzT0zXT7gK0jSZFpSuuTkpXa.jpg" alt=""> </li>
<li><img src="https://img.alicdn.com/tfs/TB15Z_Gzbr1gK0jSZR0XXbP8XXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1bvcMyFT7gK0jSZFpXXaTkpXa-520-280.jpg_q90_.webp" alt=""></li>
<li><img src="https://img.alicdn.com/simba/img/TB1kyuIy7L0gK0jSZFtSutQCXXa.jpg" alt=""></li>
</ul>
<ol class="banner-dot">
</ol>
</div>
<script>
var banner = document.querySelector('.banner');
var bannerlist1=document.querySelector('.banner-list');
var bannerlist=document.querySelectorAll('.banner-list li');
var bannerdot=document.querySelector('.banner-dot');
var iconleft =document.querySelector('.icon-left');
var iconright =document.querySelector('.icon-right');
var liwidth = banner.offsetWidth;
banner.addEventListener('mouseenter',function(){
iconleft.style.display = 'block';
iconright.style.display = 'block';
clearInterval(timer);
timer=null;
});
banner.addEventListener('mouseleave',function(){
iconleft.style.display = 'none';
iconright.style.display = 'none';
timer = setInterval(function(){
//手动调用点击事件
iconright.click();
},2000);
})
//缓动动画函数
function animate(obj,target,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//帮步长值变为整数Math.celi
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();
}
}
//每次加1的固定值换成动态的慢慢变小的值 步长公式:(目标值-现在位置)/10
obj.style.left = obj.offsetLeft + step + 'px';
},15);
}
for(var i=0;i<=bannerlist.length-1;i++){
var li = document.createElement('li');
//为小圆圈加索引
li.setAttribute('index',i);
bannerdot.appendChild(li);
li.addEventListener('click',function(){
for(var j=0;j<=bannerdot.children.length-1;j++){
bannerdot.children[j].className='';
}
this.className='show';
//点击小圆圈移动图片
//ul的移动距离 小圆圈的索引号乘以图片的宽度,是负值
var index = this.getAttribute('index');
//当我们点击了小圆圈需要将小圆圈的索引值赋值给num保持一致
num=index;
//当我们点击了小圆圈需要将小圆圈的索引值赋值给circle保持一致
circle=index;
animate(bannerlist1,-index*liwidth)
})
bannerdot.children[0].className='show';
}
//6.克隆第一张图片放在最后面
var first = bannerlist[0].cloneNode(true);
bannerlist1.appendChild(first);
//7.点击右侧按钮,移动一张图片
// 7.1定义一个变量,当他点击后加1,从而达到bannerlist的移动距离
var num=0;
//7.2控制小圆圈的播放
var circle = 0;
// flag是一个节流阀
var flag = true;
//右侧按钮实现
iconright.addEventListener('click',function(){
if(flag){
flag=false//关闭节流阀
if(num==bannerlist1.children.length-1){
bannerlist1.style.left=0;
num=0;
}
num++;
animate(bannerlist1,-num*liwidth,function(){
flag=true;
});
circle++;
//如果circle等于4,说明走到了最后克隆的图片,需要将circle为重置为0
if(circle==bannerlist1.children.length-1){
circle=0;
}
for(var i=0;i<=bannerdot.children.length-1;i++){
bannerdot.children[i].className='';
}
bannerdot.children[circle].className='show';
}
//判断是否到达最后一张图片,如果定义的变量等于了li的数量了,那么就让他很快的left为0,几乎看不到
})
//左侧按钮功能实现
iconleft.addEventListener('click',function(){
if(flag){
flag=false;
//判断是否到达最后一张图片,如果定义的变量等于了li的数量了,那么就让他很快的left为0,几乎看不到
if(num==0){
num=bannerlist1.children.length-1;
bannerlist1.style.left=-num*liwidth + 'px';
}
num--;
animate(bannerlist1,-num*liwidth,function(){
flag=true;
});
circle--;
//如果circle小于0
if(circle<0){
circle=bannerdot.children.length-1;
}
for(var i=0;i<=bannerdot.children.length-1;i++){
bannerdot.children[i].className='';
}
bannerdot.children[circle].className='show';
}
})
//自动播放功能实现
var timer = setInterval(function(){
//手动调用点击事件
iconright.click();
},2000);
</script>
</body>
</html>