html+js |
|
|
<div class="content"> | |
<div class="title"> | |
<img src="/templets/4hlcn/images/index/index-02.png" alt=""> | |
<div> | |
<h1>秦岳风采</h1> | |
<h4>(近1000名金牌律师为您解答)</h4> | |
</div> | |
<img src="/templets/4hlcn/images/index/index-01.png" alt=""> | |
</div> | |
</div> | |
</div> | |
<div id="surroundings"> | |
<div class="left"> | |
<img src="/templets/4hlcn/images/index/left-btn.png" alt=""> | |
</div> | |
<div class="content"> | |
<div class="list"> | |
<ul id="surroundings_list" style="width: 5226px; left: -2806px;"> | |
<li><img src="/templets/4hlcn/images/index/index-52.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-53.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-54.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-55.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-52.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-53.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-54.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-55.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-52.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-53.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-54.png"></li> | |
<li><img src="/templets/4hlcn/images/index/index-55.png"></li> | |
</ul> | |
</div> | |
</div> | |
<div class="right"><img src="/templets/4hlcn/images/index/right-btn.png" alt=""></div> | |
</div> | |
<script> | |
hj_num = $('#surroundings_list li').length; | |
$('#surroundings_list').css('width',(hj_num-4)*294); | |
var hj_i=1; | |
function hj_banndis(){ | |
if(hj_i>=(hj_num-3)*294){ | |
hj_i=0; | |
} | |
$('#surroundings_list').css('left',-hj_i); | |
hj_i++; | |
} | |
var hj_b = setInterval("hj_banndis()",30); | |
$("#surroundings .list").hover(function(){ | |
clearInterval(hj_b); | |
},function(){ | |
hj_b = setInterval("hj_banndis()",30); | |
}); | |
</script> |
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 下----秦岳风采-----的效果