能实现添加display属性，但是无法实现轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lunbo</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <!--外容器--> <div class="main" id="main"> <!--导航菜单--> <!-- <div class="menu-box"></div> --> <!--轮播图--> <div class="banner" id="banner"> <!--因为每个图片都是可以点的连接，所以要有a标签,如果不是死图可以a下加img，如果 是死图就加div，然后再在div的css里面引用图片 --> <a href=""> <!-- 因为植入图片不一样，所以分别设置slide --> <div class="banner-slide slide1 slide-active"></div> </a> <a href=""> <div class="banner-slide slide2 "></div> </a> <a href=""> <div class="banner-slide slide3 "></div> </a> </div> <!-- 轮播图上的左右按钮 --> <a href="javascript:void(0)" class="button prev"></a> <a href="javascript:void(0)" class="button next"></a> <!-- 圆点导航 --> <div class="dots"> <!-- 按钮在同一行用span --> <span class="active"></span> <span></span> <span></span> </div> </div> <script type="text/javascript" src="js/script.js"></script> </body> </html>
//全局变量
var index = 0,
timer = null
pics = document.getElementById("banner").getElementsByTagName("div");
len = pics.length;
function slideImg(){
var main =document.getElementById("main");
//滑过清除定时器，离开继续
main.onmouseover=function(){
//滑过清除定时器
}
main.onmouseout = function(){
timer = setInterval(function(){
index++;
if(index >=len){
index=0;
}
// 切换图片
changeImg();
},2000);
}
}
//切换图片
function changeImg(){
// 通过索引，选取到要改变的标签的索引，然后添加激活类
pics[index].style.display ="block";
}
slideImg();*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
font-family: "微软雅黑";
}
.main{
width: 1200px;
height: 460px;
/*居中*/
margin:30px auto;
/*超出范围的就隐藏，关键*/
overflow: hidden;
position: relative;
}
.banner{
width: 1200px;
height: 460px;
/*超出范围的就隐藏，关键*/
/*overflow: hidden;*/
}
.banner-slide{
/*都是占满所以大小一样*/
width: 1200px;
height: 460px;
/*都是平铺*/
background-repeat: no-repeat;
display: none;
}
.slide1{
/*这里的路径是相对.css这个文件*/
background-image: url("../img/bg1.jpg");
}
.slide2{
/*这里的路径是相对.css这个文件*/
background-image: url("../img/bg2.jpg");
}
.slide3{
/*这里的路径是相对.css这个文件*/
background-image: url("../img/bg3.jpg");
}
.slide-active{
display: block;
}
.button{
/*注意相对父盒子定位，他的父元素是main不是banner,
如果不设置父元素relative就变成相对body定位，这样移动后没那么灵活*/
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
/*平铺，水平，水平居中*/
background: url(../img/arrow.png) no-repeat center center;
}
/*有链接按钮的都用a，因为a还可以设置hover*/
.button:hover{
background-color: #333;
opacity: 0.8;
/*ie的透明度*/
filter: alpha(opacity=80);
}
.prev{
transform: rotate(180deg);
}
.next{
/*因为之前设置了left，所以先让left自由*/
left: auto;
right: 0;
}
.dots{
position: absolute;
right: 20px;
bottom: 24px;
/*靠右对齐*/
text-align: right;
}
.dots span{
/*span把一行划分为几个部分，但是想让他显示宽高，就要让他block*/
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
/*rgba可以设置透明度，所以一般用这个设置颜色，这样就能根据背景颜色变化颜色*/
background: rgba(7,17,27,0.4);
margin-right: 8px;
line-height: 12px;
/*添加阴影 ：水平 垂直 阴影距离 模糊程度 颜色 内置/外置*/
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
cursor: pointer;
}
.dots .active{
background: #fff;
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
}68
收起
正在回答
3回答
你好，根据代码，进行调整和建议，与自己代码对比，同时看新添加的注释内容：
var index = 0,
timer = null,
pics = document.getElementById("banner").getElementsByTagName("div"),
len = pics.length;
function slideImg() {
var main = document.getElementById("main");
//滑过清除定时器，离开继续
main.onmouseover = function() {
//滑过清除定时器
clearInterval(timer); //添加该语句，如没有该语句，每次触发一个定时器，所以会乱。
}
main.onmouseout = function() {
timer = setInterval(function() {
index++;
if (index >= len) {
index = 0;
}
// 切换图片
changeImg();
}, 2000);
}
main.onmouseout(); // 添加该语句，让其进来时执行定时轮播图片。
}
//切换图片
function changeImg() {
// 通过索引，选取到要改变的标签的索引，然后添加激活类
for (var i = 0; i < len; i++) {
pics[i].style.display = "none"; // 添加先将所有的都不显示，然后在指定显示的，没有这个，由于html 显示，覆盖相应的内容。
}
pics[index].style.display = "block";
}
slideImg();希望对你有帮助，祝学习愉快，欢迎采纳。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星