存一个H5箭头制作方法
程序员文章站
2022-03-03 19:55:55
/*轮播图左右箭头切换*/ $(".dalao .jiantou .left").click(function () { time--; // console.log(time); if (time >= 0) { $(".dalao .point li").eq(time).addClass("active").siblings().removeClass("active"); $(".dalao...
/*轮播图左右箭头切换*/
/*设置一个变量作轮播图的切换*/
var time = 0;
/*左箭头点击事件*/
$(".dalao .jiantou .left").click(function () {
time--;
// console.log(time);
if (time >= 0) {
/*这里是轮播图点的样式变化控制,以及图片的切换控制,下同*/
$(".dalao .point li").eq(time).addClass("active").siblings().removeClass("active");
$(".dalao #datu li").eq(time).show().siblings(".dalao #datu li").hide();
} else {
time = 4;
$(".dalao .point li").eq(time = 4).addClass("active").siblings().removeClass("active");
$(".dalao #datu li").eq(time = 4).show().siblings(".dalao #datu li").hide();
}
});
/*这里设置的是鼠标进入箭头,则清除计时器,让轮播图停止轮播*/
$(".dalao .jiantou .left").mouseover(function () {
clearInterval(timeplay);
$(".dalao .jiantou .left").css("opacity", "0.4")
}).mouseout(function () {
/*鼠标移走后,则重新设置计时器函数,图片继续轮播*/
timer();
$(".dalao .jiantou .left").css("opacity", "0.2")
})
$(".dalao .jiantou .right").click(function () {
time++;
// console.log(time);
if (time < 4) {
$(".dalao .point li").eq(time).addClass("active").siblings().removeClass("active");
$(".dalao #datu li").eq(time).show().siblings(".dalao #datu li").hide();
} else {
time = 0;
$(".dalao .point li").eq(time = 0).addClass("active").siblings().removeClass("active");
$(".dalao #datu li").eq(time = 0).show().siblings(".dalao #datu li").hide();
}
});
$(".dalao .jiantou .right").mouseover(function () {
clearInterval(timeplay);
$(".dalao .jiantou .right").css("opacity", "0.4")
}).mouseout(function () {
timer();
$(".dalao .jiantou .right").css("opacity", "0.2")
})
本文地址:https://blog.csdn.net/weixin_44696269/article/details/107376499
推荐阅读