老是麻烦看看轮播图代码
来源：5-2 作业题
慕沐9566875
2019-05-17 11:49:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5-2作业</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="main">
<div class="allcolor">
<!-- 顶部 -->
<div class="top">
<span><a href="" class="colorred">亲，请登录</a></span>
<span><a href="">免费注册</a></span>
<span><a href="">手记逛慕淘</a></span>
<div class="topright">
<div class="nav" id="nav">
<ul class="nav-ul">
<a href="">我的慕淘<i></i></a>
<li>已买到的宝贝</li>
<li class="li-1">我的足迹</li>
</ul>
</div>
<div class="nav" id="nav">
<ul class="nav-ul">
<a href="">收藏夹<i></i></a>
<li>收藏的宝贝</li>
<li class="li-1">收藏的店铺</li>
</ul>
</div>
<div class="nav" id="nav">
<ul>
<a href="">商品分类</a>
</ul>
</div>
<div class="nav">
<ul class="nav-ul">
<a href="">卖家中心<i></i></a>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>买家服务市场</li>
<li>卖家培训中心</li>
<li class="li-1">体验中心</li>
</ul>
</div>
<div class="nav" id="nav">
<ul class="nav-ul">
<a href="">联系客服<i></i></a>
<li>消费者客服</li>
<li class="li-1">卖家客服</li>
</ul>
</div>
</div>
</div>
</div>
<!-- logo区 -->
<div class="allcolor">
<div class="logo">
<span class="logo-img">
<input type="image" src="images/logo.png">
</span>
</span>
<span class="logo-mid">
<input type="text" value="灵魂美食一元抢" class="logo-txt">
<input type="button" value="搜索" class="logo-but">
</span>
<span class="logo-right">
<a class="logo-a">
<i class="shop-img1"></i>
购物车
丨 0
<i class="shop-img2"></i>
</a>
<div class="logo-list">
<div class="list-tit">最新加入的商品</div>
<div class="list-box">
<div class="box-con">
<img src="images/cart/1.png">
<div><a href="#">adidas 阿迪达斯 训练 男子</a></br><span>x</span>
￥ 335 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/2.png">
<div><a href="#">玉兰油多效修护三部曲套装</a></br><span>x</span>
￥ 199 x 2</div>
</div>
<div class="box-con">
<img src="images/cart/3.png">
<div><a href="#">APPLE iPhone 7 (A1660)</a></br><span>x</span>
￥ 6188 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/4.png">
<div><a href="#">飞利浦面条机 HR2356/31</a></br><span>x</span>
￥ 335 x 4</div>
</div>
<div class="box-con">
<img src="images/cart/5.png">
<div><a href="#">罗技G29 力反馈游戏方向盘</a></br><span>x</span>
￥ 2999 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/1.png">
<div><a href="#">adidas 阿迪达斯 训练 男子</a></br><span>x</span>
￥ 335 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/2.png">
<div><a href="#">玉兰油多效修护三部曲套装</a></br><span>x</span>
￥ 199 x 2</div>
</div>
<div class="box-con">
<img src="images/cart/3.png">
<div><a href="#">APPLE iPhone 7 (A1660)</a></br><span>x</span>
￥ 6188 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/4.png">
<div><a href="#">飞利浦面条机 HR2356/31</a></br><span>x</span>
￥ 335 x 4</div>
</div>
<div class="box-con">
<img src="images/cart/5.png">
<div><a href="#">罗技G29 力反馈游戏方向盘</a></br><span>x</span>
￥ 2999 x 1</div>
</div>
</div>
<div class="list-but">
<span>共27件商品共计￥0.00</span>
<span class="but-sop"><a href="">去购物车</a></span>
</div>
</div>
</span>
</div>
</div>
<!-- 导航 -->
<div class="navi">
<div class="navi1">
<span>数码城</span>
<span>天黑黑</span>
<span>团购</span>
<span>发现</span>
<span>二手特价</span>
<span>名品汇</span>
</div>
</div>
<!-- banner区 -->
<div class="banner">
<div class="banner-red"></div>
<div class="banner-box">
<div class="banner-box-tit">
<img src="images/icon/18.png" alt="">
<span>商品分类</span>
</div>
</div>
<div class="banner-nav">
<span> 家用电器</span><span>></span>
<div class="banner-nav-box">
<div class="banner-nav-but">
<div class="box01">电器</div>
<div class="box02">丨</div>
<div class="box03"><a>手机 </a><a>对讲机 </a><a>以旧换新 </a><a>手机维修</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">冰箱</div>
<div class="box02">丨</div>
<div class="box03"><a>充话费/流量 </a><a>170选号 </a><a>合约机 </a><a>办套餐 </a><a>选号码 </a><a>固话宽带 </a><a>京东通信 </a><a>中国移动 </a><a>中国联通 </a><br><a>中国电信</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">洗衣机</div>
<div class="box02">丨</div>
<div class="box03"><a>手机壳 </a><a>贴膜 </a><a>手机储存卡 </a><a>数据线 </a><a>充电器 </a><a>手机耳机 </a><a>创意配件 </a><a>手机饰品 </a><a>手机电池 </a><a>苹果周边 </a><br><a>移动电源 </a><a>蓝牙耳机 </a><a>手机支架</a><a> 车载配件 </a><a>拍照配件 </a></div>
</div>
<div class="banner-nav-but">
<div class="box01">电脑</div>
<div class="box02">丨</div>
<div class="box03"><a>数码相机 </a><a>单电/微单相机 </a><a>单反相机 </a><a>拍立得 </a><a>运动相机 </a><a>摄像机 </a><a>镜头 </a><a>户外器材 </a><a>影棚器材 </a><br><a>冲印服务</a><a> 数码相框</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">微波炉</div>
<div class="box02">丨</div>
<div class="box03"><a>储存卡 </a><a>三脚架/云台 </a><a>相机包 </a><a>滤镜 </a><a>闪光灯/手柄 </a><a>相机清洁/贴膜 </a><a>机身附件 </a><a>镜头附件 </a><a>读卡器 </a><br><a>支架</a><a> 电池/充电器</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">开水壶</div>
<div class="box02">丨</div>
<div class="box03"><a>耳机/耳麦 </a><a>音箱/音响 </a><a>便携/无线音箱 </a><a>收音机 </a><a>麦克风 </a><a>MP3/MP4 </a><a>专业音频</div>
</div>
<div class="banner-nav-but">
<div class="box01">吹风机</div>
<div class="box02">丨</div>
<div class="box03"><a>智能手环 </a><a>智能手表 </a><a>智能眼镜 </a><a>智能机器人 </a><a>运动跟踪器 </a><a>健康监测 </a><a>智能配饰 </a><a>智能家居 </a><a>体感车 </a><br><a>无人机</a><a> 其他配件</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">缝纫机</div>
<div class="box02">丨</div>
<div class="box03"><a>学生平板 </a><a>点读机/笔 </a><a>早教益智 </a><a>录音笔 </a><a>电纸书 </a><a>电子词典 </a><a>复读机 </a><a>智能家居 </a><a>体感车 </a><br><a>无人机</a><a> 其他配件</a></div>
</div>
</div>
</div>
<div class="banner-nav">
<span> 手机、运营商、数码</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 电脑、办公</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 家居、家具、家装、厨具</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 男装、女装、童装、内衣</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 化妆、清洁、宠物</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 运动户外、钟表</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 汽车、汽车用品</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 母婴、玩具乐器</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 食品、酒类、生鲜、特产</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 医药保健</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 图书、音响、电子书</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 彩票、旅行、充值、票务</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 理财。众筹、白条、保险</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<!-- 轮播图区 -->
<div class="banner-src" id="banner">
<!-- 图片轮播 -->
<img src="images/focus-carousel/1.png">
<img src="images/focus-carousel/2.jpg">
<img src="images/focus-carousel/3.jpg">
<img src="images/focus-carousel/4.jpg">
<img src="images/focus-carousel/5.jpg">
<!-- 上一张、下一张按钮 -->
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<!-- 圆点导航 -->
<div class="dots">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5-2作业</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="main">
<div class="allcolor">
<!-- 顶部 -->
<div class="top">
<span><a href="" class="colorred">亲，请登录</a></span>
<span><a href="">免费注册</a></span>
<span><a href="">手记逛慕淘</a></span>
<div class="topright">
<div class="nav" id="nav">
<ul class="nav-ul">
<a href="">我的慕淘<i></i></a>
<li>已买到的宝贝</li>
<li class="li-1">我的足迹</li>
</ul>
</div>
<div class="nav" id="nav">
<ul class="nav-ul">
<a href="">收藏夹<i></i></a>
<li>收藏的宝贝</li>
<li class="li-1">收藏的店铺</li>
</ul>
</div>
<div class="nav" id="nav">
<ul>
<a href="">商品分类</a>
</ul>
</div>
<div class="nav">
<ul class="nav-ul">
<a href="">卖家中心<i></i></a>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>买家服务市场</li>
<li>卖家培训中心</li>
<li class="li-1">体验中心</li>
</ul>
</div>
<div class="nav" id="nav">
<ul class="nav-ul">
<a href="">联系客服<i></i></a>
<li>消费者客服</li>
<li class="li-1">卖家客服</li>
</ul>
</div>
</div>
</div>
</div>
<!-- logo区 -->
<div class="allcolor">
<div class="logo">
<span class="logo-img">
<input type="image" src="images/logo.png">
</span>
</span>
<span class="logo-mid">
<input type="text" value="灵魂美食一元抢" class="logo-txt">
<input type="button" value="搜索" class="logo-but">
</span>
<span class="logo-right">
<a class="logo-a">
<i class="shop-img1"></i>
购物车
丨 0
<i class="shop-img2"></i>
</a>
<div class="logo-list">
<div class="list-tit">最新加入的商品</div>
<div class="list-box">
<div class="box-con">
<img src="images/cart/1.png">
<div><a href="#">adidas 阿迪达斯 训练 男子</a></br><span>x</span>
￥ 335 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/2.png">
<div><a href="#">玉兰油多效修护三部曲套装</a></br><span>x</span>
￥ 199 x 2</div>
</div>
<div class="box-con">
<img src="images/cart/3.png">
<div><a href="#">APPLE iPhone 7 (A1660)</a></br><span>x</span>
￥ 6188 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/4.png">
<div><a href="#">飞利浦面条机 HR2356/31</a></br><span>x</span>
￥ 335 x 4</div>
</div>
<div class="box-con">
<img src="images/cart/5.png">
<div><a href="#">罗技G29 力反馈游戏方向盘</a></br><span>x</span>
￥ 2999 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/1.png">
<div><a href="#">adidas 阿迪达斯 训练 男子</a></br><span>x</span>
￥ 335 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/2.png">
<div><a href="#">玉兰油多效修护三部曲套装</a></br><span>x</span>
￥ 199 x 2</div>
</div>
<div class="box-con">
<img src="images/cart/3.png">
<div><a href="#">APPLE iPhone 7 (A1660)</a></br><span>x</span>
￥ 6188 x 1</div>
</div>
<div class="box-con">
<img src="images/cart/4.png">
<div><a href="#">飞利浦面条机 HR2356/31</a></br><span>x</span>
￥ 335 x 4</div>
</div>
<div class="box-con">
<img src="images/cart/5.png">
<div><a href="#">罗技G29 力反馈游戏方向盘</a></br><span>x</span>
￥ 2999 x 1</div>
</div>
</div>
<div class="list-but">
<span>共27件商品共计￥0.00</span>
<span class="but-sop"><a href="">去购物车</a></span>
</div>
</div>
</span>
</div>
</div>
<!-- 导航 -->
<div class="navi">
<div class="navi1">
<span>数码城</span>
<span>天黑黑</span>
<span>团购</span>
<span>发现</span>
<span>二手特价</span>
<span>名品汇</span>
</div>
</div>
<!-- banner区 -->
<div class="banner">
<div class="banner-red"></div>
<div class="banner-box">
<div class="banner-box-tit">
<img src="images/icon/18.png" alt="">
<span>商品分类</span>
</div>
</div>
<div class="banner-nav">
<span> 家用电器</span><span>></span>
<div class="banner-nav-box">
<div class="banner-nav-but">
<div class="box01">电器</div>
<div class="box02">丨</div>
<div class="box03"><a>手机 </a><a>对讲机 </a><a>以旧换新 </a><a>手机维修</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">冰箱</div>
<div class="box02">丨</div>
<div class="box03"><a>充话费/流量 </a><a>170选号 </a><a>合约机 </a><a>办套餐 </a><a>选号码 </a><a>固话宽带 </a><a>京东通信 </a><a>中国移动 </a><a>中国联通 </a><br><a>中国电信</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">洗衣机</div>
<div class="box02">丨</div>
<div class="box03"><a>手机壳 </a><a>贴膜 </a><a>手机储存卡 </a><a>数据线 </a><a>充电器 </a><a>手机耳机 </a><a>创意配件 </a><a>手机饰品 </a><a>手机电池 </a><a>苹果周边 </a><br><a>移动电源 </a><a>蓝牙耳机 </a><a>手机支架</a><a> 车载配件 </a><a>拍照配件 </a></div>
</div>
<div class="banner-nav-but">
<div class="box01">电脑</div>
<div class="box02">丨</div>
<div class="box03"><a>数码相机 </a><a>单电/微单相机 </a><a>单反相机 </a><a>拍立得 </a><a>运动相机 </a><a>摄像机 </a><a>镜头 </a><a>户外器材 </a><a>影棚器材 </a><br><a>冲印服务</a><a> 数码相框</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">微波炉</div>
<div class="box02">丨</div>
<div class="box03"><a>储存卡 </a><a>三脚架/云台 </a><a>相机包 </a><a>滤镜 </a><a>闪光灯/手柄 </a><a>相机清洁/贴膜 </a><a>机身附件 </a><a>镜头附件 </a><a>读卡器 </a><br><a>支架</a><a> 电池/充电器</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">开水壶</div>
<div class="box02">丨</div>
<div class="box03"><a>耳机/耳麦 </a><a>音箱/音响 </a><a>便携/无线音箱 </a><a>收音机 </a><a>麦克风 </a><a>MP3/MP4 </a><a>专业音频</div>
</div>
<div class="banner-nav-but">
<div class="box01">吹风机</div>
<div class="box02">丨</div>
<div class="box03"><a>智能手环 </a><a>智能手表 </a><a>智能眼镜 </a><a>智能机器人 </a><a>运动跟踪器 </a><a>健康监测 </a><a>智能配饰 </a><a>智能家居 </a><a>体感车 </a><br><a>无人机</a><a> 其他配件</a></div>
</div>
<div class="banner-nav-but">
<div class="box01">缝纫机</div>
<div class="box02">丨</div>
<div class="box03"><a>学生平板 </a><a>点读机/笔 </a><a>早教益智 </a><a>录音笔 </a><a>电纸书 </a><a>电子词典 </a><a>复读机 </a><a>智能家居 </a><a>体感车 </a><br><a>无人机</a><a> 其他配件</a></div>
</div>
</div>
</div>
<div class="banner-nav">
<span> 手机、运营商、数码</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 电脑、办公</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 家居、家具、家装、厨具</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 男装、女装、童装、内衣</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 化妆、清洁、宠物</span><span>></span>
<div class="banner-nav-box">
</div>
</div>
<div class="banner-nav">
<span> 运动户外、钟表</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 汽车、汽车用品</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 母婴、玩具乐器</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 食品、酒类、生鲜、特产</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 医药保健</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 图书、音响、电子书</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 彩票、旅行、充值、票务</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<div class="banner-nav">
<span> 理财。众筹、白条、保险</span><span>></span>
<div class="banner-nav-box"></div>
</div>
<!-- 轮播图区 -->
<div class="banner-src" id="banner">
<!-- 图片轮播 -->
<img src="images/focus-carousel/1.png">
<img src="images/focus-carousel/2.jpg">
<img src="images/focus-carousel/3.jpg">
<img src="images/focus-carousel/4.jpg">
<img src="images/focus-carousel/5.jpg">
<!-- 上一张、下一张按钮 -->
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<!-- 圆点导航 -->
<div class="dots">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
// 全局变量
var prev=$('.prev'),
next=$('.next'),
imgs=$('.banner-src img'),
timer,
len=imgs.length,
dots=$('.dots span'),
index=0;
//左箭头
prev.click(function(){
if(index == 0){
index = len - 1;
}
index--;
changeImg(index);
});
//右箭头
next.click(function(){
index++;
changeImg(index);
});
// 圆点图片切换
dots.click(function(){
index = dots.index($(this));
changeImg(index);
});
// 鼠标移入移出
$('.banner-src').hover(function(){
//鼠标移入
clearInterval(timer);
},slideImg());
// 鼠标移入取消计时器
// 自动循环
function slideImg(){
timer = setInterval(function(){
index++;
changeImg(index);
},1000);
};
// 切换图片
function changeImg(data){
// 圆点切换
dots.eq(data).addClass('.dots span.active').siblings().removeClass('.dots span.active');
// banner循环
if (index==len-1) {
index=0;
imgs.css({'opacity':'1'}).siblings().css({'opacity':'0'});
dots.eq(index).addClass('.dots span.active').siblings().removeClass('.dots span.active');
}
}
})
轮播图代码不能实现，哪的问题呢。
1回答
-
好帮手慕星星
2019-05-17
同学你好，代码中粘贴了两遍html结构，css样式没有粘贴上来，无法准确定位你的问题所在，建议将css代码重新粘贴上来哦，老师帮助你测试下。
祝学习愉快！
0
相似问题