存一个H5箭头制作方法

2022-08-02,,

/*轮播图左右箭头切换*/
	/*设置一个变量作轮播图的切换*/
	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

《存一个H5箭头制作方法.doc》

下载本文的Word格式文档,以方便收藏与打印。