关于作业的问题
<!--轮播图--> <div class="banner"> <a href=""> <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> <a href=""> <div class="banner-slide slide4"></div> </a> <a href=""> <div class="banner-slide slide5"></div> </a> </div>
var pics = $('.banner').find('div');
var dots = $('span');
// 图片切换单独封装成函数
function changeImg(index) {
pics.eq(index).addClass('slide-active').siblings().removeClass('slide-active');
dots.eq(index).addClass('active').siblings().removeClass('active');
}
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
display:none;
}
.slide-active{
display:block;
}老师帮忙看一下问题在哪，我在控制台打印可以看到图片 div 上面是添加 了让图片显示的 slide-active 的样式属性，但是切换到下一张的时候removeClass()方法无法清除 slide-active样式，导致图片切换不了。小圆点下面是可以正常切换的
46
收起
正在回答 回答被采纳积分+1
3回答
正在想名字呢
2018-02-16 17:06:42
同学，你这js和jq的方法混在一起了吧~
<body> <div class="pic"> <div class="inner"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> </div> <ul> <li><a href="#" class="active"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <a href="#" class="prev"><img src="img/slider-prev.png" alt=""></a> <a href="#" class="next"><img src="img/slider-next.png" alt=""></a> </div> </body>
<style>
ul{
list-style: none;
position: absolute;
bottom: 0;
left: 175px;
}
ul li{
float: left;
}
ul li a{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffbeaa;
margin-left: 5px;
opacity: 0.6;
}
ul li a.active{
background-color: red;
}
.inner{
width: 3000px;
height: 400px;
}
.inner img{
display: block;
float: left;
}
.pic{
width: 600px;
overflow: hidden;
position: relative;
}
.prev,.next{
position: absolute;
top: 190px;
opacity: 0.6;
}
.next{
right: 0;
}
</style><script>
var num=0;
var timer=null;
var timeout=null;
// 设置鼠标悬浮在按钮切换事件
$("ul li a").mouseenter(function(event){
//设置定时器前应先判断有没有定时器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
num=$(this).parent().index();
//设置悬浮时500毫秒时切换，不足500毫秒时不会切换
timeout=setTimeout(changgeMg,500);
return false;
})
//悬浮在窗口时停止轮播
$(".pic").mouseenter(function(){
//清除定时器
clearInterval(timer);
})
//鼠标移除窗口时开始轮播
$(".pic").mouseleave(function(){
//设置一个3秒的自动轮播定时器
timer=setInterval(changeTab,1000);
})
//点击next切换
$(".next").click(function(){
//设置定时器前应先判断有没有定时器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num<4){
num++;
}else{
num=0;
}
//设置点击后500毫秒去切换，如果点击间隔小于500毫秒不停点击则不会切换
timeout=setTimeout(changgeMg,500);
//不让a元素去默认跳转
return false;
})
//点击prev切换
$(".prev").click(function(){
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num>0){
num--;
}else{
num=4;
}
//设置点击后500毫秒去切换，如果点击间隔小于500毫秒不停点击则不会切换
timeout=setTimeout(changgeMg,500);
return false;
})
//轮播定时器
timer=setInterval(changeTab,1000);
//移动盒子和给当前索引上色
function changgeMg(){
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
}
//定时器函数
function changeTab(){
if (num<4){
num++;
}else{
num=0;
}
changgeMg();
}
</script>我写了一个jq的，你看看~
鱼蛋肠粉
2018-02-16 12:57:12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> jQuery 实现轮播图特效</title> <link rel="stylesheet" href="CSS/style.css"> </head> <body> <!--主体盒子--> <div class="main"> <!--轮播图盒子--> <div class="banner"> <a href="#"> <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> <a href="#"> <div class="banner-slide slide4 "></div> </a> <a href="#"> <div class="banner-slide slide5 "></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 class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> <!--导入 jQuery 库文件--> <script src="JQ/jquery-3.3.1.js"></script> <!--导入 JavaScript 脚本--> <script src="JS/javaScript.js"></script> </div> </body> </html>
/*清除间隙*/
{
margin:0;
padding:0;
}
/*取消 a 标签默认下划线*/
a{
text-decoration: none;
}
/*主体样式*/
body{
font-family:"微软雅黑";
color: #14191e;
background-color: #bbb;
}
/*主体盒子*/
.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden;
}
/*轮播图盒子*/
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
/*轮播图样式*/
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
display:none;
}
/*图片显示*/
.slide-active{
display:block;
}
/*图片1*/
.slide1{
background-image:url(../IMG/1.jpg);
}
/*图片2*/
.slide2{
background-image:url(../IMG/2.jpg);
}
/*图片3*/
.slide3{
background-image:url(../IMG/3.jpg);
}
/*图片4*/
.slide4{
background-image:url(../IMG/4.jpg);
}
/*图片5*/
.slide5{
background-image:url(../IMG/5.jpg);
}
/*切换按钮*/
.button{
position: absolute;
top: 50%;
height: 80px;
width: 40px;
margin-top:-40px;
}
/*上一张*/
.prev{
left: 0;
background:url(../IMG/pre2.png) center center no-repeat;
}
/*下一张*/
.next{
background:url(../IMG/pre.png) center center no-repeat;
right:0;
}
/*按钮鼠标覆盖样式*/
.button:hover{
background-color:#333;
opacity: 0.4;
filter:alpha(opacity=80);
}
/*小圆点盒子*/
.dots {
position: absolute;
bottom: 24px;
right: 0;
text-align: right;
padding-right: 24px;
line-height: 12px;
}
/*小圆点*/
.dots span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
background-color: rgb(140, 144, 148);
cursor: pointer;
box-shadow: 0 0 0 1px rgb(255, 255, 255);
}
/*小圆点选中样式*/
.dots span.active{
box-shadow: 0 0 0 1px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}/**
* Created by josany on 2018/2/13.
*/
$(function () {
var index = 0,
timer = null,
size = $('.banner').find('div').length,
pics = $('.banner').find('div'),
dots = $('span');
// 鼠标移开自动轮播
$('.main').mouseout(function () {
timer = setInterval(function () {
index++;
if(index >= size){
index = 0;
}
changeImg(index);
},2000);
});
// 在页面打开即开始自动轮播
$('.main').mouseout();
// 鼠标覆盖停止轮播
$('.main').mouseover(function () {
clearInterval(timer);
});
// 图片切换单独封装成函数
function changeImg(index) {
dots.eq(index).addClass('active').siblings().removeClass('active');
pics.eq(index).addClass('slide-active').siblings().removeClass('slide-active');
console.log(pics.eq(index));
console.log(dots.eq(index));
};
// 点击下一张切换图片
$('.next').click(function () {
index++;
if(index >= size) index = 0;
changeImg(index);
});
// 点击上一张切换图片
$('.prev').click(function () {
index--;
if(index < 0) index = size - 1;
changeImg(index);
});
// 点击导航圆点切换图片
dots.click(function () {
index = $(this).index();
changeImg(index);
});
});这是全部的代码
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星