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

这篇博客展示了如何利用jQuery实现从左向右的无缝轮播效果,主要涉及CSS样式设计,包括轮播区域的布局、标题样式、图片位置等。通过提供的代码片段和效果参考链接,读者可以了解并实现类似秦悦风采展示的轮播样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 下----秦岳风采-----的效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值