单独小米商城导航栏
<!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; 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;}
.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;}
.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;}
.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>
