137 lines
2.4 KiB
JavaScript
137 lines
2.4 KiB
JavaScript
// 自执行函数 形成闭包
|
|
|
|
(function () {
|
|
|
|
|
|
var left = $("action-left"),
|
|
right = $("action-right"),
|
|
timer,
|
|
index = 1,
|
|
offsetWidths = document.body.clientWidth;
|
|
|
|
|
|
left.onclick = function () {
|
|
if(index<=1) {
|
|
index = 6
|
|
}else {
|
|
index--
|
|
}
|
|
animation(offsetWidths)
|
|
clickChangeStop()
|
|
}
|
|
|
|
right.onclick = function () {
|
|
//alert("下一页")
|
|
if(index>5) {
|
|
index = 1
|
|
}else {
|
|
index++
|
|
}
|
|
animation(-offsetWidths)
|
|
clickChangeStop()
|
|
}
|
|
|
|
/**
|
|
* 切换小圆点样式
|
|
*/
|
|
function clickChangeStop(){
|
|
var li = $("swiper-spot").getElementsByTagName("li")
|
|
clearSpotActive()
|
|
li[index - 1].className = "active"
|
|
}
|
|
|
|
/**
|
|
* 鼠标悬浮的时候，清除自动播放
|
|
*/
|
|
$("banner").onmouseover = function () {
|
|
clearInterval(timer)
|
|
}
|
|
|
|
/**
|
|
* 鼠标离开的时候，开始自动播放
|
|
*/
|
|
$("banner").onmouseout = function () {
|
|
autoPlay()
|
|
}
|
|
|
|
/**
|
|
* 自动播放
|
|
*/
|
|
function autoPlay() {
|
|
timer = setInterval(function(){
|
|
right.onclick()
|
|
},2000)
|
|
}
|
|
|
|
/**
|
|
* 小圆点被点击时候切换轮播图
|
|
*/
|
|
function spotClick() {
|
|
var li = $("swiper-spot").getElementsByTagName("li")
|
|
for(let i = 0;i<li.length;i++){
|
|
|
|
li[i].onclick = function () {
|
|
index = i + 1
|
|
$("swiper-content").style.left = ( i * -offsetWidths ) + 'px'
|
|
// 先把所有的li的激活样式 active 都清除
|
|
clearSpotActive()
|
|
// 然后为你点击的元素li单独设置激活样式
|
|
li[i].className = "active"
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 清除所有小圆点上的激活样式
|
|
*/
|
|
function clearSpotActive() {
|
|
var li = $("swiper-spot").getElementsByTagName("li")
|
|
for(let i = 0;i<li.length;i++){
|
|
li[i].className = ""
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 动画切换函数
|
|
* @param {*} offset
|
|
*/
|
|
function animation (offset) {
|
|
var juli = parseInt($("swiper-content").style.left) + offset;
|
|
if(juli < getFullWidth()){
|
|
$("swiper-content").style.left = "0px"
|
|
} else if (juli > 0) {
|
|
$("swiper-content").style.left = getFullWidth() + 'px'
|
|
}else {
|
|
$("swiper-content").style.left = juli + 'px'
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* 获取最后一张图片的距离 图片数量 * 单个图片宽度
|
|
*/
|
|
function getFullWidth () {
|
|
let len = ($("swiper-content").getElementsByTagName("li").length) - 1
|
|
return len * - offsetWidths
|
|
}
|
|
|
|
|
|
/**
|
|
* 获取元素
|
|
* @param {*} className
|
|
*/
|
|
function $(className){
|
|
return document.getElementsByClassName(className)[0]
|
|
}
|
|
|
|
|
|
|
|
autoPlay()
|
|
spotClick()
|
|
|
|
|
|
})()
|
|
|
|
|