京东首页zepto 实现轮播

最新推荐文章于 2022-10-19 16:25:42 发布
原创最新推荐文章于 2022-10-19 16:25:42 发布 · 222 阅读
0 ·
CC 4.0 BY-SA版权
本文详细介绍使用Zepto.js库实现网页轮播图的具体步骤，包括HTML结构搭建、CSS样式设置及JavaScript交互逻辑，适用于移动端网页开发。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
Zepto实现轮播
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="css/bass.css"/>
		<style type="text/css">
			.jd_layout {
				width: 100%;
				max-width: 640px;
				min-width: 320px;
				margin: 0 auto;
				background-color: #DDDDDD;
				
			}
			.jd_search {
				width: 100%;
				max-width:640px;
				height: 40px;
				position: fixed;
				background: rgba(233,35,34,0);
				z-index: 999;
			}
			.jd_logo {
				width: 56px;
				height: 30px;
				position: absolute;
				left: 10px;
				top: 5px;
				font-size: 20px;
				border-radius: 10px;
				padding-left: 5px;
			
			}
			.jd_login{
				width: 40px;
				height: 40px;
				position: absolute;
				top: 0;
				right: 0;
				line-height: 40px;
				color: #fff;
			}
			.jd_searchBox{
				width: 100%;
				height: 100%;
				padding-left:76px;
				padding-right: 50px;
				box-shadow: 1px 1px 1px #ddd;
			}
			.jd_searchBox > input{
				width: 100%;
				height: 30px;
				margin-top: 5px;
				border-radius: 15px;
				padding-left: 30px;
			}
			.jd_banner {
				width: 100%;
			    overflow: hidden; 
				position: relative;
			}
			.jd_bannerImg {
				/* width: 400%; */
				position: relative;
				overflow: hidden;
				/* left: -100%; */

				
			} 
			.jd_bannerImg > li {
				/* width: 25%; */
				float: left;
			}
			.jd_bannerImg > li img {
				 width: 100%;
				display: block;
			}
			.jd_bannerIndicator {
				width: 62px;
				height: 10px;
				position: absolute;
				left: 50%;
				bottom: 5px;
				transform: translateX(-50%);
				
			}
			.jd_bannerIndicator>li{
				width: 6px;
				height: 6px;
				border-radius: 3px;
				border: 1px solid #fff;
				float:left;
				margin-left: 10px;
			}
			.jd_bannerIndicator > li:first-child {
				margin-left: 0;
			}
			.jd_bannerIndicator > li.active {
				background-color: #fff;
			}
			.jd_nav{
				width: 100%;
				padding: 10px 0;
				background-color: #fff;
			}
			.jd_nav li {
				width: 25%; 
				float: left;
				text-align: center;
				margin-top: 5px;
				overflow: hidden;
			}
			.jd_nav li img {
				width: 40px;
			}
			.jd_nav li p{
				line-height: 25px;
			}
			.jd_product {
				width: 100%;
			}
			.jd_productBox{
				width: 100%;
				margin-top: 10px;
				background-color: #fff;
				box-shadow: 1px 1px 1px #ccc;
				
			}
			.jd_productBox > .jd_pTip {
				width: 100%;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px solid #ccc;
				color: #666;
				
			}
			.jd_productBox > .jd_pTip > h3 {
				position: relative;
				padding-left: 30px;
				
			}
			.jd_productBox > .jd_pTip > h3::before {
				content: "";
				position: absolute;
				width: 3px;
				height: 12px;
				background-color: #e92322;
				left: 20px;
			    top: 9px;
				
			}
			.a_50 {
				width: 50%;
				display: block;
			}
			
			.a_50 > img{
				width: 100%;
				display: block;
				
			}
			.b_left {
				border-left: 1px solid #ccc;
			}
			.b_bottom {
				border-bottom: 1px solid #ccc;
			}
			.b_right {
				border-right: 1px solid #ccc;
			}
			.jd_sk{}
			.jd_sk > .jd_pTip .jd_sk_text {
				color: #e92323;
			}
			.jd_sk > .jd_pTip .jd_sk_time span{
				width: 13px;
				height: 18px;
				display: inline-block;
				line-height: 18px;
				color:#fff;
				background-color: #000;
				text-align: center;
			}
			.jd_sk > .jd_pTip  .jd_sk_time > span:nth-of-type(3n) {
				color: #000;
				background-color: transparent;
				width: 8px;
			}
			.jd_sk .jd_pContent{
				padding: 20px;
			}
			.jd_sk .jd_pContent > ul {
				width: 100%;
			}
			.jd_sk .jd_pContent > ul > li {
				width: 33.33%;
				float: left;
				text-align: center;
			}
		    .jd_sk .jd_pContent > ul > li img {
		    	width: 60%;
		    	display: inline-block;
		    }
		</style>
	    
	</head>
	<body>
		<div class="jd_layout">
			<div class="jd_search">
			<a href="javascript:;" class=jd_logo>京东</a>
			<form action="" method="post" class="jd_searchBox">
				<input type="text" placeholder="请输入商品名称" />
			</form>
			<a href="javascript:;" class="jd_login">登录</a></div>
			<div class="jd_banner">
				<ul class="jd_bannerImg clearfix">
					
					<li>
						<a href="javascript:;">
							<img src="img/lun1.JPG" alt="" />
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="img/lun2.JPG" alt="" />
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="img/lun3.JPG" alt="" />
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="img/lun1.JPG" alt="" />
						</a>
					</li>
					
				</ul>
			    <ul class="jd_bannerIndicator">
			    	<li class="active"></li>
			    	<li></li>
			    	<li></li>
			    	<li></li>
			    </ul>
			</div>
			<div class="jd_nav">
				<ul class="clearfix">
					<li>
						<a href="">
							<img src="img/lun2.JPG" alt="" />
							<p>商品分类</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/lun2.JPG" alt="" />
							<p>商品分类</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/lun2.JPG" alt="" />
							<p>商品分类</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/lun2.JPG" alt="" />
							<p>商品分类</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/lun2.JPG" alt="" />
							<p>商品分类</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/lun2.JPG" alt="" />
							<p>商品分类</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/lun2.JPG" alt="" />
							<p>商品分类</p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/lun2.JPG" alt="" />
							<p>商品分类</p>
						</a>
					</li>
				</ul>
			</div>
			<div class="jd_product">
			 <div class="jd_productBox clearfix jd_sk">
				<div class="jd_pTip">
					<div class="jd_left .jd_left">
						<span class="f_left m_left10 jd_sk_text">掌上秒杀</span>
						<div class="jd_sk_time f_left m_left10">
							<span>0</span>
							<span>0</span>
							<span>:</span>
							<span>0</span>
							<span>0</span>
							<span>:</span>
							<span>0</span>
							<span>0</span>
						</div>
					</div>
					<div class="m_right10 f_right">
						更多秒杀...
					</div>
				</div>	
				<div class="jd_pContent clearfix">
					<ul>
						<li>
							<a href="javascript:;">
								<img src="img/new1.png" alt="" />
							</a>
							<p>&yen;10.00</p>
							<p>&yen;20.00</p>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/new1.png" alt="" />
							</a>
							<p>&yen;10.00</p>
							<p>&yen;20.00</p>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/new1.png" alt="" />
							</a>
							<p>&yen;10.00</p>
							<p>&yen;20.00</p>
						</li>
					</ul>
				</div>
			 </div>
			 <div class="jd_productBox clearfix">
              <div class="jd_pTip">
              	<h3>京东超市</h3>
              </div>
              <div class="jd_pContent">
              	<a href="javascript:;" class="a_50 f_left ">
              		<img src="img/des.jpg" alt="" />
              	</a>
              		<a href="javascript:;" class="a_50 f_left b_left b_bottom">
              		<img src="img/de.jpg" alt="" />
              	</a>
              		<a href="javascript:;" class="a_50 f_left b_left">
              		<img src="img/de.jpg" alt="" />
              	</a>
              </div>
			</div>
             <div class="jd_productBox clearfix">
              <div class="jd_pTip">
              	<h3>京东超市</h3>
              </div>
              <div class="jd_pContent">
              	<a href="javascript:;" class="a_50 f_right ">
              		<img src="img/des.jpg" alt="" />
              	</a>
              		<a href="javascript:;" class="a_50 f_left b_left b_bottom">
              		<img src="img/de.jpg" alt="" />
              	</a>
              		<a href="javascript:;" class="a_50 f_left b_left">
              		<img src="img/de.jpg" alt="" />
              	</a>
              </div>
			</div>
             <div class="jd_productBox clearfix">
              <div class="jd_pTip">
              	<h3>京东超市</h3>
              </div>
              <div class="jd_pContent">
              	<a href="javascript:;" class="a_50 f_left ">
              		<img src="img/des.jpg" alt="" />
              	</a>
              		<a href="javascript:;" class="a_50 f_left b_left b_bottom">
              		<img src="img/de.jpg" alt="" />
              	</a>
              		<a href="javascript:;" class="a_50 f_left b_left">
              		<img src="img/de.jpg" alt="" />
              	</a>
              </div>
			</div>
		
			</div>
		</div>
		<script src="js/zepto.min.js"></script>
		<script src="js/selector.js"></script>
		<script src="js/fx.js"></script>
		<script src="js/touch.js"></script>
        <script>
        	$(function(){
		       var banner = $(".jd_banner");
		       var bannerWidth = banner.width();
		       var imgBox = banner.find("ul:first-of-type");
		       var indicator = banner.find("ul:eq(1)").find("li");
		       var first = imgBox.find("li:first-of-type");
		       var last = imgBox.find("li:last-of-type");
		       imgBox.append(first.clone());
		       last.clone().insertBefore(first);
		       var lis = imgBox.find("li");
		       var count = lis.length;
		       imgBox.width(count*bannerWidth);
		       lis.each(function(index,value){
	           $(lis[index]).width(bannerWidth);
	           	});
	           imgBox.css("left",-bannerWidth);
	           index = 1;
	           var imgAnimation = function(){
	           		imgBox.animate(
	           	
	           		{"left": -index*bannerWidth},
	           		200,
	           		"ease-in-out",
	           		function(){
	           			if(index==count-1){
	           				index=1;
	           				imgBox.css("left",-index*bannerWidth);
	           			}
	           			else if(index == 0){
	           				index = count-2;
	           				imgBox.css("left",-index*bannerWidth);
	           			}
	           			indicator.removeClass("active").eq(index-1).addClass("active");
	           		})

	           }
	          var timeid = setInterval(function(){
	           index++;
	           imgAnimation();
	           },2000);
	           /*添加滑动事件*/
	           imgBox.on("swipeLeft",function(){
                  clearInterval(timeid);
                  index++;
                  imgAnimation();
                 
	           });
	             imgBox.on("swipeRight",function(){
                  clearInterval(timeid);
                  index--;
	           });
	             if(timeid==undefined){
	             	timeid = setInterval(function(){
	             		index++;
	             		imgAnimation();
	             	},2000);
	             }
	
	});
	</script> 
	</body>
</html>