代码无法实现js效果，请问是有什么问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jQuery作业</title> <link rel="stylesheet" type="text/css" href="css/jq.css"></head><body> <div calss="title"><h2>jQuery实现轮播图</h2></div> <div class="main" id="main"> <div class="slide img1 s-active"><img src="img/1.jpg"></div> <div class="slide img2"><img src="img/2.jpg"></div> <div class="slide img3"><img src="img/3.jpg"></div> <div class="slide img4"><img src="img/4.jpg"></div> <div class="slide img5"><img src="img/5.jpg"></div> <a href="javascript:void(0)" class="btn pre"></a> <a href="javascript:void(0)" class="btn next"></a> <div class="dots"> <span class="d-active"></span> <span ></span> <span ></span> <span ></span> <span ></span> </div> </div> <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> $(function(){ var timer=null, main=$('.main'), dots=$('span'), pre=$('.pre'), next-$('.next'), slide=$('.slide'), index=0, len=slide.length;function slideImg(){ //自动轮播 function start(){ timer=setInterval(function(){ index++; if(index>=len){ index=0; } changeImg(); },2000); } start(); //停播 function stop(){ if(timer) clearInterval(timer); } main.on('mouseout',function(){ start(); }); main.om('mouseover',function(){ stop(); }); //后退 pre.on('click',function(){ index--; if(index<0){ index=len-1; } changeImg();}); //前进 next.on('click',function(){ index++; if(index>=len){ index=0; } changeImg();}); //圆点 dots.on('click',function(){ index=$(this).index(); changeImg();});//切换图片函数 function changeImg(){ slide.removeClass('s-active'); dots.removeClass('d-active'); slide.eq(index).addClass('s-active'); dots.eq(index).addClass('d-active');}}slideImg();}); </script></body></html> |
0
收起
正在回答 回答被采纳积分+1
3回答
慕码人5074091
2018-09-07 12:41:00
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | *{ padding:0; margin:0; }body{ font-family: "微软雅黑"; color: #14191e;}.main{ width: 1200px; height: 460px; margin:50px auto; overflow: hidden; border:5px solid #bbb; position: relative;}.title{ height:50px;}h2{ font-family:"微软雅黑"; text-align:center; line-height:50px;}.slide{ width: 1200px; height: 460px; background-repeat: no-repeat; position: absolute; display: none;}.s-active{ display: block;}.btn{ position: absolute; width: 30px; height: 60px; left: 0px; top:255px; margin-top:-40px; background: url("../img/pre2.png") no-repeat center center;}.btn:hover{ background-color: #333; opacity: 0.5;}.next{ left: auto; right:0px; background: url("../img/pre.png") no-repeat center center;}.dots{ position: absolute; right: 10px; bottom: 0px; text-align: center;}.dots span{ display: inline-block; width: 12px; height:12px; border-radius: 50%; background:rgba(7,17,27,0.4); box-shadow: 0 0 0 1px rgba(255,255,255,0.7); margin-left:8px; }.dots span.d-active{ box-shadow: 0 0 0 1px rgba(7,17,27,0.4); background:#fff;} |
相似问题
为什么无法实现效果？
1
0
3
关于JDK动态代理实现接口的疑问
31
0
5
效果无法实现
0
0
7
为啥代码实现出来的效果不对
1
0
12
用背景图片设置的方法实现不了要求的效果
0
0
4
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧