焦点图轮播特效_技术问答

老师为什么跟你写的代码一抹一样，可是单击按钮实现不了左右切换呀: 你看看你的html代码和css3代码是不是有问题，我的一开始出不来，就是因为html写错了; 2019-12-26 1回答·953浏览

你css样式写在行内才可以像视频内这样写，不然就应该用

list.style.left = list.offsetLeft + offset + 'px' ;

也可以console.log()看看俩个的属性，就知道了。

2019-10-20 1回答·1107浏览

qq_慕设计4315334

老师，我在做轮播图时，多次点击箭头<>时会发生图片与焦点对应不一样是什么问题？: 2019-09-15 2回答·1136浏览

蒹葭苍沧

左右箭头的符号怎么做出来的

哦哦，谢谢哈

2019-08-21 2回答·1313浏览

weixin_慕工程3554094

求解求解答: 你的list 不存在啊你var 的是那个就给那个添加onclick事件; 2019-06-20 1回答·540浏览

驻足良久

这个轮播效果为啥出不来呢跟着他写的: 首先呢你的函数名字前后不一致，然后parseInt,你要注意字母大小写; 2019-06-05 1回答·823浏览

慕运维920257

我点箭头不动求解，下面我代码

我的也不动，但是它在dw里面可以动，在网页上浏览就不动了

2018-12-17 2回答·991浏览

慕粉4378889

什么意思啊，怎么轮播效果也出不来？: 这个代码没有添加任何事件啊，只是取了元素，当然没有效果~; 2018-11-16 2回答·1413浏览

慕婉清5026906

这个开头那个list.style.left中这个list是什么意思？不理解: 上面不是var list = document.getElementById（”list“）了么这时候你获取到的元素存在变量list里面了就是var后面那个变量里面了然后调用这个元素的方法; 2018-11-11 2回答·1506浏览

BlueWonder丶

轮播图部分是跟着视频老师一起写的，但是为什么点了箭头图片却不切换？: 2018-10-25 3回答·1645浏览

小黄鸡07

只看了一二三章的内容，为什么看不到箭头呀？

js代码

getElementById()和getElementsByTagName()的方法名也是有错

2018-10-17 3回答·1248浏览

慕侠3556423

点击图片不滚动

next.onclick=function(){

animate(-3000);

}

prev.onclick=function(){

animate(3000);

2018-09-17 1回答·1226浏览

慕仔2441499

输入alert取值发现list.style.left的值可以取到，但是点击箭头图片不切换

list.style.left = parseInt(list.style.left) - 3000 + 'px';

//同理下面的也是

2018-09-05 1回答·1084浏览

假装自己是全栈

点击next图片没反应

<a href="javascript:;" class="arrow" id="prev">&lt</a>

<a href="javascript:;" class="arrow" id="next">&gt</a>

2018-09-01 1回答·1446浏览

qq_dandelion_30

点了箭头不切换: 你有多少张照片？我复制你的代码去运行，点击箭头会切换喔; 2018-08-19 1回答·363浏览

哈尔波儿

可以帮忙看一下吗，点击next 图片不变

已采纳 Web程序媛的回答

window.onload=function(){

var box=document.getElementById("box");

var list=document.getElementById("list");

var buttoms=document.getElementById("buttoms").getElementsByTagName("span");

var prev=document.getElementById("prev");

var next=document.getElementById("next");

}（将这个大括号移到</script>前面）

// function animate(offset){

// list.style.left=parseInt(list.style.left)+offset+"px";

// }

next.onclick=function(){

list.style.left=parseInt(list.style.left)-900+"px";

}

prev.onclick=function(){

list.style.left=parseInt(list.style.left)+900+"px";

}

</script>

2018-08-16 2回答·1489浏览

夜阑卧听风吹雨y

和老师跟着写的，运行不了: 那你设置的List 全改为小写; 2018-06-24 1回答·1175浏览

赵放

如下代码只能执行一次只是第一次改变了left的值，第二次点击就没有用了: 你怎么没用pastint; 2018-05-26 1回答·1183浏览

qq_lonely_nACJK2

图片不更换: 已采纳 wak47mny 的回答; 没有完整的代码，很难正确的回答你。; 2018-05-18 1回答·1265浏览

慕桂英4069867

list 的style

每张图片的width=600;在图一之前有图5，显示图一，left为-600

2018-03-03 2回答·1317浏览

慕粉2203123783

该课程提供的源码里有用jquery写的方案，有一段不理解，望有人解惑

先解释这两行代码：

offset = '+=' + offset;
和
offset = '-=' + Math.abs(offset);

在JavaScript里面，字符串+数字=字符串，( •̀ ω •́ )

一开始，该函数接收到的offset为一个值，+600或-600，

这里的if…else…就是让offset变成字符串“+=600”或“-=600”

为什么呢？

jQuery 动画 - animate() 方法
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

↑ 说白了就是语法要求。

最后的两个if判断不用多说吧，就是把图片归位，因为一共有七张图，其中第一张和最后一张都是假图，

当扫到第一张“假图”时归位成图⑤（第六张），当扫到最后一张“假图”时归位成图①（第二张）。

2018-01-16 1回答·1295浏览

qq_海拥天的边际地_0

想要源码，: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-decoration: none;
}

body {
padding: 20px;
}

#container {
position: relative;
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
}

#list {
position: absolute;
z-index: 1;
width: 4200px;
height: 400px;
}

#list img {
float: left;
width: 600px;
height: 400px;
}
#buttons {
position: absolute;
left: 250px;
bottom: 20px;
z-index: 2;
height: 10px;
width: 100px;
}

#buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
}

#buttons .on {
background: orangered;
}

.arrow {
position: absolute;
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
}

.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}

#container:hover .arrow {
display: block;
}

#prev {
left: 20px;
}

#next {
right: 20px;
}
</style>
</head>
<body>

<div id="container">
<div id="list" style="left: -600px">
<img src="img/05.jpg" alt="1">
<img src="img/01.jpg" alt="1">
<img src="img/02.jpg" alt="2">
<img src="img/03.jpg" alt="3">
<img src="img/04.jpg" alt="4">
<img src="img/05.jpg" alt="5">
<img src="img/01.jpg" alt="5">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script>
window.onload=function (){
var container =document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');//获取5个按钮
var prev=document.getElementById('prev');//上一个
var next=document.getElementById('next');//下一个
var index=1;
/*点亮小圆点*/
function showButton(){

for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}

/*箭头点击事件**/
function animate(offset){//封装按钮左右点击，传参offset
var newLeft=parseInt(list.style.left)+offset;
var time=300;//位移总时间
var interval=10;//位移间隔
var speed=offset/(time/interval);//每次位移量

function go(){
if((speed<0 && parseInt(list.style.left)>newLeft) || (speed >0&&parseInt(list.style.left)<newLeft)){
list.style.left=parseInt(list.style.left)+speed+'px';

/*定时器*/
setTimeout(go,interval);
}
else{

list.style.left=newLeft+'px';
/* 判断是否滚动到附属图上，滚动到附属图上归位*/
if(newLeft> -600){
list.style.left = -3000 + 'px';
}
if(newLeft< -3000){
list.style.left = -600 + 'px';
}
}
}

go();

}
next.onclick=function (){
if(index==5){
index=1;
}
else{
index +=1;
}

showButton();
animate(-600);//点击右箭头-600
}
prev.onclick=function (){
if(index==1){
index=5;
}
else{
index -= 1;
}

showButton();
animate(-600);//点击左箭头600
}

for(var i=0;i<buttons.length;i++){
//原始值
buttons[i].onclick=function (){
if(this.className=='on'){
return;
}

var myIndex=parseInt(this.getAttribute('index'));
var offset=-600 *(myIndex -index);
animate(offset);
index=myIndex;
showButton();
}
}

}
</script>
</body>
</html>; 2017-08-29 1回答·1433浏览

慕丝6966254

请问一下，轮播图编程顺序可以换吗: 已采纳 LeviMaster 的回答; 可以的，但是你实现了小圆点轮播之后，再实现左右轮播，测试起来，会不好测试。; 2017-08-20 1回答·1675浏览

慕九州5369331

把js代码写到新建的js文件里，那在html中href那里该怎么写?: <script src="js/new.js"></script>; 2017-08-16 2回答·1443浏览

葡萄3

点击箭头不动，请问是为什么？: 我把style="left:-600px;"本来是写在style标签中的，后来挪到list标签后面才行，请问有啥区别吗，不一样吗; 2017-07-30 3回答·1726浏览

大山里荒漠里

讲师源代码在哪里下载？我的为什么箭头不动: 源代码下载在视屏右下角位置; 2017-07-01 1回答·1135浏览

Slimpan

为什么点击箭头，我的图片没有反应？js代码如下:: 在html文件list标签后加个style="left:-600px"就可以了; 2017-06-02 2回答·1204浏览

慕丝6535441

有个问题想提问: lt;ahref="#target3"target="_blank"gt;第三个锚点lt;/agt;怎么理解啊，新手; 2017-05-30 4回答·1426浏览

qq_笪打笪_0

为什么我的箭头和小圆点跟着第一张图片跑？: 已采纳嘴硬欠吻的回答; 你把箭头和小圆点都放在图片的div里了，试着把图片还有箭头跟小圆点分开放; 2017-05-15 1回答·895浏览

风戈

箭头不显

.arrow{

display:none;

}

#div0:hover .arrow{

display: block;

}

</style>

检查下你的css样式设置对着么，上面的可参考下。

2017-05-03 3回答·963浏览