最近pc项目有两处一样的轮播图 有左右点击按钮及底部小圆点
接下来 代码奉上:
css的写法,可以让子元素根据父元素定位,让它们定位在同一位置,再给子元素根据顺序加上z-index值,第一个最大,一次减小;
左右两侧点击按钮直接根据父元素定位,z-index值最大;
js代码如下:
// 轮播图 const Banner = function () { const left = $('#clickLeft') const right = $('#clickRight') var items = $('#banner .cost-item'); var points = $('#clickPoint').children(); Move(left,right,items,points) } const BannerMuch = function () { const left = $('#MuchLeft') const right = $('#MuchRight') var items = $('.use-box .hist'); var points = $('#MuchPoint').children(); Move(left,right,items,points) } function Move(left,right,items,dots) { var index = 0; var str = 0; var len = items.length; //点击左侧按钮的函数 left.click(function(){ $(dots).removeClass("check-point"); if(str === 0){ $(items[str]).fadeOut(300); str = len-1; $(items[str]).fadeIn(300); $(dots[str]).addClass("check-point"); index = str; }else{ $(items[str]).fadeOut(300); str --; $(items[str]).fadeIn(300); $(dots[str]).addClass("check-point"); index = str; } }); //点击右侧按钮的函数 right.click(function(){ $(dots).removeClass("check-point"); if(str === len-1){ $(items[str]).fadeOut(300); str = 0; $(items[str]).fadeIn(300); $(dots[str]).addClass("check-point"); index = str; }else{ $(items[str]).fadeOut(300); str ++; $(items[str]).fadeIn(300); $(dots[str]).addClass("check-point"); index = str; } }) } Banner() BannerMuch()
我这个是底部小圆点不带点击效果的 ,如果想要小圆点也要点击效果的话那可以参照下面的代码:
//小圆点
$(".dot span").click(function(){
var num = $(this).index();
$(dots).removeClass("active");
$(dots[num]).addClass("active");
$(items).fadeOut(1500);
$(items[num]).fadeIn(1500);
index = num;
})
ok啦 代码分享完毕,希望可以帮助到各位小可耐们