利用jQuery實現從左向右無縫輪播樣式
|
html+js |
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%;}