css+js最简单手风琴幻灯片代码

<div class="breadcumb_dealer">						
		<h2><a href="#">производству сланца</a></h2> 						
		</div>

<div class="dh sfq">
<ul>
	<li class="curr">
		<a href="javascript:;"><img src="https://www.xgncrusher.ru/static/upload/image/20240629/1719641323258138.jpg" alt=""></a>
		<div class="layer">
			<p class="p1 col1">Дробилка</p>
			<p class="p2"><b class="col2">Дробилка</b></p>
		</div>
	</li>
	<li>
	<a href="javascript:;"><img src="https://www.xgncrusher.ru/static/upload/image/20240415/1713165355292284.jpg" alt=""></a>
		 <div class="layer">
			<p class="p1 col1">Мобильная дробилка</p>
			<p class="p2"><b class="col2">Мобильная дробилка</b></p>
		</div>
	</li>
	<li>
	<a href="javascript:;"><img src="https://www.xgncrusher.ru/static/upload/image/20240415/1713165353606508.jpg" alt=""></a>
		 <div class="layer">
		   <p class="p1 col1">Вертикальная дробилка</p>
			<p class="p2"><b class="col2">Вертикальная дробилка</b></p>
		</div>
	</li>
	<li>
	<a href="javascript:;"><img src="https://www.xgncrusher.ru/static/upload/image/20240415/1713164710133629.jpg" alt=""></a>
		 <div class="layer">
			<p class="p1 col1">Мельница</p>
			<p class="p2"><b class="col2">Мельница</b></p>
		</div>
	</li>
	<li>
	<a href="javascript:;"><img src="https://www.xgncrusher.ru/static/upload/image/20240415/1713164713553055.jpg" alt=""></a>
		 <div class="layer">
			<p class="p1 col1">Обогатительное оборудование</p>
			<p class="p2"><b class="col2">Обогатительное оборудование</b></p>
		</div>
	</li>
	<li>
	<a href="javascript:;"><img src="https://www.xgncrusher.ru/static/upload/image/20240415/1713163925635111.jpg" alt=""></a>
		 <div class="layer">
			<p class="p1 col1">Вспомогательные устройства</p>
			<p class="p2"><b class="col2">Вспомогательные устройства</b></p>
		</div>
	</li>
</ul>
</div>

<script src="static/js/jquery.js"></script>//(v2.1.4版)
<script type="text/javascript">
$(function(){
	  //״̬
	  jQuery('.dh ul li.curr').animate({width:'356px'},'slow');
	  jQuery('.dh ul li.curr .layer').animate({height:'60px'},'slow');
	  jQuery('.dh ul li.curr .layer .p1').animate({left:'-200%'},'slow');
	  jQuery('.dh ul li.curr .layer .p2').animate({right:'145px'},'slow');

	  jQuery('.sfq ul li').hover(function(){
		
		 var _index = $(this).index();

		 $(this).addClass('curr')
		 .stop()
		 .animate({
			width:'356px'
		 },'slow')
		 .siblings()
		 .stop()
		 .animate({
			width:'162px'
		 },'slow')
		 .removeClass('curr');

		 $(this).find('.layer').stop().animate({height:'60px'},'slow').parent().siblings().find('.layer').stop().animate({
			 height: '100%'
		 },'slow');

		 $(this).find('.layer .p1').stop().animate({left:'-200%'},'slow').siblings('.p2').stop().animate({
			 right: '145px'
		 },'slow').parent().parent().siblings().find('.layer .p1').stop().animate({left:'10px'},'slow').siblings('.p2').stop().animate({
			 right: '-200%'
		 },'slow')

	  },function(){
		//

	  })
});
</script>

.dh ul{position: relative;overflow: hidden;width: 1200px;height: 306px;margin: 10px auto 0;padding-bottom:30px;}
.dh ul li{float: left;width: 162px;overflow: hidden;height: 100%;position: relative;cursor: pointer;}
.dh ul li a{display: block;width: 100%;height: 100%;}
.dh ul li .layer{position: absolute;bottom: 0;left: 0;width: 100%;background:rgba(27,29,36,0.4);height: 100%;}
.dh ul li .layer .p1{position: absolute;bottom: 5px;left: 10px;}
.dh ul li .layer .p2{position: absolute;bottom: 5px;right: -200%;}
.dh ul li .layer .p2 b,.dh ul li .layer .p2 span{display: block;font-weight: bold;font-size: 20px;}
.dh ul li .layer .p1 b,.dh ul li .layer .p1 span{display: block;font-weight: bold;font-size: 14px;}

.dh ul li.curr{}

.col1{color: #fff;text-align:center;line-height:15px;}
.col2{color: #fff;text-align:center;line-height:18px;}