老师教我修复一下轮播图
相关代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>慕课首页</title> <link rel="stylesheet" href="../CSS/01-header.css"> <link rel="stylesheet" href="../CSS/02-banner.css"> <link rel="stylesheet" href="../CSS/03-ms.css"> <link rel="stylesheet" href="../CSS/04-course.css"> <link rel="stylesheet" href="../CSS/base.css"> <link rel="stylesheet" href="../CSS/common.css"> <link rel="stylesheet" href="../font/iconfont.css"> </head> <body> <!--头部区域开始--> <div id="header" class="bgfff"> <div class="nav-box"> <ul class="item-box fl"> <li><a href="#">首页</a></li> <li><a href="#">旅游景点</a></li> <li><a href="#">旅游视频</a></li> <li><a href="#">图片风光</a></li> <li><a href="#">注册</a></li> <li><a href="#">登陆</a></li> </ul> <div class="login-area fr"> <div class="search fl"> <div class="search-area"> <input type="text" placeholder="首页"> <span class="iconfont icon-sousuo"></span> </div> </div> </div> </div> </div> <!--头部区域结束--> <!--轮播图区域开始--> <div id="banner"> <div class="banner-box w"> <div class="g-banner"> <div class="swiper fr"> <a href="#" target="_blank"> </a> <!--这里的blank是指打开超链接的时候会打开一个新窗口，如果是self则是本窗口打开--> <!--箭头区域--> <div class="arrow arrow-l"> <span class="iconfont icon-angle-left"></span> </div> <div class="arrow arrow-r"> <span class="iconfont icon-angle-right"></span> </div> <ul class="circle-list"> <li class="current"></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> </div> <!--轮播图区域结束--> <!--介绍栏开始--> <div class="jieshao"> <h2 style="text-align: center;">中国旅游</h2> <p>中国的景观旅游资源相当丰富，这里风景名胜区从不同的角度可以有不同的划分，以其主要的景观不同，大体上可分为如下五种类型：</p> <p>1.湖泊风景区（白洋淀，杭州西湖，南京玄武湖，武汉东湖，新疆天地天池，青海湖，丹江口水库）</p> <p>2.山岳风景区（黄山，燕山，泰山，衡山，华山，紫金山，阿里山）</p> <p>3.森林风景区（西双版纳，湖南张家界，河南宝天曼，四川卧龙，湖北神农架）</p> <p>4.山水风景区（桂林漓江，长江三峡，武夷九曲溪）</p> <p>5.海滨风景区（海南天涯海角，厦门，大连）</p> </div> <script src="../js/index.js"></script> </body> </html>
相关代码：
/*整体布局 开始*/
#banner{
padding: 32px 0;
background-image: url(../images/swiper/bj-0.jpg);
transition: 1s;
}
.banner-box{
height: 482px;
}
.g-banner{
height: 382px;
}
.sys-class{
height: 100px;
border-radius: 0 0 8px 8px;
background-color: #fff;
box-shadow: 0 5px 20px 5px rgba(0, 0, 0, .1);
}
/*轮播图*/
.swiper{
position: relative;
width: 802px;
height: 422px;
border-radius:8px;
}
.swiper a{
display: block;
width: 882px;
height: 422px;
background-repeat: no-repeat;
background-image: url(../images/lvyou/01-cangshang.jpg);
background-size: 796px;/*图片覆盖满区域*/
border-radius: 8px ;
transition: 1s;
}
/*箭头*/
.swiper .arrow{
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
}
.swiper .arrow:hover{
background-color: rgba(0, 0, 0, .1);
}
.arrow .iconfont{
font-size: 30px;
font-weight: 700;
}
.arrow-l{
left: 20px;
top: 160px;
}
.arrow-r{
right: 20px;
top: 160px;
}
/*切图按钮*/
.circle-list li{
cursor: pointer;
float: left;
width: 8px;
height: 8px;
margin-left: 8px;
border-radius: 50%;
background-color: #fff;
}
.circle-list{
position: absolute;
right: 120px;
bottom: 25px;
}
.circle-list li.current{
width: 20px;
border-radius: 4px;
}
/*下方体系课*/
.show-box{
display: inline-block;/*行内块*/
width: 192px;
height: 45px;
margin-top: 23px;
margin-left: 15px;
}
.show-box .sys-icon{
width: 45px;
height: 45px;
background-size: contain;
margin-right: 8px;
}
.show-box h4{
font-size: 14px;
}
.show-box p{
font-size: 12px;
}
.show-box .title:hover h4{
color: #ec1500;
}
.sys-class .line{
width: 2px;
height: 40px;
background-color: #e8e8e8;
display: inline-block;
}
.sys-class .more-btn{
display: inline-block;
font-size: 12px;
margin-left: 16px;
margin-top: 20px;
}
.sys-icon{
transition: .2s;
}
.sys-icon:hover{
transform: translateY(-3px);
}
/*整体布局 开始*/相关代码：
#header{
min-width: 1150px;
height: 72px;
border-bottom: 1px solid #ccc;
}
.nav-box{
margin: 0 auto;
width: 1200px;
}
.nav-box h1{
width: 126px;
height: 72px;
background-image:url(../images/logo.png);
background-size: 126px ;/*直接调整背景的宽高*/
}
.nav-box h1 a{
display: block;
width: 126px;
height: 72px;
font-size: 0;
}
.item-box{
height: 72px;
line-height: 72px;
margin-left: 20px;
}
.item-box li{
float: left;
padding: 0 16px;
}
.item-box img{
position: absolute;
left: 508px;
top: 18px;
width: 13px;
}
.search{
padding: 16px 0;
height: 40px;
line-height: 40px;
}
.search div{
background-color: #F3F5F6;
border-radius: 6px;
}
.search div input{
width: 200px;
height: 30px;
padding-left: 10px;
border: 0;
background-color: #F3F5F6;
}
.search .iconfont{
padding-right: 10px;
}
/*登录注册区*/
.login-area{
height: 72px;
line-height: 72px;
}
.login-area a{
padding: 0 20px;
}
.login-area .shop-cart{
border-radius: 6px;
padding: 8px 20px;
border: 1px solid #ccc;
background-color: #f5f5f5;
color: #f01414;
}
.login-area .cart-num{
position: absolute;
display: block;
width: 18px;
height: 18px;
top: 8px;
right: 60px;
text-align: center;
line-height: 20px;
border-radius: 50% 50% 50% 0;
background-color: #f01414;
color: #fff;
font-size: 12px;
}
.jieshao p{
text-align: center;
}相关代码：
//关键词轮换
{
//1.获取关键词对象
let input = document.querySelector('.search input ');
//2.设置关键词数组
const keyWords = ['首页', '旅游景点', '旅游视频', '图片风光', '登录','注册'];
//使用时间函数切换input的placeholder值
let i = 0;
setInterval(() => {
i++;
if (i == 5) {
i = 0;
}
input.placeholder = keyWords[i];
}, 2000);
}
//声明轮播图数组
const swiperImgList = [
{
path: '../images/lvyou/01-cangshang.jpg',
url: '#',
bg: './images/swiper/bj-0.jpg'
},
{
path: '../images/lvyou/01-daocheng.jpg',
url: '#',
bg: './images/swiper/bj-1.jpg'
},
{
path: '../images/lvyou/03-xingjiang.jpg',
url: '#',
bg: './images/swiper/bj-2.jpg'
},
{
path: '../images/lvyou/03-cangshang.jpg',
url: '#',
bg: './images/swiper/bj-3.jpg'
},
];
//获取背景标签
const banner = document.querySelector('#banner');
//获取A标签
const swiperA = document.querySelector('.swiper a');
//获取右侧切换按钮
const rightArrow = document.querySelector('.arrow-r');
//获取左侧切换按钮
const leftArrow = document.querySelector('.arrow-l');
//用来控制数组的
let i = 0;
//获取圆点对象的
const lis = document.querySelectorAll('.circle-list li');
//获取圆点对象
const ul = document.querySelector('.circle-list');
//创建公共定时器
let timer = null;
//控制圆点的
function currentCircle(index) {
for (let i = 0; i < lis.length; i++) {
lis[i].className = '';
lis[index].className = 'current';
}
}
//用来控制切换的函数
function changeImg(index) {
swiperA.style.backgroundImage = `url(${swiperImgList[index].path})`; //这里是反引号，这个可以换行，并且可以用${}
swiperA.href = swiperImgList[index].url;//改图片地址
banner.style.backgroundImage = `url(${swiperImgList[index].bg})`;//改整体背景
currentCircle(index);//改长圆点位置
}
//用来控制能不能点击的
let flag = true;
rightArrow.onclick = function () {
if (flag == false) {
return;
}
flag = false;
i++;
if (i == 4) {
i = 0;
}
changeImg(i);
flag = false;
setTimeout(() => {
flag = true;
}, 1000);
}
leftArrow.onclick = function () {
if (flag == false) {
return;
}
flag = false;
i--;
if (i == -1) {
i = 3;
}
changeImg(i);
flag = false;
setTimeout(() => {
flag = true;
}, 1000);
}
//选中圆点函数封装
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
if (flag == false) {
return;
}
flag = false;
changeImg(i);
index = i;
setTimeout(() => {
flag = true;
}, 1000);
}
}
//自动轮播;前面已经设置timer初始值为null
timer = setInterval(() => {
i++;
if (i == 4) {
i = 0;
}
changeImg(i);
}, 3000);
swiperA.onmouseenter = function () {
clearInterval(timer);//作用是清除计时器
}
swiperA.onmouseleave = function () {
timer = setInterval(() => {
i++;
if (i == 4) {
i = 0;
}
changeImg(i);
}, 3000);
}
leftArrow.onmouseenter = function () {
clearInterval(timer);//作用是清除计时器
}
rightArrow.onmouseenter = function () {
clearInterval(timer);//作用是清除计时器
}
ul.onmouseenter = function () {
clearInterval(timer);//作用是清除计时器
}
//倒计时
{
//1.获取结束时间点的时间戳
let endDate = new Date('2022-04-23 21:55:00');//获取时间戳
endDate = parseInt(endDate.getTime() / 1000);//将时间戳从毫秒变为秒后，重新赋值
//获取时分秒对象
const hourDom = document.getElementById('hour');
const minDom = document.getElementById('min');
const secDom = document.getElementById('sec');
//制作定时器
let timer = null;
function countDown() {
//2.获取当前时间点的时间戳
let nowDate = new Date();//直接得到当前时间的时间戳
nowDate = parseInt(nowDate.getTime() / 1000);
//3.计算剩余总秒数
let seconds = endDate - nowDate;
if (seconds >= 0) {
let hours = parseInt(seconds / 3600);
hours = hours > 9 ? hours : '0' + hours
let mins = parseInt((seconds % 3600) / 60);
mins = mins > 9 ? mins : '0' + mins
let secs = parseInt(seconds % 3600 % 60);
secs = secs > 9 ? secs : '0' + secs
console.log(hours, mins, secs)
hourDom.innerText = hours;//将HTML中的hourDom对象的值改为新的hour
minDom.innerText = mins;
secDom.innerText = secs;
} else {
clearInterval(timer);
document.querySelector('.countdown p').innerText = '拼团已结束';
}
}
countDown();
timer = setInterval(() => {
countDown();
}, 1000);//每秒自动执行一次
//滚动课程
{
const ul = document.querySelector('.ms-list ul');
let timer = null;
let leftPX = 0;
timer = setInterval(() => {
leftPX = leftPX-- == -1720 ? 0 : leftPX;
ul.style.left = leftPX + 'px';//疑问 1.这里的leftPX干嘛的 2. 'px'是哪里来的
}, 20);
ul.onmouseenter = function () {
clearInterval(timer);
}
ul.onmouseleave = function () {
timer = setInterval(() => {
leftPX = leftPX-- == -1720 ? 0 : leftPX;
ul.style.left = leftPX + 'px';//疑问 1.这里的leftPX干嘛的 2. 'px'是哪里来的
}, 10);//鼠标离开之后重新启动滚动课程的功能--左边距继续减小
}
}
}
//课程切换
{
//1.获取所有的a标签(tab栏)
const tabs = document.querySelectorAll('.title-pic a');
const uls = document.querySelectorAll('.course ul');
//循环为所有的tab栏绑定点击事件
for(let i = 0 ;i<tabs.length;i++){
tabs[i].onclick=function(){
//清除所有a标签和ul标签的样式
for(let j = 0;j<tabs.length;j++){
tabs[j].className='';
uls[j].className='';
}
//重新给予样式
tabs[i].className='active';
uls[i].className='current';
}
}
}我已经到了完全修复不了的地步了。。。。不好意思老师，麻烦您了
相关截图：
9
收起
正在回答 回答被采纳积分+1
1回答
-
同学你好，同学是想让轮播图居中显示吗？如果是，则建议同学调整对应的宽度，使其与轮播图的图片宽度一致。如下所示：然后重新测试代码试一下。
祝学习愉快！
2022-04-29 16:19:33
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星