jquery双图片滑动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery双图片滑动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery双图片滑动切换特效</title>
		<style>
			*{margin:0px;padding:0px;}
			li{list-style:none;}
			#sidebar{
				width:188px;
				height:auto;
				border:1px solid #e9e5e2;
				margin:30px auto;
			}
			#sidebar .hd{
				width:100%;
				height:28px;
				background:#e9e5e2;
				line-height:28px;
				font-size:12px;
				color:#7f746e;
				text-indent:12px;
				font-weight:bold;
			}
			#sidebar ul{
				width:180px;
				height:auto;
				padding:0px 4px 5px 4px;
			}
			#sidebar ul li{
				margin-top:5px;
				width:180px;
				height:150px;
				position:relative;
				overflow:hidden;
				cursor: pointer;
			}
			#sidebar ul li .imgBox{
				width:360px;
				position:absolute;
				left:0px;
				top:0px;
				height:150px;
				z-index:1;
			}
			#sidebar ul li .imgBox img{
				float:left;
			}
			#sidebar ul li .imgTitle{
				width:100%;
				height:48px;
				bottom:-24px;
				left:0px;
				z-index:2;
				position:absolute;
				font-size:12px;
			}
			#sidebar ul li .imgTitle div{
				width:100%;
				height:48px;
				position:relative;
			}
			#sidebar ul li .imgTitle P{
				width:100%;
				height:24px;
				line-height:24px;
				color:#FFF;
				text-indent:10px;
				position:absolute;
				left:0px;
				top:0px;
			}
			#sidebar ul li .red P{
				background:#d96160;
			}
			#sidebar ul li .cyan P{
				background:#134752;
			}
			#sidebar ul li .blue P{
				background:#2271af;
			}
		</style>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			$(function(){
				var aLi = $('#sidebar ul li');
				var oImg,aP;
				aLi.hover(function(){
					oImg = $(this).find('.imgBox');
					aP = $(this).find('p');
					oImg.stop().animate({
						left:-180
					},450);
					aP.eq(0).stop().animate({
						top:24
					},450);
					aP.eq(1).stop().animate({
						top:0
					},450);
				},function(){
					oImg.stop().animate({
						left:0
					},450);
					aP.eq(0).stop().animate({
						top:0
					},450);
					aP.eq(1).stop().animate({
						top:24
					},450);
				})
			})
		</script>
	</head>
	<body>
		<div id="sidebar">
			 <div class='hd'>专辑推荐</div>
			 <ul>
			 	<li>
			 		<div class='imgBox'>
			 			<img src="images/1_1.jpg">
			 			<img src="images/1_2.jpg">
			 		</div>
			 		<div class='imgTitle red'>
			 			<div>
			 				<p>
			 					<span>几何为网—极尽绚烂 </span>
			 				</p>
			 				<p style="top:24px;">
			 					<span>COCOON/可可尼</span>
			 				</p>
			 			</div>
			 		</div>
			 	</li>
			 	<li>
			 		<div class='imgBox'>
			 			<img src="images/2_2.jpg">
			 			<img src="images/2_1.jpg">
			 		</div>
			 		<div class='imgTitle cyan'>
			 			<div>
			 				<p>
			 					<span>2013春印象</span>
			 				</p>
			 				<p style="top:24px;">
			 					<span>INSUN/恩裳 </span>
			 				</p>
			 			</div>
			 		</div>
			 	</li>
			 	<li>
			 		<div class='imgBox'>
			 			<img src="images/3_2.jpg">
			 			<img src="images/3_1.jpg">
			 		</div>
			 		<div class='imgTitle blue'>
			 			<div>
			 				<p>
			 					<span>Nemow/南梦</span>
			 				</p>
			 				<p style="top:24px;">
			 					<span>JNBY/江南布衣 </span>
			 				</p>
			 			</div>
			 		</div>
			 	</li>
			 </ul>
		</div>
	</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)