Web APIs---16. 移动端端网页特效(2)

4. 移动端常用开发框架

4.1 框架的概念

4.2 用bootstrap做轮播图

• (1)搭建文件夹,文件夹06-bootstrap轮播图文件夹里面的bootstrap文件夹是下载下来的bootstrap框架
  

• (2)在新建的index.html文件中写入初始样式和结构

• 打开bootstrap官网--->点击导航栏上的中文文档-->JavaScript插件：https://v3.bootcss.com/javascript/
• 所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）,之后再引入js

• 点击该网站右侧菜单的Carousel,出现轮播图，复制其结构部分

  
  

    

    

    

  

  
  

    

      
      

        ...
      
    
    

      
      

        ...
      
    
    ...
  

  
  
    
    Previous
  
  
    
    Next
  

• 大致分析每个结构代表的是什么，在做内容做适当修改

    

        
        

            
            

                

                

                

            

            
            

                

                    
                    

                        这是我的图片1
                    
                
                

                    
                    

                        这是我的图片2
                    
                
                

                    
                    

                        这是我的图片3
                    
                
            

            
            
                
                Previous
            
            
                
                Next
            
        
        

    

• 出现问题：复制的这一段代码比我们自己写的父盒子.focus要高一点。所以还要将里面的内容修改的和父亲一样高。修改方式：检查元素-->选中复制过来的结构中最大的那个盒子，找到该盒子的类名（.carousel），我们对类名进行修改就可以了

• 修改播放时间(将页面往下滑倒Method)复制其中的修改时间代码

$('.carousel').carousel({
  interval: 2000
})

• 复制到index.html里面的script中

• 最终结构如下

    
    
    
    
    
    
    



    

        
        

            
            

                

                

                

            

            
            

                

                    
                    

                        这是我的图片1
                    
                
                

                    
                    

                        这是我的图片2
                    
                
                

                    
                    

                        这是我的图片3
                    
                
            

            
            
                
                Previous
            
            
                
                Next
            
        
        


        
    

4.3 bootstrap插件的使用步骤

4.4 阿里百秀轮播图制作

• 引入相关js文件

• 复制html结构，并替换原先代码(下图被选中的位置)
  

• 并做如下修改

    


        
        
        

            

                
                

                    阿里百秀1
                
            
            

                
                

                    阿里百秀2
                
            
            

                
                

                    阿里百秀3
                
            
        

        
        
            
            Previous
        
        
            
            Next
        
    
    

• 样式修改：

.news li>a {/*只把li里面亲儿子的a改成一下样式  这样我们复制过来的结构里面的a就不受该样式的影响*/
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

/*出现宽高不一致的情况，那么继续对复制过来的最大的一个盒子的框进行修改，让它与我们自己的那一个包含它们的盒子的宽高一致*/
.news li:nth-child(1) {
    width: 50%;
    height: 266px;
}

.carousel,
.carousel img {
    width: 100%;
    height: 266px!important;
}

.carousel-caption {
    line-height: 41px;
    font-size: 16px!important;
    padding: 0!important;
}

.news li a p,
.carousel-caption {/*让轮播图模块的标题和其他小li风格一致*/
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 41px;
    padding: 5px 10px;
    margin-bottom: 0;
    background: rgba(0, 0, 0, .5);
    font-size: 12px;
    color: #fff;
}

• 复制JS模块，调整时间：见结构部分