旋转木马褪色
时间：2023-03-30 17:56:28
CSS
<样式>.carousel{宽度：100%；高度：420px；填充：0px；保证金：0自动；位置：相对；&:hover{.carousel-btn-direction{显示：块；}}}.carousel-imgs{宽度：100%；高度：100%；填充：0px；边距：0px；列表样式：无；背景：白色；}.carousel-imgsli{宽度：100%；高度：100%；位置：绝对；z-索引：0；不透明度：0；}.carousel-imgsa{文本装饰：无；显示：块；高度：100%；}.carousel-imgsimg{宽度：100%；高度：100%；}.carousel-btn-direction{z-index:50;位置：绝对；顶部：45%；宽度：50px；高度：50px；边框：0px；大纲：无；背景：rgba(0,0,0,0.4);文本对齐：居中；白颜色;字体大小：34px；字体系列：“consolas”；边界半径：50%；游标：指针；显示：无；}.carousel-btn-left{左：50px；}.carousel-btn-right{右：50px；}.carousel-btnsbutton:hover{背景：rgba(0,0,0,0.5);}.carousel-btn-left{浮动：左；}.carousel-btn-right{浮动：正确；}
>< <脚本>$(函数(){汽车ousel();})functioncarousel(){/*获取元素对象*/var$carousel=$(".carousel");var$imgs=$(".carousel-imgsli");var$btnL=$(".carousel-btn-left");var$btnR=$(".carousel-btn-right");/*创建导航按钮*/var$item_group=$("
");$item_group.attr("class","carousel-items");$imgs.each(function(){$item_group.append("
");});$carousel.append($item_group);/*样式初始化*/$item_group.css({"padding":"0px","margin":"0px","list-style":"none","width":"auto","z-index":"50","position":"absolute","bottom":"30px"});$item_group.children().css({"width":"40px","height":"3px","padding":"0px","margin":"5px","background":"#fff","opacity":"0.6","cursor":"pointer","float":"left"});/*初始位置*/varindex=0;var$items=$(".carousel-itemsli");$items.eq(独立x).css("背景","rgba(0,0,0,0.4)");$imgs.eq(index).css("透明度","1");$imgs.eq(index).css("z-index","20");var$w=$(window).width();var$nowWidth=$(".carousel-items").width();var$nowCenter=($w-$nowWidth)/2;$item_group.css("左",$nowCenter);/*点击点击动作*/$btnL.click(function(){imgAnimator(false);});$btnR.click(function(){imgAnimator(true);});$items.click(function(){imgAnimator(true,$items.index($(this)));});setInterval(imgAnimator(true,index++),3000);/*图像动画*/functionimgAnimator(toNext,select){if(select!=null){index=select;}elseif(toNext==true){index=($imgs.length+index+1)%$imgs.length;}elseif(toNext==false){index=($imgs.length+index-1)%$imgs.length;}$items.css("背景","白色");$items.eq(index).css("背景","rgba(0,0,0,0.4)");$imgs.eq(独立x).css("z-index",20);/*淡入淡出*/$imgs.eq(index).animate({"opacity":"1"},"slow",function(){$imgs.css("z-index","0");$imgs.css("不透明度","0");$imgs.eq(index).css("z-index",10);$imgs.eq(index).css("不透明度","1");});}}
