动态轮播图制作_图片轮播gif制作-优快云博客

本文链接：https://blog.youkuaiyun.com/nobestnobest/article/details/128745686

文章描述了一个网页轮播图在浏览器中的动态效果不佳的问题，可能是由于CSStransition在不同浏览器的兼容性问题导致。作者尝试了调试代码和修改transition属性，但未见成效。解决方案是检查和优化代码以确保在各种浏览器上的兼容性，尤其是针对旧版本或非主流浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

例如：项目场景：网页的轮播图动态效果制作

问题描述

浏览器中网页的轮播图动态效果非常生硬
在这里插入图片描述

<div class="silder-content">
              	<div class="silder-content-outerNode">
              		 <ul class="silder-content-UlNode">
              			<li class='active'><img src="sasuke.png"></li>
                        <li><img src="火影.jpg"></li>
                        <li><img src="火影1.jpg"></li>
                        <li><img src="火影2.jpg"></li>
                        <li><img src="火影5.jpg"></li>
                        <li><img src="火影6.jpg"></li>
                        <li><img src="火影4.jpg"></li>
              		</ul> 
                    <ol class="silder-content-button">
                    	<li class='first active'><a href="#">脱口而出：3天地道忍术轻松会</a></li>
                        <li><a href="#">0元领取：上忍大神带你入🚪忍术</a></li>
                        <li><a href="#">高效提升：3节课练就螺旋丸</a></li>
                        <li><a href="#">限时免费：如何获取稳定投资收益</a></li>
                        <li><a href="#">忍术思维：25个经典忍术解析</a></li>
                        <li><a href="#">免费试听：鸣人大神教你练仙术</a></li>
                        <li class='bottom'><a href="#">新课特惠：网课变现全流程进阶课</a></li>
                    </ol> 
              	</div>
              </div>

.silder-content{height:360px;background:#000000;}
.silder-content .silder-content-outerNode{margin:0 auto;width:1208px;height:100%;position:relative;}
.silder-content .silder-content-outerNode .silder-content-UlNode{height:100%;width:100%;position:relative;}
.silder-content .silder-content-outerNode .silder-content-UlNode li{height:100%;width:100%;display:none;position:absolute;opacity:0;transition:0.49s;}
.silder-content .silder-content-outerNode .silder-content-UlNode li.active{display:block;opacity:0;height:100%;width:100%;position:absolute;}
.silder-content .silder-content-outerNode .silder-content-UlNode img{float:left;}
.silder-content .silder-content-outerNode .silder-content-button{background: rgba(0,0,0,0.4);width:280px;height:320px;position:absolute;right:0;top:20px;border-radius:3px;}
.silder-content .silder-content-outerNode .silder-content-button li{height:40px;text-indent:20px;font-size:15px;float:left;line-height: 40px;}
.silder-content .silder-content-outerNode .silder-content-button li a{color:#aaaaaa;height:100%;float:left;}
.silder-content .silder-content-outerNode .silder-content-button li a:hover{color:#30c638;}
.silder-content .silder-content-outerNode .silder-content-button li.first{margin-top:23px;}
.silder-content .silder-content-outerNode .silder-content-button li.active a{color:#30c638;}
 .silder-content .silder-content-outerNode .silder-content-button li.active{background: url('箭头.png') no-repeat 10px center;}

(function(){
var lun = {

// 轮播图内容
"silder":function(){
	      var timer =null;
          var allSilderButton = document.getElementsByClassName('silder-content-button')[0];
          var allLi = allSilderButton.children;
          var silderContentNode =document.getElementsByClassName('silder-content')[0];
          var allsildercontent=document.getElementsByClassName('silder-content-UlNode')[0].children;
          var colorArr=['#000000','#3c2b21','#757f89','#32261a','#feec4c','#e6e6e6','#000000'];
          allsildercontent[0].style.opacity=1;
          for(var i=0;i<allLi.length;i++)
          {
          	allLi[i].index =i;
          	allLi[i].onmouseover = function(){
          		clearInterval(timer);
          		timer =setTimeout(function(){
          		 for(var i=0;i<allLi.length;i++)
          		 { 
          		 	allsildercontent[i].className = '';
          		 	allsildercontent[i].style.opacity = '0';
          		 	if(allLi[i].className.indexOf('first')!=-1)
          		 	{
                       allLi[i].className = 'first';
          		 	}
          		 	else
          		 	{
          		 		allLi[i].className = '';
          		 	}
          		 }
                 
                  allsildercontent[this.index].className = 'active';
                  setTimeout(function(){
                     allsildercontent[this.index].style.opacity='1';
                 }.bind(this),0);
                  silderContentNode.style.backgroundColor = colorArr[this.index];
          		 this.className+=' active';
          	}.bind(this),500)
          }
}
}
};

//轮播图函数调用
lun.silder();

})();