轮播图：分为五大步（轮播图布局，左右切换，无缝轮播，自动切换，焦点切换）进行书写 ，相同的进行函数封装，调用方法，也可以用插件进行书写，这里写的是原生js轮播图。
1 轮播图布局
原生js轮播图
2 自动切换
// 获取元素
var banner = document.getElementById("banner"),
bannerWrap = banner.getElementsByClassName("bannerWrap")[0],
oDivs = bannerWrap.getElementsByTagName("div"),
oSpans = banner.getElementsByTagName("span"),
oBtns = banner.getElementsByTagName("a");
// 图片切换
// 自定义变量
var n = 0; //表示当前展示的是第几张图片 默认值0展示第一张
// 设置定时器
setInterval(function(){
// n的只自身加1
n++;
/*
左右版轮播图操作的是bannerWrap(图片包裹层)的left值
n left
0 - > 0
1 - > -600
2 - > -1200
3 - > -1800
*/
//判断
if(n == oDivs.length){
n = 0;
}
// 设置值
// bannerWrap.style.left = -n * 600 + 'px';
move(bannerWrap,"left",90,-n*600);
},3000);
3 无缝轮播
// 获取元素
var banner = document.getElementById("banner"),
bannerWrap = banner.getElementsByClassName("bannerWrap")[0],
oDivs = bannerWrap.getElementsByTagName("div"),
oSpans = banner.getElementsByTagName("span"),
oBtns = banner.getElementsByTagName("a");
// 图片切换
// 自定义变量
var n = 0; //表示当前展示的是第几张图片 默认值0展示第一张
var timer = null; //保存当前这个定时器的返回值
// 自动轮播实现
function autoPlay() {
// n的只自身加1
n++;
/*
左右版轮播图操作的是bannerWrap(图片包裹层)的left值
n left
0 - > 0
1 - > -600
2 - > -1200
3 - > -1800
4 - > -2400
*/
// 判断
// 当n的值是5的时候，立马将bannerWrap的left值赋值为0
if (n == oDivs.length) {
bannerWrap.style.left = "0px";
// 紧接着从第一涨运动到第二张
n = 1;
}
move(bannerWrap, "left", 90, -n * 600);
// 焦点对齐
// 先清空所有的激活样式
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
// 再让当前n对应的这个span有激活样式
// 展示结构中的第五张相当于用户看到的第一张 第一个焦点有激活样式
oSpans[n == 4 ? 0 : n].className = "active";
}
// 设置定时器
timer = setInterval(autoPlay, 3000);
// 移入暂停
banner.onmouseover = function () {
// 清除定时器
clearInterval(timer);
}
// 离开继续
banner.onmouseout = function () {
// 设置定时器 将当前定时器的返回值保存到全局变量timer中
timer = setInterval(autoPlay, 3000);
}
4 左右切换
// 获取元素
var banner = document.getElementById("banner"),
bannerWrap = banner.getElementsByClassName("bannerWrap")[0],
oDivs = bannerWrap.getElementsByTagName("div"),
oSpans = banner.getElementsByTagName("span"),
oBtns = banner.getElementsByTagName("a");
// 图片切换
// 自定义变量
var n = 0; //表示当前展示的是第几张图片 默认值0展示第一张
var timer = null; //保存当前这个定时器的返回值
/*
左右版轮播图操作的是bannerWrap(图片包裹层)的left值
n left
0 - > 0
1 - > -600
2 - > -1200
3 - > -1800
4 - > -2400
*/
// 自动轮播实现
function autoPlay() {
// n的只自身加1
n++;
// 判断
// 当n的值是5的时候，立马将bannerWrap的left值赋值为0
if (n == oDivs.length) {
bannerWrap.style.left = "0px";
// 紧接着从第一涨运动到第二张
n = 1;
}
move(bannerWrap, "left", 90, -n * 600);
// 焦点对齐
// 先清空所有的激活样式
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
// 再让当前n对应的这个span有激活样式
// 展示结构中的第五张相当于用户看到的第一张 第一个焦点有激活样式
oSpans[n == 4 ? 0 : n].className = "active";
// if (n == 4) {
// oSpans[0].className = "active";
// } else {
// oSpans[n].className = "active";
// }
}
// 设置定时器
timer = setInterval(autoPlay, 3000);
// 移入暂停
banner.onmouseover = function () {
// 清除定时器
clearInterval(timer);
}
// 离开继续
banner.onmouseout = function () {
// 设置定时器 将当前定时器的返回值保存到全局变量timer中
timer = setInterval(autoPlay, 3000);
}
// 左右切换
// 右
// oBtns[1].onclick =function(){
// autoPlay();
// }
// 函数名表示当前函数本身 将这个函数做事件赋值给onclick
oBtns[1].onclick = autoPlay;
// 左
oBtns[0].onclick = function () {
// n的值自身减1
n--;
// 判断
if (n == -1) {
// 让bannerWrap的left值为-2400 展示结构中的最后一张
bannerWrap.style.left = -(oDivs.length - 1) * 600 + 'px';
// 给n从新赋值 赋值为3
n = oDivs.length - 2;
}
// 调用move方法
move(bannerWrap, "left", 90, -n * 600);
// 焦点对齐
// 先清空所有的激活样式
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
// 再让当前n对应的这个span有激活样式
oSpans[n].className = "active";
}
5 焦点切换
// 获取元素
var banner = document.getElementById("banner"),
bannerWrap = banner.getElementsByClassName("bannerWrap")[0],
oDivs = bannerWrap.getElementsByTagName("div"),
oSpans = banner.getElementsByTagName("span"),
oBtns = banner.getElementsByTagName("a");
// 图片切换
// 自定义变量
var n = 0; //表示当前展示的是第几张图片 默认值0展示第一张
var timer = null; //保存当前这个定时器的返回值
// 自动轮播实现
function autoPlay() {
// n的只自身加1
n++;
// 判断
// 当n的值是5的时候，立马将bannerWrap的left值赋值为0
if (n == oDivs.length) {
bannerWrap.style.left = "0px";
// 紧接着从第一涨运动到第二张
n = 1;
}
move(bannerWrap, "left", 90, -n * 600);
// 焦点对齐
// 先清空所有的激活样式
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
// 再让当前n对应的这个span有激活样式
// 展示结构中的第五张相当于用户看到的第一张 第一个焦点有激活样式
oSpans[n == 4 ? 0 : n].className = "active";
}
// 设置定时器
timer = setInterval(autoPlay, 3000);
// 移入暂停
banner.onmouseover = function () {
// 清除定时器
clearInterval(timer);
}
// 离开继续
banner.onmouseout = function () {
// 设置定时器 将当前定时器的返回值保存到全局变量timer中
timer = setInterval(autoPlay, 3000);
}
// 左右切换
// 函数名表示当前函数本身 将这个函数做事件赋值给onclick
oBtns[1].onclick = autoPlay;
oBtns[0].onclick = function () {
// n的值自身减1
n--;
// 判断
if (n == -1) {
// 让bannerWrap的left值为-2400 展示结构中的最后一张
bannerWrap.style.left = -(oDivs.length - 1) * 600 + 'px';
// 给n从新赋值 赋值为3
n = oDivs.length - 2;
}
// 调用move方法
move(bannerWrap, "left", 90, -n * 600);
// 焦点对齐
// 先清空所有的激活样式
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
// 再让当前n对应的这个span有激活样式
oSpans[n].className = "active";
}
// 焦点切换
for (var i = 0; i < oSpans.length; i++) {
// 自定义属性
oSpans[i].index = i;
// 给当前这个span绑定事件
oSpans[i].onclick = function () {
// 判断
if (n == 4) {
// 让bannerWrap的left值为0
bannerWrap.style.left = "0px";
}
// 调用move方法
move(bannerWrap, "left", 90, -this.index * 600);
// 焦点对齐
// 先清空所有的激活样式
for (var i = 0; i < oSpans.length; i++) {
oSpans[i].className = "";
}
// 再让当前点击那个li有激活样式
this.className = "active";
n = this.index;
}
// 给n重新赋值
}
完整代码
左右版轮播图
调用的方法简单封装
/*
作用：获取经过浏览器渲染的样式
@para:参数
eleObj:元素对象
attr:样式属性
@return:返回值
样式值 (字符串)
*/
function getStyle(eleObj, attr) {
// 判断兼容性
if (eleObj.currentStle) { //IE
return eleObj.currentStle[attr];
} else { //IE以外其它浏览器
return getComputedStyle(eleObj)[attr];
}
}
/*
作用：匀速运动
@para:参数
eleObj:元素对象
attr:样式属性
step:步长 每次增加 或 减少那个固定的值
target:目标值
*/
function move(eleObj, attr, step, target) {
// 判断步长的正负
step = parseFloat(getStyle(eleObj, attr)) < target ? step : -step;
// 防止用户多次点击 设置多个定时器 先清除定时器
clearInterval(eleObj.timer);
// 设置定时器 将定时器的返回值保存到当前元素的自定义属性timer上
eleObj.timer = setInterval(function () {
// 先获取attr的当前样式值
var cur = parseFloat(getStyle(eleObj, attr));
// 在当前值的基础增加或减少一个固定的值
var speed = cur + step;
// 判断到达目标值清除定时器
if ((speed >= target && step > 0) || (speed <= target && step < 0)) {
// 给speed重新赋值 赋值为目标值
speed = target;
// 清除定时器
clearInterval(eleObj.timer);
}
// 设置
eleObj.style[attr] = speed + 'px';
}, 30);
}
/*
作用：生成某个范围的随机数
@para:
min:小值
max:大值
*/
function getRandom(min,max){
return Math.round(Math.random() * (max- min) + min);
}
