卡在了寻找切换图片的索引
感觉难点就在于$('.pic')的索引
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="main">
<h1>jQuery实现轮播图</h1>
<div class="mainmin">
<!--banner图-->
<div id="mainmin">
<a href="#" class="pic one activePic"></a>
<a href="#" class="pic two"></a>
<a href="#" class="pic three"></a>
<a href="#" class="pic four"></a>
<a href="#" class="pic five"></a>
</div>
<!--圆点切换-->
<ul>
<li class="tip activeTip"></li>
<li class="tip second"></li>
<li class="tip third"></li>
<li class="tip fourth"></li>
<li class="tip fifth"></li>
</ul>
<!--上、下切换-->
<div id="qiehuan">
<a href="#" class="pre left">
<a href="#" class="pre right">
</div>
</div>
</div>
</body>
</html>
.main{
width: 100%;
height: 800px;
}
/*标题样式*/
h1{
width: 500px;
font-size: 26px;
margin: 30px auto;
font-family: "微软雅黑";
text-align: center;
}
.mainmin{
width: 1200px;
height: 460px;
border: 10px solid #bbb;
margin: 50px auto;
position: relative;
}
/*banner样式*/
.mainmin .pic{
display: block;
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
display: none;
}
.mainmin .one{
background: url("../img/1.jpg");
}
.mainmin .two{
background: url("../img/2.jpg");
}
.mainmin .three{
background: url("../img/3.jpg");
}
.mainmin .four{
background: url("../img/4.jpg");
}
.mainmin .five{
background: url("../img/5.jpg");
}
.mainmin .activePic{
display: block;
}
/*切换圆点样式*/
.tip{
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
bottom: 20px;
right: 160px;
z-index: 1;
background: rgba(187,187,187,0.6);
cursor: pointer;
box-shadow: 0 0 0 3px rgba(255,255,255,0.8) inset;
}
.second{
right: 130px;
}
.third{
right: 100px;
}
.fourth{
right: 70px;
}
.fifth{
right: 40px;
}
.activeTip{
background: rgba(255,255,255,0.8);
box-shadow: 0 0 0 3px rgba(187,187,187,0.6) inset;
}
/*上、下切换样式*/
.pre{
width: 40px;
height: 90px;
position: absolute;
z-index: 2;
top: 50%;
margin-top: -45px;
}
.pre:hover{
background: rgba(0,0,0,0.4);
}
.left{
background: url("../img/pre2.png") no-repeat center center;
left: 0;
}
.right{
background: url("../img/pre.png") no-repeat center center;
right: 0;
}
//给上一张绑定事件，并切换图片
$('.left').on('click',function(){
var index=0;
index--;
if(index<0){
index=$('.pic').length-1;
}
$('.pic').each(function(index,ele){
$('.pic').eq(index).removeClass('activePic');
})
$('.pic').eq(index).addClass('activePic');
})
正在回答
同学你好，代码中有以下几个问题。
1、左右按钮是用a标签写的，但是a标签没有写结尾，参考下图：
2、建议把图片轮播的效果单放在一个函数里面，方便调用，参考下图：
当轮播到哪张图片的时候，就添加上activePic类名，然后使用slblings（）方法，找到相邻的兄弟元素并去掉这个类名。
3、建议把右侧切换的效果添加上，因为图片显示的就是第一张，所以点击左侧切换的时候，效果不变，当点击了右侧，图片进行了更换，再点击左侧的话，图片就会再切换回去，参考下图：
4、建议把点击圆点按钮的效果也封装在changeImg（）函数里面，这样哪里需要这个效果，直接调用函数名就可以了，节省代码量。
自己测试一下，如果帮助到了你，欢迎采纳！
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧