接上:
效果图
主要是实现轮播图效果,以及鼠标移入移除的效果
开始的时候 没有想到 jq的动态创建 html 如下
<div class="hender">
<div class="head">
<div class="w clearfix pr">
<ul class="headNav"></ul>
<ul class="headLogin fr">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">消息通知</a></li>
<li class="myCar">
<i class="iconfont"></i><a href="#">购物车(0)</a>
</li>
</ul>
<div class="app">
<div class="img">
<a href="#"><img src="../upload/app.png" alt="" /></a>
</div>
<div class="text"><a href="#">小米商城APP</a></div>
</div>
<div class="car">
<p>购物车中还没有商品,赶紧选购吧</p>
</div>
</div>
</div>
<div class="mainNav pr">
<div class="w clearfix">
<div class="logo fl">
<img src="../upload/logo.png" alt="" />
<h1><a href="#">小米</a></h1>
</div>
<h2 style="position: absolute;left:135px;top:25px;font-size: 32px;color:#d64923;">小米年货节</h2>
<div class="nav fl">
<ul></ul>
</div>
<div class="search fr">
<div class="text fl"><input type="text" /></div>
<div class="button fl"><i class="iconfont" style="color: #333"></i></div>
</div>
</div>
<!--鼠标移入导航的弹窗-->
<div class="navPro1">
<div class="w">
<ul></ul>
</div>
</div>
</div>
<div class="container w pr">
<!--sidenav定位-->
<div class="sidenav">
<ul></ul>
</div>
<div class="slide fr">
<ul>
<li><img src="../upload/slide1.jpg" alt="" /></li>
<li><img src="../upload/slide2.jpg" alt="" /></li>
<li><img src="../upload/slide3.jpg" alt="" /></li>
<li><img src="../upload/slide4.jpg" alt="" /></li>
<li><img src="../upload/slide5.jpg" alt="" /></li>
</ul>
</div>
<div class="arrowLeft"><i class="iconfont"></i></div>
<div class="arrowRight"><i class="iconfont"></i></div>
<div class="dots">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="../js/xiaomi.js"></script>
</div>
css样式
/*头部开始*/
.head {
height: 40px;
background: #333333;
}
.head .headNav li {
float: left;
margin-top: 14px;
border-right: 1px solid #393f3f;
font-size: 12px;
}
.head .headNav li:last-child {
border-right: none;
}
.head .headNav li a {
margin: 0 7px;
color: #b0b0b0;
}
.head .headNav li a:hover {
color: #fff;
}
.head .headNav li:first-child a {
margin-left: 0;
}
.head .headLogin li {
float: left;
margin-top: 14px;
border-right: 1px solid #393f3f;
}
.head .headLogin li:nth-child(3) {
border-right: none;
}
.head .headLogin li:last-child {
margin-top: 0;
height: 40px;
width: 120px;
background: #424242;
line-height: 40px;
}
.head .headLogin li a {
color: #b0b0b0;
}
.head .headLogin li a:hover {
color: #fff;
}
.head .headLogin li:first-child a {
margin-right: 7px;
}
.head .headLogin li:nth-child(2) a {
margin: 0 7px;
}
.head .headLogin li:nth-child(3) a {
margin: 0 25px 0 7px;
}
.head .headLogin li:last-child i {
font-size: 14px;
margin-left: 16px;
margin-right: 5px;
}
/*小米下载的盒子弹出*/
.head .app {
width: 124px;
height: 150px;
background: #ECEEEB;
position: absolute;
top: 40px;
left: 500px;
text-align: center;
display: none;
z-index: 10;
}
.head .app img {
width: 100px;
height: 100px;
margin-top: 15px;
}
.head .app .text {
margin-top: 5px;
}
.head .app .text a {
color: #000000;
font-size: 16px;
}
/*购物车的盒子弹出*/
.head .car {
width: 300px;
height: 100px;
background: #e2e3e6;
position: absolute;
right: 0;
top: 40px;
line-height: 100px;
font-size: 12px;
text-align: center;
display: none;
z-index: 10;
}
/*头部结束*/
/*导航开始*/
.mainNav {
height: 100px;
}
.mainNav .logo {
display: block;
margin-top: 22px;
width: 55px;
height: 55px;
background: orangered;
margin-right: 180px;
}
.mainNav .logo img,
.mainNav .logo h1 a {
width: 55px;
height: 55px;
}
.mainNav .logo h1 {
font-size: 0;
}
.mainNav .nav {
margin-top: 40px;
margin-right: 79px;
}
.mainNav .nav li {
float: left;
}
.mainNav .nav li a {
margin: 0 10px;
color: #333333;
font-size: 16px;
}
.mainNav .search {
margin-top: 25px;
}
.mainNav .search .text {
border: 1px solid #e0e0e0;
}
.mainNav .search input {
width: 243px;
height: 48px;
line-height: 48px;
}
.mainNav .search .button {
width: 50px;
height: 48px;
line-height: 48px;
text-align: center;
border: 1px solid #e0e0e0;
border-left: 0;
}
.mainNav .search .button i {
font-size: 20px;
}
.mainNav .navPro1 {
width: 100%;
height: 229px;
background: #ffffff;
position: absolute;
top: 100px;
display: none;
z-index: 50;
}
.mainNav .navPro1 li {
float: left;
height: 229px;
background: #fff;
padding: 0 23px 0 23px;
}
.mainNav .navPro1 img {
height: 100px;
margin-top: 36px;
}
.mainNav .navPro1 .proName {
margin-top: 22px;
margin-bottom: 10px;
text-align: center;
}
.mainNav .navPro1 .proName a {
color: #333333;
}
.mainNav .navPro1 .proPrice {
text-align: center;
color: #ff6700;
}
/*导航结束*/
/*侧边栏开始*/
.container {
background: #ff5b74;
height: 460px;
}
.container .sidenav {
background: rgba(0, 0, 0, 0.4);
/*opacity: 0.3;*/
padding: 20px 0;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.container .sidenav li {
height: 42px;
line-height: 42px;
width: 234px;
font-size: 14px;
padding-left: 30px;
}
.container .sidenav li a {
color: #fff;
}
.container .sidenav li:hover {
background: #ff6700;
}
.container .sidenav li i {
float: right;
font-size: 14px;
margin-right: 25px;
color: #c0c4c6;
}
/*侧边栏结束*/
/*轮播图开始*/
.container .slide {
width: 1226px;
height: 460px;
overflow: hidden;
}
.container .slide img {
width: 1226px;
height: 460px;
}
.container .slide li {
position: absolute;
width: 1226px;
height: 460px;
opacity: 0;
}
.container .slide li:first-child {
opacity: 1;
}
.container .arrowLeft {
width: 41px;
height: 69px;
line-height: 69px;
position: absolute;
left: 264px;
top: 196px;
}
.container .arrowLeft i {
font-size: 45px;
color: #bac6d0;
}
.container .arrowRight {
width: 41px;
height: 69px;
line-height: 69px;
position: absolute;
right: 0;
top: 196px;
}
.container .arrowRight i {
font-size: 45px;
color: #bac6d0;
}
.container .dots {
position: absolute;
bottom: 25px;
right: 35px;
}
.container .dots li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background: #9ba6ac;
margin-right: 10px;
}
.dots li {
cursor: pointer;
}
/*轮播图结束*/
jq代码:
$(function () {
/*头部的js特效开始*/
var head_arr = ['小米商城', 'MIUI', 'loT', '云服务', '金融', '有品', '小爱开放平台', '政企服务', '资质证照', '协议规则', '下载app', 'Select Region'];
var head_Str = '';
$.each(head_arr, function (index, val) {
//能找到数组的所有文字
head_Str += ' <li>\n' +
' <a href="">' + head_arr[index] + '</a>\n' +
' </li>'
});
$('.head .headNav').html(head_Str);
$('.head .headNav li:eq(10) a').on('mouseenter', function () {
$('.head .app').css('display', 'block');
}).on('mouseleave', function () {
$('.head .app').css('display', 'none');
})
$('.head .headLogin .myCar').on('mouseenter', function () {
$('.myCar i,.myCar a').css('color', '#cc621f');
$('.head .car').css('display', 'block')
}).on('mouseleave', function () {
$('.head .car').css('display', 'none')
$('.myCar i,.myCar a').css('color', '#b0b0b0');
})
/*头部的js特效结束*/
/*导航的js特效开始*/
var mainNav_arr = ['小米手机', '红米', '电视', '笔记本', '家电', '新品', '路由器', '智能硬件', '服务', '社区'];
var mainNav_Str = '';
$.each(mainNav_arr, function (index, val) {
mainNav_Str += ' <li>\n' +
' <a href="">' + mainNav_arr[index] + '</a>\n' +
' </li>'
});
$('.mainNav .nav ul').html(mainNav_Str);
var mainNav_numArr = [5, 4, 6, 6, 6, 6, 6, 6];
var mainNav_imgArr1 = ['mix3-320.png', 'qingchun-320.png', 'pc-320-220-mi8.png', 'pc-320-miplay-1.png', 'pc-320-220-mi8se.png'];
var mainNav_proNameArr1 = ['小米MIX 3', '小米8 青春版', '小米8', '小米play', '小米8 SE'];
var mainNav_proPrice1 = ['3299', '1399', '2699', '1099', '1699'];
var mainNav__Str = '';
$.each(mainNav_imgArr1, function (index, val) {
mainNav__Str += ' <li>\n' +
' <div class="img">\n' +
' <img src="../upload/' + mainNav_imgArr1[index] + '" alt="">\n' +
' </div>\n' +
' <div class="proName"><a href="#">' + mainNav_proNameArr1[index] + '</a></div>\n' +
' <div class="proPrice"><p>' + mainNav_proPrice1[index] + ' 元起' + '</p></div>\n' +
' </li>'
})
$('.mainNav .navPro1 ul').html(mainNav__Str);
$('.mainNav .nav ul li:first').on('mouseenter', function () {
$('.mainNav .navPro1').slideDown(200);
}).on('mouseleave', function () {
$('.mainNav .navPro1').slideUp(200);
})
/*导航的js特效结束*/
/*侧边栏js特效开始*/
var sideNav_arr = ['手机 电话卡', '电视 盒子', '笔记本 平板', '家电 插线板', '出行 穿戴', '智能 路由器', '电源 配件', '健康 儿童', '耳机 音箱', '生活 箱包'];
var sideNav_str = '';
$.each(sideNav_arr, function (index, ele) {
sideNav_str += '<li>\n' +
' <a href="#">' + sideNav_arr[index] + '</a>\n' +
' <i class="iconfont"></i>\n' +
' </li>'
})
$('.container .sidenav ul').html(sideNav_str);
/*侧边栏js特效结束*/
/*轮播图开始*/
$('.container .arrowLeft').hover(function () {
$(this).css('background', 'rgba(0,0,0,0.6)');
$('.container .arrowLeft i').css('color', '#fff');
}, function () {
$(this).css('background', '');
$('.container .arrowLeft i').css('color', '#bac6d0');
})
$('.container .arrowRight').hover(function () {
$(this).css('background', 'rgba(0,0,0,0.6)');
$('.container .arrowRight i').css('color', '#fff');
}, function () {
$(this).css('background', '');
$('.container .arrowRight i').css('color', '#bac6d0');
})
// 小圆点的效果
var dots = $('.container .dots li'); //获取点
var lis = $('.container .slide li');
var now = 0;
//hover的效果
dots.hover(function () {
//这个获取到点的下标
$(this).css('background', '#fff');
}, function () {
$(this).css('background', '#9ba6ac');
dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
})
dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
dots.on('click', function () {
var index = $(this).index();
//点击小圆点,对应的这个下标的图片显示
$('.container .slide li').eq(index).animate({
opacity: 1
}, 800)
//其他的不显示
$('.container .slide li').eq(index).siblings().animate({
opacity: 0
}, 800)
now = index;
dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
})
//右键按下
function autoPlay() {
now++;
//最后一个图再按下,按下之前是4,按下了就是5了
if (now == 5) {
now = 0;
}
//让当前这个显示
$('.container .slide li').eq(now).animate({
opacity: 1
}, 800)
//让其他的不显示
$('.container .slide li').eq(now).siblings().animate({
opacity: 0
}, 800)
dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
}
$('.container .arrowRight').on('click', function () {
now++;
//最后一个图再按下,按下之前是4,按下了就是5了
if (now == 5) {
now = 0;
}
//让当前这个显示
$('.container .slide li').eq(now).animate({
opacity: 1
}, 800)
//让其他的不显示
$('.container .slide li').eq(now).siblings().animate({
opacity: 0
}, 800)
dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
})
// 左键按下
$('.container .arrowLeft').on('click', function () {
now--;
if (now == -1) {
now = 4;
}
$('.container .slide li').eq(now).animate({
opacity: 1
}, 800)
$('.container .slide li').eq(now).siblings().animate({
opacity: 0
}, 800)
dots.eq(now).css('background', '#fff').siblings().css('background', '#9ba6ac');
})
time = setInterval(function () {
autoPlay();
}, 2000)
$('.container').on('mouseenter', function () {
clearInterval(time);
})
$('.container').on('mouseleave', function () {
time = setInterval(function () {
autoPlay();
}, 2000)
})
/*轮播图结束*/
})