轮播图.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/轮播图.css">
<!--引入js文件-->
<script src="../轮播图.js">
</script>
<script src="../animate.js"></script>
</head>
<body>
<div class="banner">
<div class="wrapper">
<!--滚动区域-->
<ul>
<li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/5.jpg" alt=""></a></li>
</ul>
<ol class="circle">
</ol>
<!--左侧按钮-->
<a href="javascript:;" class="prev"><</a>
<!--右侧按钮-->
<a href="javascript:;" class="next"> ></a>
</div>
</div>
</body>
轮播图.css
body {
height:4000px;
}
/* 轮播图设置 */
.banner {
position: relative;
/*width: 1080px;*/
height: 424px;
}
/* 版心设置 */
.wrapper {
position: absolute;
width: 1080px;
/*position: relative;*/
height: 424px;
margin-left: 50%;
left:-540px;
overflow: hidden;
/* 背景 */
}
.wrapper ul {
position: absolute;
list-style: none;
top: 0;
left: 0;
width: 700%;
}
.wrapper ul li {
float: left;
}
/*.wrapper ul li img {
width: 1080px;
height: 480px;
}*/
/* 版心放置图片设置 */
/*.wrapper ul {
list-style: none;
}*/
/* 左右箭头设置 */
.prev,
.next {
display: none;
/*margin-top: -25px;*/
width: 30px;
height: 40px;
/*设置背景透明*/
background-color: rgba(0,0,0,0.2);
font-size:25px;
color: white;
text-align: center;
line-height: 40px;
text-decoration: none;
position: absolute;/* 绝对定位 */
top: 50%;
margin-top: -20px;
z-index: 2;
}
.prev {
left: 0;
/*left: 40px;*/
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.next {
right: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
/* 底部小圆点设置 */
.banner .circle {
list-style: none;
/*设置导航条的宽度和高度*/
/* width: 200px;
height: 40px; */
bottom: 15px;
/*设置ol的背景颜色*/
/* background-color: rgba(255,255,255,.2); */
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -100px;
border-radius: 20px;
}
.wrapper .circle li {
float: left;
/*设置每个li标签的宽高*/
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(2555,255,255,0.4);
margin: 10px;
margin-bottom: -10px;
/*鼠标经过显示小手*/
cursor: pointer;
}
.wrapper .circle .current {
background-color: white;
}
轮播图.js
window.addEventListener('load',function() {
var prev=document.querySelector('.prev');
var next=document.querySelector('.next');
var wrapper=document.querySelector('.wrapper');
var wrapperWidth=wrapper.offsetWidth;
wrapper.addEventListener('mouseenter',function(){
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
timer = null;//清除定时器变量
})
wrapper.addEventListener('mouseleave',function(){
prev.style.display = 'none';
next.style.display = 'none';
timer = setInterval(function() {
next.click();
},3000);
});
// 动态生成小圆点 有几张图生成几个小圆点
var ul=wrapper.querySelector('ul');
var ol=wrapper.querySelector('.circle');
for(var i=0;i<ul.children.length;i++){
//创建小li
//并且给li生成自定义属性来记录小圆圈的索引号
var li=document.createElement('li');
li.setAttribute('index',i);
//把小li插到ol里
ol.appendChild(li);
//小圆圈的排他思想,直接在生成小圆点的同时直接绑定点击事件
li.addEventListener('click',function() {
for(var i=0;i<ol.children.length;i++) {
//把所有的li去除current类名
ol.children[i].className='';
}
//为自己设置current类名
this.className='current';
//点击小圆点,移动图片 移动的是ul
//ul的引动距离 小圆圈的索引号 乘以图片的宽度 注意是负值
//当我们点击某个小li就取当前li的索引号
var index=this.getAttribute('index');
//当点击了某个小li 就要把这个小li的索引号给num
nun=index;
circle=index;
animate(ul,-index*wrapperWidth);
// animate(ul,-index*1064);
})
}
//把ol里的第一个小li设置类名为current
ol.children[0].className = 'current';
//克隆第一张图片放到ulzuihoumian
var first=ul.children[0].cloneNode(true);
ul.appendChild(first);
//点击右侧按钮,图片滚动一张
var num=0;
//flag 节流阀
var flag = true;
//控制小圆圈的播放
var circle=0;
next.addEventListener('click',function() {
if(flag) {
flag=false;//关闭节流阀
//如果走到了最后复制的一张图片,此时ul要快速复原 left改为0
if(num==ul.children.length-1) {
ul.style.left=0;
num=0;
}
num++;
animate(ul,-num*wrapperWidth,function() {
flag=true;
});
//点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
//当circle走到最后一个就重新赋值为0
if(circle==ol.children.length) {
circle=0;
}
// //先清除其他小圆圈的current类名 留下自己的current类名
// for(var i=0;i<ol.children.length;i++) {
// ol.children[i].className='';
// }
// ol.children[circle].className='current';
circleChange();
}
});
//左侧按钮功能
prev.addEventListener('click',function() {
if(flag){
flag=false;
//如果走到了最后复制的一张图片,此时ul要快速复原 left改为0
if(num==0) {
num=ul.children.length-1;
ul.style.left=-num*wrapperWidth+'px';
}
num--;
animate(ul,-num*wrapperWidth,function(){
flag=true;});
//点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
//当circle<0 说明是第一张图片 则小圆圈要改为最后一个小圆圈
if(circle<0) {
circle=ol.children.length-1;
}
circleChange();
}
});
function circleChange() {
//先清除其他小圆圈的current类名 留下自己的current类名
for(var i=0;i<ol.children.length;i++) {
ol.children[i].className='';
}
ol.children[circle].className='current';
}
//自动播放轮播图
var timer = setInterval(function() {
//手动调用点击事件
next.click();
},3000);
})动画函数封装? animate.js
function animate(obj,target,callback) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var step=(target-obj.offsetLeft) / 10;
//把步长值改为整数 如果大于0往大的取 如果小于0 往小的取
step=step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target) {
//停止动画本质是停止计时器
clearInterval(obj.timer);
//回调函数写到定时器结束里面
// if(callback) {
// //调用函数
// callback();
// }
callback && callback();
}
obj.style.left=obj.offsetLeft + step + 'px';//offsetLeft获取元素位置
},15);
}页面效果：
点击右侧按钮后：
?
?
