69 lines
1.4 KiB
JavaScript
69 lines
1.4 KiB
JavaScript
var timer;
|
|
var LiArr = document.querySelectorAll(".yd li");
|
|
|
|
$(".dh_right").onclick = function () {
|
|
OffSetDistance(-520)
|
|
changeYd()
|
|
}
|
|
|
|
$(".dh_left").onclick = function () {
|
|
OffSetDistance(520)
|
|
changeYd()
|
|
}
|
|
|
|
function OffSetDistance(nums) {
|
|
var Offset = parseInt($(".lb_img").style.left) + nums;
|
|
$(".lb_img").style.left = `${Offset}px`
|
|
|
|
if (Offset < -1040) {
|
|
console.log("没有")
|
|
$(".lb_img").style.left = "0px";
|
|
}
|
|
|
|
if (Offset > 0) {
|
|
$(".lb_img").style.left = "-1040px";
|
|
}
|
|
}
|
|
|
|
function changeYd() {
|
|
var index = Math.abs(parseInt($(".lb_img").style.left)) / 520;
|
|
LiArr.forEach(function(val){
|
|
val.className = ""
|
|
})
|
|
LiArr[index].className = "active"
|
|
}
|
|
|
|
function BindYdClick() {
|
|
LiArr.forEach(function(val,index){
|
|
val.onclick = function () {
|
|
LiArr.forEach(function(v){
|
|
v.className = ""
|
|
})
|
|
val.className = "active"
|
|
$(".lb_img").style.left = `${index * -520}px`;
|
|
}
|
|
})
|
|
}
|
|
|
|
$(".main").onmouseover = function () {
|
|
clearInterval(timer)
|
|
}
|
|
|
|
$(".main").onmouseout = function () {
|
|
autoPlay()
|
|
}
|
|
|
|
function autoPlay() {
|
|
timer = setInterval( function(){
|
|
OffSetDistance(-520)
|
|
changeYd()
|
|
// $(".dh_right").onclick()
|
|
}, 1000 )
|
|
}
|
|
|
|
autoPlay()
|
|
BindYdClick()
|
|
|
|
function $(className){
|
|
return document.querySelector(className)
|
|
} |