JavaScript实现轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入图标字体-->
<link rel="stylesheet" type="text/css" href="fa/css/all.css"/>
<script src="js/tool.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/*
* 清除默认外边距、内边距
*/
* {
margin: 0;
padding: 0;
}
/*
* 设置div的样式
*/
.contain {
width: 730px;
height: 454px;
background-color: #999;
margin: 50px auto;
position: relative;
/*
* 裁剪多余的内容
*/
overflow: hidden;
}
ul li {
list-style: none;
}
.arrow_Left {
width: 30px;
height: 50px;
background-color: rgba(0,0,0,0.2);
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
text-align: center;
z-index: 2;
/*
* 让箭头默认隐藏
*/
display: none;
}
.arrow_Left i{
font-size: 24px;
/*
* 方法一：
* 设置行高
* line-height: 50px
*/
line-height: 50px;
/*display: block;
margin-top: 5px;*/
/*
* 方法二：
* 通过设置外边距
* margin-top: 13px;
*/
}
.arrow_Right {
width: 30px;
height: 50px;
background-color:rgba(0,0,0,0.2);
margin: auto 0;
right: 0;
bottom: 0;
top: 0;
position: absolute;
text-align: center;
/*
* 设置箭头样式
*/
font-size: 24px;
line-height: 50px;
z-index: 2;
/*
* 让箭头默认隐藏
*/
display: none;
}
/*
* 设置小圆圈
*/
.circle {
height: 20px;
width: 730px;
position: absolute;
bottom: 30px;
z-index: 2;
}
ol {
list-style: none;
margin: 0 auto;
width: 400px;
height: 20px;
}
/*
* 设置小圆圈样式
*/
ol li {
float: left;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #999;
border: 1px solid rgba(0,0,0,.05);
margin-right: 20px;
}
/*
* 设置ul宽度，使其可以容纳图片，左右滑入滑出
*/
ul {
width: 4380px;
position: absolute;
}
/*
* 设置li左浮动，排列在一行
*/
ul li {
float: left;
}
/*
* 设置图片宽高
*/
ul li img {
width: 730px;
height: 454px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!--搭建页面结构-->
<!--用于显示轮播图的div-->
<div class="contain">
<!--左箭头-->
<div class="arrow_Left">
<i class="fa fa-arrow-left"></i>
</div>
<!--右箭头-->
<div class="arrow_Right fa fa-arrow-right">
</div>
<!--用于容纳动态小圆圈的ol-->
<div class="circle">
<ol>
</ol>
</div>
<!--创建ul用于进行图片的 滑动效果-->
<ul id="clone">
<li>
<img src="images/adver01.jpg"/>
</li>
<li>
<img src="images/adver02.jpg"/>
</li>
<li>
<img src="images/adver03.jpg"/>
</li>
<li>
<img src="images/adver04.jpg"/>
</li>
<li>
<img src="images/adver05.jpg"/>
</li>
<li>
<img src="images/adver06.jpg"/>
</li>
</ul>
</div>
<script type="text/javascript">
//获取外曾容器对象
var wrapper = document.getElementsByClassName('contain');
//定义一个开关用于控制点击左侧，右侧按钮时候动画执行完成之后在触发下一次点击事件
var flage = true;
//定义circle_num变量记录每个小圆圈的索引值
var circle_num =0;
//定义变量arrow_num与图片数组索引建立联系
var arrow_num = 0;
//获取父元素ol
var ol = document.querySelector('ol');
//获取图片数量
var imgs =document.getElementsByTagName('img');
//创建li元素 循环创建并添加
for (var i=0;i<imgs.length;i++) { //动态添加小圆圈
var li = document.createElement('li');
//把创建好的子元素添加到父元素中,动态添加
ol.appendChild(li);
}
// 获取所有的小圆圈对象
var circle_alls = ol.children;
//设置默认显示第一个小圆圈背景颜色
circle_alls[circle_num].style.backgroundColor = 'rgba(255,255,255,.4)';
//获取左箭头对象
var arrow_Left = document.getElementsByClassName('arrow_Left');
//获取右箭头对象
var arrow_Right = document.getElementsByClassName('arrow_Right');
//获取ul对象
var ul = document.querySelector('ul');
//克隆第一个到最后一个
//注意要用firstElementChild，用firstChild获取到是文本节点哈哈。
var lilast = document.getElementById("clone").firstElementChild.cloneNode(true);
//把lilast添加到ul的最后
ul.appendChild(lilast);
//获取所有的 li数组，获得其长度length
var li_lenth = ul.children;
//动态设置ul的width
ul.style.width = imgs[0].width * li_lenth.length +'px';
//添加自动轮播特效
//开启定时器
var timer = setInterval(function(){
arrow_Right[0].click()
},1000)
/*
* 给右边箭头注册点击事件
*/
arrow_Right[0].addEventListener('click',function(){
if (flage) {
flage = false;
circle_num++;
if(circle_num==6){
circle_num=0;
}
for(var i=0;i<circle_alls.length;i++){
circle_alls[i].style.backgroundColor = '#999';
}
circle_alls[circle_num].style.backgroundColor = 'rgba(255,255,255,.4)';
/*
* 务必注意不同执行顺序的不同结果
* 先加1后在执行
* 还是执行了在加一要注意区分
*/
if(arrow_num==6) {
ul.style.left = 0 ;
arrow_num = 0;
}
arrow_num++;
var target = -arrow_num * imgs[0].width;
animation(ul,target,function(){
flage = true;
});
}
})
/*
* 给左边边箭头注册点击事件
*/
arrow_Left[0].addEventListener('click',function(){
if (flage) {
//禁用连续点击事件
flage = false;
arrow_num--;
if(arrow_num<0) {
ul.style.left = 0 ;
arrow_num = 5;
}
var target = -arrow_num * imgs[0].width;
animation(ul,target,function(){
//打开开关
flage = true;
});
circle_num--;
if (circle_num <0){
circle_num = 5
}
for(var i=0;i<circle_alls.length;i++){
circle_alls[i].style.backgroundColor = '#999';
}
circle_alls[circle_num].style.backgroundColor = 'rgba(255,255,255,.4)';
}
}
)
for (var i= 0 ;i<circle_alls.length;i++){
circle_alls[i].num = i;
//为每一个小圆圈注册点击事件
circle_alls[i].addEventListener('click',function(){
flage = true ;
arrow_num = this.num ;
circle_num = arrow_num
var target = -arrow_num * imgs[0].width;
animation(ul,target);
for(var i=0;i<circle_alls.length;i++){
circle_alls[i].style.backgroundColor = '#999';
}
circle_alls[arrow_num].style.backgroundColor = 'rgba(255,255,255,.4)';
})
}
//鼠标移入时候添加定时器，使得轮播停止
wrapper[0].addEventListener('mouseenter',function(){
//注意直接使用arrow_Right会报错，因为，它是返回的数组。直接拿不到值。
arrow_Right[0].style.display = 'block';
arrow_Left[0].style.display = 'block';
clearInterval(timer)
timer = null;
})
//鼠标移出时候添加定时器，使得轮播继续
wrapper[0].addEventListener('mouseleave',function(){
arrow_Right[0].style.display = 'none';
arrow_Left[0].style.display = 'none';
timer = setInterval(function(){
arrow_Right[0].click()
},1000)
})
//tools.js 文件代码，封装的缓动动画函数
function animation(obj,target,callback) { //callback接受的是一个函数
//添加一个清除定时器语句
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//步长值写到定时器里面,这样每隔一段时间执行定时器，就修改步长值。
//var step = (target - obj.offsetLeft) /10;
//给步长值向上取整
//var step = Math.ceil((target - obj.offsetLeft) /10);
//考虑到往后执行动画的情况。
/*var step = (target - obj.offsetLeft) /10;
step = step>0?Math.ceil(step) : Math.floor(step);*/
//var step = Math.ceil((target - obj.offsetLeft) /10) || Math.floor((target - obj.offsetLeft) /10);
var step = Math.floor((target - obj.offsetLeft) /10) || Math.ceil((target - obj.offsetLeft) /10);
if(obj.offsetLeft == target) {
//停止动画效果
clearInterval(obj.timer);
//回到函数写道定时器里面结束位置，否则就是一个普通函数了
//添加回调函数
if(callback){
callback();
}
}
//把每次加1 这个步长改为一个慢慢变小的值 步长公式 （目标值-当前值）/10；
//把1改为变量step
//缓动动画步长是变化的
obj.style.left = obj.offsetLeft + step + 'px';
},10)
}
</script>
</body>
</html>
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
