老师，白色箭头没有出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图练习</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main" id="main">
<div class="menu-box"></div>
<div class="menu-content">
<div class="menu-item">
<a href="">
<span>手机、配件</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i></i>
</a>
</div>
</div>
<!-- 图片轮播 -->
<div class="banner" id="banner">
<a href="">
<div class="banner-slider slider1 slider-active"></div>
</a>
<a href="">
<div class="banner-slider slider2"></div>
</a>
<a href="">
<div class="banner-slider slider3"></div>
</a>
</div>
<!-- 左右按钮 -->
<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" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
//css
*{
margin: 0;
padding: 0;
}
@font-face {
font-family: 'iconfont';
src: url('../img/font/iconfont.eot');
src: url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#iconfont') format('svg');
}
ul{
list-style: none;
}
a:link,a:visited{
text-decoration: none;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.banner-slider{
width: 1200px;
height: 460px;
position: absolute;
display: none;
background-repeat: no-repeat;
}
.slider-active{
display: block;
}
.slider1{
background-image: url(../img/bg1.jpg);
}
.slider2{
background-image: url(../img/bg2.jpg);
}
.slider3{
background-image: url(../img/bg3.jpg);
}
.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background: url(../img/arrow.png) no-repeat center center;
}
.button:hover{
background-color: #333;
opacity: 0.5;
filter:Alpha(opacity=50)
}
.prev{
transform: rotate(180deg);
}
.next{
left: auto;
right: 0;
}
.dots{
position: absolute;
right: 20px;
bottom: 24px;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left: 8px;
cursor: pointer;
}
.dots span.active{
background: #fff;
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
}
/*导航菜单*/
.menu-box{
width: 244px;
height: 460px;
position: absolute;
left: 0;
top: 0;
background: rgba(7,17,27,0.5);
opacity: 0.5;
z-index: 1;
}
.menu-content{
width: 244px;
height: 454px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding-top: 6px;
}
.menu-item{
height: 64px;
line-height: 66px;
font-size: 16px;
padding: 0 24px;
position: relative;
}
.menu-item a:link,.menu-item a:visited{
color: #fff;
}
.menu-item a{
display: block;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 0 8px;
height: 63px;
}
.menu-item i{
position: absolute;
top: 2px;
right: 32px;
font-size: 32px;
font-family: 'iconfont';
font-style: normal;
font-weight: normal;
color: rgba(255,255,255,0.5);
}
//js
window.onload = function(){
//封装一个代替document.getElementById()的方法
function byId(id){
return typeof(id) === "string"?document.getElementById(id):id;
}
//全局变量
var index = 0,
timer = null,
pics = byId("banner").getElementsByTagName("div"),
dots = byId("dots").getElementsByTagName("span"),
prev = byId("prev"),
next = byId("next"),
len = pics.length;
console.log(len);
function slideImg(){
var main = byId("main");
//滑过清除定时器，离开继续
main.onmouseover = function(){
//滑过清除定时器
clearInterval(timer);
};
main.onmouseout = function(){
timer = setInterval(function(){
index++;
if(index>=3){
index = 0;
}
changeImg();
},2000)
}
main.onmouseout();
//遍历所有原点,且绑定点击事件,点击圆点切换图片
for(var d=0;d<len;d++){
//给所有span添加一个id的属性，值为d,作为当前span的索引
dots[d].id = d;
dots[d].onclick = function(){
//改变index为当前span的id值
index = this.id;
//调用changeImg,实现切换图片
changeImg();
}
}
//上一张
prev.onclick = function(){
index--;
if(index<0) index=len-1;
//调用切换函数
changeImg();
}
//下一张
next.onclick = function(){
index++;
if(index>=len) index=0;
//调用切换函数
changeImg();
}
}
//切换函数
function changeImg(){
//遍历banner下所有div,并将其隐藏.遍历所有的span，清除类
for(var i=0;i<len;i++){
pics[i].style.display = "none";
dots[i].className = "";
}
//根据索引index找到当前div将其显示出来.根据索引index找到当前span添加类
pics[index].style.display = "block";
dots[index].className = "active";
};
slideImg();
}
正在回答 回答被采纳积分+1
老师,有点不理解,你说的img和html在同一个目录下面就去掉../，但是@font-face不是在css文件夹下面的css文件里写的嘛？首先回到css文件夹需要加../，css文件夹和img文件夹和html在同一目录下的，然后我又把../加上了，报错消失了，但是小箭头还没出来，还是显示小方块。老师，我不知道我表达清除没有，我把文件目录截图了，你帮我找找原因
老师，我的文件下载下来都是数字，iconfont.eot,iconfont.ttf,iconfont.woff
774f 4632 0001 0000 0000 0290 000b 0000
0000 0644 0000 0245 0001 0000 0000 0000
0000 0000 0000 0000 0000 0000 0000 0000
1c42 0656 0082 700a 4c5f 0136 0224 0308
0b06 0004 2005 846d 0731 1b86 05c8 1e92
2415 6a31 5004 8012 080a 2082 fab5 cf9e
b76f 0f98 e549 404d 1c1d 2e1f f94f 262c
6c24 1811 a3e3 a258 92bb dafd 9fb6 dc06
849d 79fe b63c c55a 6ada cea4 ddbf 2f4d
6f3c 8f70 6ce1 d84a 2124 0887 a498 e57d
e2de e95f 0105 321f 508e 7bd1 5893 2675
0175 7120 0538 d6a2 c88a 24f2 86b1 0b5e
e071 024d c674 d5f6 0ece 2e61 4966 8f0b
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星