焦点图轮播特效_技术笔记

遇上兔跑的龟 2021-08-19

window.onload=function(){}//window.onload事件当文档加载完后开始获取元素

声明变量获取元素时：
在var中， document.getElementById('')获取元素ID
.getElementsTagName('')获取标签元素，注意获取标签元素时Element后面多一个s

添加事件绑定：（触发事件要做什么）
点击箭头next时,进行图片位置偏移，即改变图片的left值
next.onclick = function(){
list.style.left = parseInt(list.style.left) + 偏移参数 + 'px';
}

封装为函数：把正、负参数通过函数调用
function jiantou(canshu){
list.style.left = parseInt(list.style.left) + canshu + 'px';
}
next.onclick=function(){
jiantou(-canshu)//输入一个负的偏移参数
}
prev.onclick=function(){
jiantou(+canshu)//输入一个正的偏移参数
}

0赞 · 0采集
慕后端4063090 2021-03-06

oo

0赞 · 0采集
weixin_慕勒1357949 2018-11-28

window.onload当页面加载完成后获取

0赞 · 0采集
NEPTOO 2018-10-10

animate()函数

截图
0赞 · 1采集
qq_击石原有火_03828381 2018-09-16

animate(offset)

截图
0赞 · 0采集
qq_击石原有火_03828381 2018-09-16

箭头点击功能

截图
0赞 · 0采集
慕标4251973 2018-06-30
123344
0赞 · 0采集
慕粉1620057896 2018-03-10

箭头切换函数

截图
0赞 · 0采集
凡简 2017-12-05

window.onload 页面加载完毕后开始获取元素

截图
0赞 · 0采集
陈雨璐 2017-12-05

window.onload=function( ) 页面加载完之后才开始获取元素

0赞 · 0采集
慕瓜5189485 2017-11-09

window.onload=function() { var container=document.getElementById('container'); var list=document.getElementById('list'); var buttons=document.getElementById('button').getElementsByTagName('span'); var prev=document.getElementById('prve'); var next=document.getElementById('next'); prev.onclick=function(){ animate(600); } next.onclick=function(){ animate(-600); } function animate(offect){ list.style.left=parseInt(list.style.left)+offset+‘px’; }

0赞 · 0采集
张飞东 2017-07-17

Window.onload //页面全加载完再执行获取

截图
0赞 · 0采集
张飞东 2017-07-17

Window

截图
0赞 · 0采集
riyyao 2017-06-30

window.onload=function() { var container=document.getElementById('container'); //获取父容器 var list=document.getElementById('list'); //获取list列表元素 var buttons=document.getElementById('button').getElementsByTagName('span'); //获取按钮，结果是数组，buttons.length=5; var prev=document.getElementById('prve'); //获取按钮 var next=document.getElementById('next'); next.onclick=function(){ list.style.left=parseInt(list.style.left)-600+'px'; } next.onclick=function(){ list.style.left=parseInt(list.style.left)+600+'px'; } /* 封装为函数： function animate(offect) { list.style.left=parseInt(list.style.left)+offset+‘px’; } 调用函数： prev.onclick=function(){ animate(600);} next.onclick=function(){ animate(-600);} */ }

0赞 · 0采集
慕粉2332018849 2017-04-23

parseInt（）将数组转换为数字

截图
0赞 · 0采集
慕UI6939182 2017-02-27

window.onload=function() { var container=document.getElementById('container'); //获取父容器 var list=document.getElementById('list'); //获取list列表元素 var buttons=document.getElementById('button').getElementsByTagName('span'); //获取按钮，结果是数组，buttons.length=5; var prev=document.getElementById('prve'); //获取按钮 var next=document.getElementById('next'); next.onclick=function(){ list.style.left=parseInt(list.style.left)-600+'px'; } next.onclick=function(){ list.style.left=parseInt(list.style.left)+600+'px'; } /* 封装为函数： function animate(offect) { list.style.left=parseInt(list.style.left)+offset+‘px’; } 调用函数： prev.onclick=function(){ animate(600);} next.onclick=function(){ animate(-600);} */ }

0赞 · 0采集
萌杜 2017-02-23

轮番

截图
0赞 · 0采集
qq_小小的石头_1 2017-02-19

要实现切换效果，首先html代码里面要这样写。<div id="list" style="left:0px;"></div>然后才可以通过js来控制left值变化。

2赞 · 0采集
Winchesterr 2017-02-18

CSS样式

截图
0赞 · 0采集
富宝森林 2016-12-26

parseInt(list.style.left)把字符串变为整数值

0赞 · 0采集
qq_沧桑浪漫_04248504 2016-12-09

CSS样式查看

0赞 · 0采集
SummerGone 2016-11-25

paresInt()只保留字符串中的数字

1赞 · 0采集
Immortality 2016-10-20

parseint函数把一个字符串转换成数字

0赞 · 0采集
Immortality 2016-10-20

添加事件绑定

0赞 · 0采集
Weiss3858599 2016-10-13

getElementsByTagName(),这个方法和getElementById不一样，中间有个s

0赞 · 0采集
慕粉3724715 2016-10-01

切换内容

截图
0赞 · 1采集
jfhdibrbfjd 2016-09-23

看了第二遍终于会这里了

0赞 · 0采集
P妞酱酱 2016-09-22

dddddddd

截图
0赞 · 0采集
P妞酱酱 2016-09-22

xxxxxxxxxx

截图
0赞 · 0采集
P妞酱酱 2016-09-22

ddddddddddd

截图
0赞 · 0采集

数据加载中...