原生js实现简单图片轮播效果+用bootstrap4框架实现轮播图 对比

原生js实现图片轮播

效果：

代码：

html+css：

js：

window.onload=function(){
    lunBo("lbimg","lbbtn");
}
    //轮播图函数
function lunBo(lbimg,lbbtn){
    var lbimgs=document.getElementsByClassName(lbimg);
    var lbbtns=document.getElementsByClassName(lbbtn);
    //图片及标识键设置函数（轮播到当前页面设置透明度为1，标识按钮设置为红色，其他页面隐藏）
    function initSet(index){
        for(var i=0;i

bootstrap4实现图片轮播

效果：

代码：

  

    
 
      
      

        

        

        

        

      
     
      
      

        

          
          

            
Marvel
            
漫威标识！一些描述一些描述一些描述
          
        
        

          
          

            
钢铁侠
            
一些描述一些描述一些描述一些描述
          
        
        

          
          

            
雷神
            
一些描述一些描述一些描述一些描述
          
        
        

          
          

            
灭霸
            
一些描述一些描述一些描述一些描述
          
        
      
     
      
      
        
      
      
        
           
    
  

jquery实现图片轮播切换

效果：

代码：（粘贴在这里太冗长，我打包在下面了）

对比

自己写轮播图效果的确很麻烦，但是可以锻炼一定的技能与熟练度，而且可以实现一些自定义效果（像是用jquery来写出如上例效果）。
当然用框架来写轮播图就方便多了，只是自定义效果不太好加，不过熟练之后用框架的确是省时间。

最后放一下轮播图的工程文件供跟我一样的初学者参考学习：

https://download.csdn.net/download/weixin_43388844/10841313