存一个H5箭头制作方法

最新推荐文章于 2023-07-06 15:55:34 发布

Raite31

最新推荐文章于 2023-07-06 15:55:34 发布

阅读量583

点赞数

分类专栏：自己经验文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44696269/article/details/107376499

版权

自己经验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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