【网站制作】三、实战 - 小米商城

单独小米商城导航栏

<!DOCTYPE html>

<html>
	<head>
	<meta charset="utf-8">
		<title>小米商城</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.top {width: 100%; height: 40px; background: #333;font-size: 14px; font-family: 微软雅黑;}
			.top .con {width: 1226px; height: 40px; /*background: red;*/ margin: 0 auto;}
			
			/*列表*/
			.top .con .nav {height: 40px; line-height: 40px;float: left;}
			.top .con .nav a {color: #b0b0b0; text-decoration: none;}
			.top .con .nav a:hover {color: #fff;}
			.top .con .nav .shu {margin: 0 0.5em; color: #424242;} /*1em = 1字体大小*/

			/*登录*/
			.top .con .nav-denglu {height: 40px; line-height: 40px;float: right;}
			.top .con .nav-denglu a {color: #b0b0b0; text-decoration: none;}
			.top .con .nav-denglu a:hover {color: #fff;}
			.top .con .nav-denglu .shu {margin: 0 0.5em; color: #424242;} /*1em = 1字体大小*/

			/*购物车*/
			.top .con .nav-cart {width:120px; height: 40px; line-height: 40px;text-align: center;float: right; background: #424242;margin-left: 15px;}
			.top .con .nav-cart a {color: #fff; text-decoration: none;}
		</style>
	</head>

	<body>

		<div class="top">
			<div class="con"> 
				<!-- 列表 -->
				<div class="nav">
					<a href="#">小米商城</a> <span class="shu">|</span>
					<a href="#">MIUI</a> <span class="shu">|</span>
					<a href="#">米聊</a> <span class="shu">|</span>
				</div>

				<!-- 购物车 -->
				<div class="nav-cart">
					<a href="#">购物车</a>
				</div>

				<!-- 登录 -->
				<div class="nav-denglu">
					<a href="#">登录</a> <span class="shu">|</span>
					<a href="#">注册</a> <span class="shu">|</span>
					<a href="#">消息通知</a> 
				</div>

				
			</div>
		</div>
	</body>
</html>


单独小米商城图片轮播

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="">
	<title>轮播图</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		/*overflow: hidden;超出部分隐藏*/
		.play {width: 1226px; height: 460px; background: red; margin:0 auto;position: relative;overflow: hidden;}

		.play .list ul{width: 200px; height: 30px; background: blue;position: absolute;bottom:20px; right: 0;}
		.play .list ul li {float: left;width: 20px; height: 20px; border: 1px solid #000;border-radius: 10px;list-style: none;line-height: 20px;text-align: center;margin-left: 5px;}


		.play .jiantou .left{width:50px; height:50px;position: absolute; top:45%; left: 0;}
		.play .jiantou .left:hover{background: rgb(0,0,0,0.5);}
		.play .jiantou .right{width:50px; height:50px;position: absolute; top:45%; right: 0;}
		.play .jiantou .right:hover{background: rgb(0,0,0,0.5);}

		.play .list ul .active{background: white;}
	</style>
</head>
<body>
	<div class="play">

		<!-- 图片 -->
		<div class="pic">
			<img src="images/1.jpg">
			<img src="images/2.jpg">
			<img src="images/3.jpg">
			<img src="images/4.jpg">
			<img src="images/5.jpg">
		</div>

		<!-- 列表 -->
		<div class="list">
			<ul>
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>

		<!-- 箭头 -->
		<div class="jiantou">
			<img src="images/1.png" class="left">
			<img src="images/1.png" class="right">
		</div>
	</div>


	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
	<script type="text/javascript">
		// alert(222); 测试
		//全局变量
		var time = 0;
		timeplay = null;

		// 手动轮播
		$(".play .list ul li").mouseover(function(){//鼠标放上去

			clearInterval(timeplay);//鼠标放上去自动轮播不播了
			index =$(this).index();//获取序列号
			// alert(index);//显示提示
			$(this).addClass("active");//鼠标放到哪个上面,哪个变白
			$(this).addClass("active").siblings().removeClass("active"); //鼠标放到哪个上,哪个变白,其余变回原来状态
			$(".play .pic img").eq(index).show().siblings(".play .pic img").hide();//实现图片轮播效果
		}).mouseout(function(){//鼠标离开
			aa();
		});


		// 自定义函数 自动轮播
		aa(0);
		function aa(){
			// alert("王旭博");

			// 设置时钟
			timeplay = setInterval(function () {
				time ++;
				if(time == 5)
					time = 0;
				$(".play .list ul li").eq(time).addClass("active").siblings().removeClass("active");
				$(".play .pic img").eq(time).show().siblings(".play .pic img").hide();
				
			}, 1000);//1000ms
		}

		//左箭头播放
		$(".play .jiantou .left").click(function(){
			time--;

			if(time < 0)
				time = 4;
			$(".play .list ul li").eq(time).addClass("active").siblings().removeClass("active");
			$(".play .pic img").eq(time).show().siblings(".play .pic img").hide();
		})
		$(".play .jiantou .left").mouseover(function(){
			clearInterval(timeplay);
		}).mouseout(function(){
			aa();
		})

		//右箭头播放
		$(".play .jiantou .right").click(function(){
			time++;

			if(time > 4)
				time = 0;
			$(".play .list ul li").eq(time).addClass("active").siblings().removeClass("active");
			$(".play .pic img").eq(time).show().siblings(".play .pic img").hide();
		})
		$(".play .jiantou .right").mouseover(function(){
			clearInterval(timeplay);
		}).mouseout(function(){
			aa();
		})
	</script>

</body>
</html>
ReCclay CSDN认证博客专家 视觉/OpenCV 图像处理 深度学习
大家好,我是CSDN博主ReCclay,目前处于研究生阶段,就读于电子科技大学,主攻方向为汽车辅助驾驶算法研究。入站以来,凭借坚持与热爱,以博文的方式分享所学,截止目前累计博文数量达800余篇,受益人次达135万余次,涉及领域包括但不限于物联网开发、单片机开发、Linux驱动开发、FPGA开发、前/后端软件开发等。在未来我将继续专注于嵌入式相关领域,学习更多的科技知识,输出更高质量的博文。希望在”2020博客之星年度总评选“中,可以大家的关注和投票,投票地址:https://bss.csdn.net/m/topic/blog_star2020/detail?username=recclay
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页