轮播图为什么没显示
来源：5-2 作业题
慕田峪0316891
2018-08-21 15:12:20
<!DOCTYPE html> <html> <head> <title>exercise</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/cs.css"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script type="text/javascript" src="js/cs.js"></script> </head> <body> <!--顶部--> <div class="top"> <div class="top-hr"> <!--登录注册部分--> <div class="top-left"> <div><a href="javascript:void(0);" class="loginLink" id="loginLink">亲，请先登录</a></div> <div><a href="javascript:void(0);" class="registerLink" id="registerLink">免费注册</a></div> <div><a href="javascript:void(0);" class="top-left-3">手机逛慕课</a></div> </div> <!--顶部右侧相关菜单--> <div class="top-right"> <div class="title"> <div class="words">我的慕课<img src="../image/icon/22.png"></div> <div class="sub-title"> <div>a1</div> <div>b1</div> <div>c1</div> </div> </div> <div class="title"> <div class="words">收藏夹<img src="../image/icon/22.png"></div> <div class="sub-title"> <div>a2</div> <div>b2</div> <div>c2</div> </div> </div> <div class="title"> <div class="words">商品分类<img src="../image/icon/22.png"></div> <div class="sub-title"> <div>a3</div> <div>b3</div> <div>c3</div> </div> </div> <div class="title"> <div class="words">卖家中心<img src="../image/icon/22.png"></div> <div class="sub-title"> <div>a4</div> <div>b4</div> <div>c4</div> </div> </div> <div class="title"> <div class="words">联系客服<img src="../image/icon/22.png"></div> <div class="sub-title"> <div>a5</div> <div>b5</div> <div>c5</div> </div> </div> </div> <!--弹出层遮罩--> <div class="layer"> <div class="layer-mask" id="layer-mask"></div> <div class="layer-pop" id="layer-pop"> <div class="layer-close" id="layer-close"></div> <div class="layer-content" id="layer-content"></div> </div> <!--登录窗体--> <div class="loginHTML" style="display:none;" id="loginHTML"> <div class="login"> <div class="layer-content-login"> <div class="login-login-title">登录</div> <div class="login-register-title">注册</div> </div> <div class="item"> <input id="username" class="input" name="username" type="text" placeholder="请输入登录邮箱或手机号" /> <div class="error-msg username-error-msg"></div> </div> <div class="item"> <input id="password" class="input" name="password" type="password" placeholder="6-16位密码，区分大小写，不能用空格"/> <div class="error-msg password-error-msg"></div> </div> <div class="i-autolog"> <div class="autolog"> <input type="checkbox" name="autolog" id="autolog" />下次自动登录 </div> <div class="forgetpassword"> <a href="">忘记密码</a> </div> </div> <div class="item"> <input type="button" name="button" value="登录" class="submit" id="loginsubmit" /> </div> <div class="loginLink-foot"> <div class="loginLink-img"> <div><img src="../image/icon/xinlang.png"></div> <div><img src="../image/icon/weixin.png"></div> <div><img src="../image/icon/QQ.png"></div> </div> </div> </div> </div> <!--注册窗体--> <div class="registerHTML" style="display: none;" id="registerHTML"> <div class="register"> <div class="layer-content-login"> <div class="register-login-title">登录</div> <div class="register-register-title">注册</div> </div> <div class="item"> <input id="username" class="input" name="username" type="text" placeholder="请输入注册邮箱或手机号" /> <div class="error-msg username-error-msg"></div> </div> <div class="item"> <input id="yanzhengma" class="input" name="yanzhengma" type="text" placeholder="请输入验证码"/><img src="../image/verify.png"> <div class="error-msg yanzhengma-error-msg"></div> </div> <div class="item"> <input type="button" name="button" value="注册" class="submit" id="registersubmit"/> </div> <div class="loginLink-foot"> <div class="loginLink-img"> <div><img src="../image/icon/xinlang.png"></div> <div><img src="../image/icon/weixin.png"></div> <div><img src="../image/icon/QQ.png"></div> </div> </div> </div> </div> </div> </div> </div> <!--logo区--> <div class="logo"> <div class="logo-sub"> <div class="logo-img"><img src="../image/logo.png"></div> <div class="logo-search"> <input type="text" name="logo-search" class="logo-search-text" placeholder="灵魂美食一元抢"> <input type="button" name="logo-search-word" class="logo-search-word" value="搜索"> </div> <div class="shopcar" id="shopcar"> <div class="shopcar-left"><img src="../image/icon/26.png"></div> <div class="shopcar-middle">购物车 | 0</div> <div class="shopcar-right"> <img src="../image/icon/23.png" class="shopcar-right-img"> <div class="cart-select" id="cart-select"> <p class="cart-p1">最新加入的商品</p> <ul> <li class="cart-select-li"> <img src="../image/cart/1.png" class="goods"><span class="cart-select-span">adidas 阿迪达斯 训练 男子</span><br/><span>￥335×1</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/2.png" class="goods"><span class="cart-select-span">玉兰油多效修护三部曲套装</span><br/><span>￥199×2</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/3.png" class="goods"><span class="cart-select-span">Apple iPhone 7 (A1660)</span><br/><span>￥6188×1</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/4.png" class="goods"><span class="cart-select-span">飞利浦面条机 HR2356/31</span><br/><span>￥659×4</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/5.png" class="goods"><span class="cart-select-span">罗技G29 力反馈游戏方向</span><br/><span>￥2999×1</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/1.png" class="goods"><span class="cart-select-span">adidas 阿迪达斯 训练 男子</span><br/><span>￥335×1</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/2.png" class="goods"><span class="cart-select-span">玉兰油多效修护三部曲套装</span><br/><span>￥199×2</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/3.png" class="goods"><span class="cart-select-span">Apple iPhone 7 (A1660)</span><br/><span>￥6188×1</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/4.png" class="goods"><span class="cart-select-span">飞利浦面条机 HR2356/31</span><br/><span>￥659×4</span><img src="../image/icon/20.png" class="goods-btn"> </li> <li class="cart-select-li"> <img src="../image/cart/5.png" class="goods"><span class="cart-select-span">罗技G29 力反馈游戏方向</span><br/><span>￥2999×1</span><img src="../image/icon/20.png" class="goods-btn"> </li> </ul> <p class="cart-p2">共27件商品 共￥0.00<input type="button" name="go-cart" value="去购物车"></p> </div> </div> </div> </div> </div> <!--导航区--> <div class="nav"> <div class="nav-sub"> <span>天黑黑</span> <span>二手特价</span> <span>数码城</span> <span>团购</span> <span>发现</span> <span>名品汇</span> </div> </div> <!--banner--> <div class="main"> <!--轮播图片区域--> <div class="change"> <div class="banner" id="banner"> <a href=""><div class="banner-slide slide1 active-slide"></div></a> <a href=""><div class="banner-slide slide2"></div></a> <a href=""><div class="banner-slide slide3"></div></a> <a href=""><div class="banner-slide slide4"></div></a> <a href=""><div class="banner-slide slide5"></div></a> </div> <div class="spot" id="spot"> <span class="span active-spot"></span> <span class="span"></span> <span class="span"></span> <span class="span"></span> <span class="span"></span> </div> <div class="button pre" id="pre"></div> <div class="button next" id="next"></div> </div> </div> </body> </html>
*{
margin:0;
padding:0;
}
body{
font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";
}
/*顶部*/
.top{
width: 100%;
height:50px;
text-align: center;
background:#f3f5f7;
}
.top-hr{
width:1200px;
height:50px;
margin:0 auto;
color:#333;
border-bottom:1px solid #bbb;
}
a{
color:#333;
text-decoration: none;
}
/*登录注册部分*/
.top-left{
width:300px;
height:50px;
float: left;
line-height: 50px;
}
.loginLink{
color: red;
}
.loginLink,.registerLink,.top-left-3{
margin-left:10px;
float:left;
}
.registerLink:hover,.top-left-3:hover{
color: red;
}
/*顶部右侧相关菜单*/
.top-right{
width:500px;
float:right;
}
.top-right .title{
margin-left:15px;
height: 50px;
float：right;
display: inline-block;
cursor: pointer;
position:relative;
}
.words{
line-height: 50px;
}
.sub-title{
position: absolute;
display: none;
border:1px solid grey;
width:70px;
top:34px;
background:#f3f5f7;
}
.sub-title div{
width:70px;
height:20px;
border:1px solid grey;
margin-top: -1px;
}
.sub-title div:hover{
background: white;
}
.top-right .title:hover .sub-title{
display: block;
z-index:2;
}
.top-right .words:hover{
color:red;
}
/*弹出遮罩层*/
.layer{
width:100%;
height:100%;
}
.layer-mask{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
opacity: 0.5;
z-index: 9999;
background-color:#000;
}
.layer-pop{
display:none;
text-align: center;
z-index: 10000;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:400px;
height:300px;
background:#fff;
margin:auto;
}
.layer-close
{
float :right;
width: 34px;
height:34px;
border: 3px solid #fff;
text-align: center;
line-height: 34px;
border-radius: 50%;
background: url(../image/icon/20.png);
margin-right:20px;
margin-top: 10px;
}
.layer-close:hover
{
cursor: pointer;
background: #ccc;
color: #fff;
}
/*登录窗体*/
.login{
width:400px;
height:350px;
}
.layer-content-login{
height:40px;
line-height: 40px;
font-size:16px;
font-weight: bold;
margin-left:20px;
}
.login-login-title{
color: red;
border-bottom:5px solid red;
float:left;
height: 40px;
cursor: pointer;
width: 32px;
}
.login-register-title{
float:left;
height:40px;
margin-right: 250px;
cursor: pointer;
width: 38px;
}
.register-login-title{
float:left;
height: 40px;
cursor: pointer;
width: 32px;
}
.register-register-title{
float:left;
height:40px;
margin-right: 250px;
cursor: pointer;
color: red;
border-bottom:5px solid red;
width: 38px;
}
.item .input{
height:40px;
width:350px;
padding-left:5px;
border:1px solid #ccc;
margin-bottom: 20px;
margin-left: 10px;
}
#yanzhengma{
width: 250px;
height:20px;
padding:10px 5px;
border:1px solid #ccc;
margin-left:12px;
margin-right:20px;
margin-bottom: 100px;
}
.item img{
width:80px;
height: 50px;
margin-top: 5px;
margin-bottom: -20px;
}
.i-autolog{
height: 40px;
line-height: 40px;
margin-top:-10px;
}
.autolog{
float:left;
margin-left:40px;
}
.forgetpassword{
float:right;
margin-right:40px;
}
.item .submit{
background: #e40;
border:1px solid #e40;
border-radius:5px;
padding:10px auto;
width:360px;
color:#fff;
height: 40px;
}
.loginLink-img{
width:300px;
height:60px;
line-height:60px;
margin-left:70px;
margin-top: 20px;
}
.loginLink-img div{
float:left;
background:#ddd;
width:30px;
height:30px;
border-radius:50%;
line-height:30px;
margin-left:40px;
}
.loginLink-img div:hover{
background:green;
}
.error-msg{
color:#e40;
text-align: left;
padding-left: 30px;
}
.yanzhengma-error-msg{
margin-top:-90px;
}
.username-error-msg{
margin-top: -20px;
}
.password-error-msg{
margin-top: -20px;
}
/*logo区*/
.logo{
width: 100%;
height:100px;
text-align: center;
background:#f3f5f7;
}
.logo-sub{
width:1200px;
height:100px;
margin:0 auto;
color:#333;
border-top:1px solid #bbb;
}
.logo-img{
width:150px;
height:50px;
float: left;
margin-top: 25px;
}
.logo-search{
width:auto;
height:40px;
position:absolute;
margin-top: 25px;
margin-left:350px;
}
.logo-search-text{
width:530px;
height:40px;
border: 1px solid #aaa;
border-right: none;
padding-left: 10px;
}
.logo-search-word{
width:100px;
height: 40px;
border: 1px solid #000;
background-color: #000;
color: #fff;
font-size: 16px;
margin-left: -5px;
}
.logo-search-word:hover{
cursor: pointer;
}
/*购物车*/
.shopcar{
width:150px;
height:30px;
float: right;
background:red;
margin-top:25px;
padding-top:10px;
position: relative;
}
.shopcar-hover{
background:white;
cursor: pointer;
}
.shopcar-left{
display: inline-block;
width:16px;
height:16px;
margin-left:-30px;
}
.shopcar-middle{
display: inline-block;
color: white;
}
.shopcar-right-img{
width: 16px;
height: 16px;
float: right;
display:inline-block;
margin-top: -20px;
}
.cart-select{
position: absolute;
width:300px;
height:300px;
top: 40px;
right: -150px;
border: 1px solid red;
background-color: #fff;
overflow: auto;
display: none;
}
.cart-select ul li{
list-style-type: none;
}
.goods{
width: 49px;
height: 48px;
float: left;
}
.cart-select span{
display: inline-block;
width: 200px;
height: 24px;
float: left;
}
.goods-btn{
width: 32px;
height: 32px;
position：relative;
top:-20px;
}
.cart-select-li-add{
background:#f3f5f7;
color:red;
}
/*导航区*/
.nav{
width:100%;
height: 40px;
background:black;
}
.nav-sub{
width:600px;
height:40px;
padding-top: 10px ;
margin-left:400px;
color: white;
font-size: 15px;
}
.nav-sub span{
margin-right:40px;
}
.nav-sub span:hover{
color:red;
cursor: pointer;
}
/*banner区*/
.main{
width:1200px;
height:auto;
border:1px solid black;
margin:5px auto;
}
/*轮播图*/
.change{
width:728px;
margin:0 230px;
overflow: hidden;
}
.banner-slide{
display: none;
background-repeat: no-repeat;
width:100%;
height: 500px;
}
.active-slide{
display: block;
}
.slide1{
background-image: url(../image/focus-carousel/1.png);
}
.slide2{
background-image: url(../image/focus-carousel/2.jpg);
}
.slide3{
background-image: url(../image/focus-carousel/3.jpg);
}
.slide4{
background-image: url(../image/focus-carousel/4.jpg);
}
.slide5{
background-image: url(../image/focus-carousel/5.jpg);
}
.spot{
position:absolute;
top:670px;
right: 700px;
}
.spot span{
display: inline-block;
width:12px;
height: 12px;
margin-left: 8px;
border-radius: 50%;
background-color: rgba(7, 17, 27, 0.4);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.spot span.active-spot{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}
.pre{
width:30px;
height: 60px;
position:absolute;
top: 420px;
left:400px;
background:url(../image/focus-carousel/pre2.png) center center no-repeat;
cursor: pointer;
}
.next{
width:30px;
height: 60px;
position:absolute;
top: 420px;
left:1096px;
background:url(../image/focus-carousel/pre.png) center center no-repeat;
cursor: pointer;
}
.button:hover{
background-color:#333;
opacity: 0.8;
filter:alpha(opacity=80);
}$(function(){
// 登录链接事件
$("#loginLink").click(function(){
// 获取登录窗体代码
var loginHTML = $("#loginHTML").html();
showLayer(loginHTML,400,300,closeCallback);
// 登录表单校验
$("#loginsubmit").click(function(){
var username = $("input[name='username']").val();
var password = $("input[name='password']").val();
if(username === 'imooc' && password === '123456'){
alert("登录成功");
}else if(username != 'imooc'){
$(".error-msg").html("账号输入错误");
}
else if (password != '123456') {
$(".error-msg").html("密码输入错误");
}
});
});
// 注册链接事件
$("#registerLink").click(function(){
// 获取注册窗体代码
var registerHTML = $("#registerHTML").html();
showLayer(registerHTML,400,300,closeCallback);
// 注册表单校验
$("#registersubmit").click(function(){
var username = $("input[name='username']").val();
var yanzhengma = $("input[name='yanzhengma']").val();
if(username === 'imooc' && yanzhengma === 'gyyd'){
alert("注册成功");
}else if("username != 'imooc'"){
$(".error-msg").html("账号输入错误");
}
else if (yanzhengma != 'gyyd') {
$(".error-msg").html("验证码输入错误");
}
});
});
// 弹出层关闭回调函数
function closeCallback(){
$(".error-msg").html("");
}
// 显示弹出层
function showLayer(html,width,height,closeCallback){
// 显示弹出层遮罩
$("#layer-mask").show();
// 显示弹出层窗体
$("#layer-pop").show();
// 设置弹出层窗体样式
$("#layer-pop").css({
width : width,
height : height
});
// 填充弹出层窗体内容
$("#layer-content").html(html);
// 弹出层关闭按钮绑定事件
$("#layer-close").click(function(){
// 弹出层关闭
hideLayer();
// 关闭的回调函数
closeCallback();
});
}
// 隐藏弹出层
function hideLayer(){
// 弹出层关闭
$("#layer-mask").hide();
$("#layer-pop").hide();
}
//购物车事件
$("#shopcar").mouseover(function(){
$("#cart-select").show();
$(".shopcar").addClass("shopcar-hover");
$(".shopcar-middle").css("color","red");
$(".shopcar-left").css("background","url(../image/icon/25.png)");
})
$(".cart-select-li").mouseover(function(){
$(this).addClass('cart-select-li-add');
})
$(".cart-select-li").mouseout(function(){
$(this).removeClass('cart-select-li-add');
})
$("#shopcar").mouseout(function(){
$("#cart-select").hide();
$("#shopcar").removeClass("shopcar-hover");
$(".shopcar-middle").css("color","white");
})
//图片轮播事件
var timer=null,
index=0,
pics=$('.banner-slide'),
length=pics.length;
$(function(){
//改变图片函数
function changeImage(){
$(".banner-slide").each(function(){
$(".banner-slide").removeClass("active-slide");
$(".span").removeClass('active-spot');
})
$(".banner-slide").eq(index).addClass('active-slide');
$(".span").eq(index).addClass('active-spot');
}
//上一张
$("#pre").click(function(){
index--;
if(index<0){
index=length-1;
}
changeImage();
})
//下一张
$("#next").click(function(){
index++;
if(index>length-1){
index=0;
}
changeImage();
})
//圆点切换
$(".span").each(function(element){
$(this).click(function(){
index=element;
changeImage();
});
})
//鼠标悬浮事件
$(".change").on('mouseover',function(event){
if(timer){
clearInterval(timer);
}
})
$(".change").on('mouseout',function(event){
Autoplayer();
})
function Autoplayer(){
timer=setInterval(function(){
index++;
if(index>=length){
index=0;
}
changeImage();
},1000)
}
Autoplayer();
})
})写回答
1回答
-
经测试轮播图显示出来了，只是左右两侧的点击按钮定位不对，如下：
需要再调整下位置，可以将左右按钮和下面小圆点放在轮播图banner里面，设置相对于banner来定位。自己试一下，祝学习愉快~~
0
相似问题