轮播图前期准备工作：
1、HTML元素集合转数组的方法，Array.prototype.slice.call("元素集合")
2、js中自定义属性和原生属性的获取方法，自定义属性以data-为前缀 ，可以obj.dataset 方法获取自定义属性值，
如obj.dataset.id 即可以说的 元素属性名为 data-id 元素的属性值 。
3、js中原生属性的获取方法，对象名后跟对象原生属性即可，如 obj.id obj.value
4、obj,getAttribute("属性名") 方式是获取HTML元素属性的通用方法，即可在原生属性上使用，也可在自定义属性上使用。
5、obj.setAttribute(“属性名”,“属性值”)可以用于给HTML元素属性设置新增属性名以及对应的属性值
6、HTML元素的Class样式，既可以通过第 5步讲解的obj.getAttribute( )方法获得，也有更简便快捷的方法获取，推荐更为
简便的获取方法是 obj.classList( )方法，classList 方法可以快速【获取】或者【新增】【更新】【删除】【包含】HTML元素的Class样式值，甚至可以完成两个样式之间的自动切换，具体的使用方法如下：
<1>获取 obj.classList.value <2>新增 obj,classList.add(“样式名 ")
<3>更新 obj.classList.replace("原样式","新样式") <4>删除 obj.classList.remove("样式名1","样式名N")
<5>自动切换 obj.classList.toggle("样式名") <6>obj.classLst.contadins("样式名")
7、定时器，定时器分为一次性定时器设置和多次定时器设置，一次性定时器为 setTimeout("参数或JS函数","等待时长，毫秒)
多次定时器 setInterval()
8、一次性定时器的应用，3秒后跳转 setTimeout(function(){ location.assign("http://www.baidu.com") },3000),说明：assign( )加载一个新的文档。
9、多次定时器，又称间歇性定时器，使用中可关闭打开，样例，
btn_play.addEventListener("click",play,false);
function play(){
timer = setInterval(function(){
var index = Math.ceil(Math.random()*3);
img.src="./images/banner"+index+".jpg";
console.log(img.src);
},1000);
}
10、定时器的终止和取消，一次性定时器取消 clearTimeoue("定时器名") 间歇定时器取消 clearInterval("定时器名")
11、事件模拟器，是指由机器或者系统模拟人操作行为，触发事件的执行。常见的使用步骤分两步，1.事件生成 2.分配事件
12、事件模拟的样例：广告点击，影响收入
var div = document.getElementsByTagName("div").item(0);
var span =document.getElementsByTagName("span").item(1);
var num = 0 ;
var price = 0.5;
//事件模拟
var click =new Event("click");
setInterval(function(){
div.dispatchEvent(click); //广告联盟div发生点击事件
num +=1;
console.log(num);
span.innerHTML = "广告收入:"+"<span style='color:red;'>"+price*num+"元</span>"
},1000)
13、轮播图效果的规划<1>梳理逻辑流程，<2>确定实现方法 <3>拓展新方法使用可能
14、涉及新的方法。构建js新数组 Array.push( ) 数组元素包含对比 Array.include( )
15、轮播图实现构思：获取待显示图片，根据自定义属性data-indw生成一个索引数组， 对比当前显示图片，获得当先显示图片的索引ID，同时去掉当前图片的显示样式属性 active ，根据之前获得索引ID判断，当前元素下一个元素的索引ID是否存在，如果存在，为下一个元素的样式设置active属性，如果下一个元素索引不存在，当即将下一个元素的索引初始化。相当于图片重新进入循环是喜欢，以上为下一页按钮涉及原理，上一页向原地基本于此相当，仅仅在最后对比之前将原有获得HTML数组表反序排列，即可以实现 前一页的功能
16、关于轮播图渐显示的实现，大致由两种方法，
<1>在给要显示的页添加active类之前，多设置几个一次性定时器，每个定时器执行一个不同图片透明度，直至最终的添 加的active样式。
<2> 在CSS样式中，找渐变货动画过程，通过页面样式的更新来实现图片的渐进限制
17、轮播图实战图
18、实战效果：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS轮播图实战</title>
</head>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.box {
/*定位父级*/
position: relative;
width: 1000px;
height: 350px;
margin: 0 auto;
}
.box .slider {
width: 1000px;
height: 350px;
display: none;
}
.box .slider.active{
display: block;
}
.box .point-list {
position: absolute;
/*绝对定位的环境下的水平居中方式*/
left: 50%;
margin-left: -38px;
top: 310px;
}
.box .point-list .point {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
background-color: white;
border-radius: 100%;
}
.box .point-list .point.active {
background-color: black;
}
.box .point-list .point:hover {
cursor: pointer;
}
.skip {
position: absolute;
top: 140px;
display: inline-block;
width: 40px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: lightgray;
color: white;
opacity: 0.5;
font-size: 36px;
}
.box .prev{
left: 0;
}
.box .next{
right: 0;
}
.box .skip:hover {
cursor: pointer;
opacity: 0.7;
color: black;
}
</style>
<body>
<div class="box">
<img src="./images/banner1.jpg" data-index="1" class="slider active" alt="" >
<img src="./images/banner2.jpg" data-index="2" class="slider" alt="" >
<img src="./images/banner3.jpg" data-index="3" class="slider" alt="" >
<div class="point-list">
<!--<span class="point active" data-index="1"></span>-->
</div>
<span class="skip prev"><</span>
<span class="skip next">></span>
</div>
<script>
//小圆点显示
//获取有多少图片 生成对应数量的小圆点
var imgs = document.images;
//图片列表中的HTML元素转换成数组
var imgArr = Array.prototype.slice.call(imgs,0);
//获取原点父节点
var pointList = document.getElementsByClassName("point-list").item(0);
imgArr.forEach(function(img,index){
var span = document.createElement("span");
if(index == 0){
span.classList.add("point","active");
span.setAttribute("data-index","index");
}
span.classList.add("point");
span.dataset.index = img.dataset.index;
pointList.appendChild(span);
});
//小圆点显示结束
//添加小圆点点击事件开始
//获取小圆点元素并转换成数组
var points = document.getElementsByClassName("point");
//数组转换
var pointArr = Array.prototype.slice.call(points,0);
pointArr.forEach(function (spot){
spot.addEventListener("click",setImgActive,false);
});
function setImgActive(event){
imgArr.forEach(function(img){
//自定义属性对比 data-index 相等则显示
if(event.target.dataset.index == img.dataset.index){
//先去掉所有图片显示的样式 active
imgArr.forEach(function(img){img.classList.remove("active");});
//为当前索引相等的图片加上active样式
img.classList.add("active");
//同上原理
pointArr.forEach(function(spot){spot.classList.remove("active");});
event.target.classList.add("active");
}
})
}
// 添加圆点点击事件结束
// 前后翻页功能
// 获取按钮
var skip =document.getElementsByClassName("skip");
//按钮监听 item(0)向上一个 item(1)向下一个
skip.item(0).addEventListener("click",upImg,false);
skip.item(1).addEventListener("click",nextImg,false);
//下一页功能
function nextImg(){
//捕获当前正在显示的图片
var num = imgArr.length;
var imgIndex = 0;
var indexArr = [];
//生成以data-index元素组成的 数组 用于判断下一幅图是否存在。
for (j=0;j<num;j++){
//索引数组 indexArr
var a = imgArr[j].dataset.index;
indexArr.push(a);
}
//生成用于匹配判断的自定义索引值Index
for(i=0;i<num;i++) {
if(imgArr[i].classList.contains("active")){
// console.log("第"+i+"次"+imgArr[i].dataset.index);
imgArr[i].classList.remove("active");
if(i+1<num){
imgIndex = imgArr[i+1].dataset.index;
// console.log("第一个imgIndex:"+imgIndex+" i是"+i);
}else{
imgIndex = "1";
}
}
}
//下一个索引值 假定存在
if(indexArr.includes(imgIndex)){
imgArr.forEach(function(img){
if( img.dataset.index === imgIndex){
// console.log("第二个imgIndex:"+imgIndex+" index是"+index);
img.classList.add("active");
pointArr.forEach(function(spot){
spot.classList.remove("active");
if(spot.dataset.index==imgIndex){
spot.classList.add("active");
}
});
}
})
}
}
//前一页功能
function upImg(ev){
//捕获当前正在显示的图片
var num = imgArr.length;
var imgIndex = 0;
var indexArr = [];
//生成以data-index元素组成的 数组 用于判断下一幅图是否存在。
for (j=0;j<num;j++){
//索引数组 indexArr
var a = imgArr[j].dataset.index;
indexArr.push(a);
}
//生成用于匹配判断的自定义索引值Index
for(i=0;i<num;i++) {
if(imgArr[i].classList.contains("active")){
// console.log("第"+i+"次"+imgArr[i].dataset.index);
imgArr[i].classList.remove("active");
if(i+1<num){
imgIndex = imgArr[i+1].dataset.index;
// console.log("第一个imgIndex:"+imgIndex+" i是"+i);
}else{
imgIndex = "1";
}
}
}
//下一个索引值 假定存在
//反转数组排序，实现向前翻页
indexArr =indexArr.reverse();
if(indexArr.includes(imgIndex)){
imgArr.forEach(function(img){
if( img.dataset.index === imgIndex){
// console.log("第二个imgIndex:"+imgIndex+" index是"+index);
img.classList.add("active");
pointArr.forEach(function(spot){
spot.classList.remove("active");
if(spot.dataset.index==imgIndex){
spot.classList.add("active");
}
});
}
})
}
}
//模拟轮播功能 鼠标划入取消轮播 鼠标划出开始播放
var box =document.getElementsByClassName("box").item(0);
box.addEventListener("mouseout",start, false);
box.addEventListener("mouseover",stop, false);
var times = null;
function start(){
var click =new Event("click");
times=setInterval(function(){
skip.item(1).dispatchEvent(click);
},2000)
}
function stop(){
clearInterval(times);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
