jquery菜单式图片轮播特效仿淘宝

最新推荐文章于 2021-09-25 19:59:28 发布

阿聪世家

最新推荐文章于 2021-09-25 19:59:28 发布

阅读量1.8k

点赞数

分类专栏：网站常用jquery效果文章标签： jquery学习图片天猫

本文链接：https://blog.csdn.net/congcong875/article/details/12997063

版权

网站常用jquery效果专栏收录该内容

52 篇文章 0 订阅

订阅专栏

jquery菜单式图片轮播特效仿淘宝，废话不说，看代码：

效果图如下：

<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery菜单式图片轮播特效仿淘宝</title>
		<style>
			*{margin:0px;padding:0px;}
			#box{
				width:200px;
				height:320px;
				overflow:hidden;
				margin:10px auto;
				box-shadow:0px 0px 5px #ddd;
				position:relative;
			}
			#box div{
				width:600px;
				height:320px;
				position:absolute;
				left:0px;
				top:0px;
				z-index:1;
			}
			#box div img{
				width:200px;
				float:left;
			}
			
			#box ul{
				width:100%;
				height:90px;
				overflow:hidden;
				position:absolute;
				left:0px;
				bottom:30px;
				z-index:2;
			}
			#box ul li{
				width:180px;
				height:30px;
				line-height:30px;
				font-size:12px;
				color:#FFF;
				position:relative;
				cursor:pointer;
			}
			#box ul li span{
				padding-left:10px;
			}
			#box ul li i{
				display:block;
				width:5px;
				height:9px;
				background:url(images/ico.png) no-repeat -107px -20px;
				position:absolute;
				top:10px;
				right:20px;
				display:none;
			}
		</style>
		<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				var aLi = $('#box ul li');
				var oDiv = $('#box div');
				aLi.mouseover(function(){
					aLi.stop();
					aLi.find('i').hide();
					$(this).find('i').show();
					oDiv.stop().animate({
						left:-$(this).index()*200
					},500)
					aLi.stop();
					$(this).siblings().animate({
						width:180
					},600);
					$(this).animate({
						width:200
					},600)
				})
			})
		</script>
	</head>
	<body>
		
		<div id="box">
			<div>
				<img src="images/1.jpg">
				<img src="images/2.jpg">
				<img src="images/3.jpg">
			</div>
			<ul>
				<li style="background:#985479;"><span>三星S4天猫抢先首发</span><i> </i></li>
				<li style="background:#fc6a6d;"><span>大家电周末疯狂抢购</span><i> </i></li>
				<li style="background:#2f8b98;"><span>平板春游记 分享有礼</span><i> </i></li>
			</ul>
		</div>
		

	</body>
</html>