利用jQuery实现从左向右无缝轮播样式

html+js

 

 
 
 
 
 

秦岳风采

 

(近1000名金牌律师为您解答)

 
 
 
 
 
 
 
 
 
 
 
 
     
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
     
     
     
     
     

     

    css

    /*秦悦风采*/
    #show{width:100%; height:120px; margin-top:66px;}
    #show .content{ width:1200px; margin:0 auto;}
    #show .content h5{font-size:36px; color:#fff; font-family:'微软雅黑'; text-align:center; padding-top:42px;}
    #show .content h5 span{font-size:16px; color:#fff; font-family:'微软雅黑'; text-align:center; font-weight:500; line-height:44px;}
    #show .content .title{ text-align:center; display: flex; justify-content: space-between;color:#333;}
    #show .content .title img:first-child{ margin-top:77px; display: inline-block;height: 13px;width:462px;}
    #show .content .title img:last-child{ margin-top:77px; display: inline-block;height: 13px;width:462px;}
    #show .content .title div{width:270px; height: 70px;margin-top:45px;}
    #show .content .title div h1{color:#a30202;}
    #show .content .title div h4{color:#9a9a9a;font-weight: unset;}
    #surroundings{width:100%; height:290px;margin-top:20px;display: flex;overflow: hidden;justify-content: center;}
    #surroundings .left{width:363px;height: 100%;text-align: right}
    #surroundings .left img{width:46px;height: 156px;margin-top:70px;margin-right: 90px;}
    #surroundings .right{width:363px;height: 100%;text-align: left}
    #surroundings .right img{width:46px;height: 156px;margin-top:70px;margin-left: 90px;}
    #surroundings .content{ width:1200px; margin:0 auto;}
    #surroundings .content .list{width:100%; height:260px; padding-top:25px; overflow:hidden;}
    #surroundings .content .list ul{ position:relative;}
    #surroundings .content .list ul li{ float:left; margin-right:6px; width:232px;}
    #surroundings .content .list ul li img{ width:100%;}

    效果可参考 http://www.sxqylawyer.cn/index.html 下----秦岳风采-----的效果

    你可能感兴趣的:(利用jQuery实现从左向右无缝轮播样式)