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

最新推荐文章于 2022-11-01 11:27:13 发布

原创最新推荐文章于 2022-11-01 11:27:13 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客展示了如何利用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%;}