欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

存一个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