笔记|前端作业-图片轮播
学完定时器就想来做一做，然而这个并不是我想象得这么简单，我以为在自动播放的基础上添加一个if条件即可，然而我基础不好，对于left和宽度的判断都不是很准确，写法也不规范，if判断老是失败，而且offseLeft的判断好像是实时的，这样我的想法更加实现不了了。于是找了个视频跟着做的，视频里还包括有点击圆点动画运动和图片自动轮播的功能，我就一并学习并写上了，下面含有代码注释（以防自己在忘掉。。。）
html代码
- 锐客网
文章图片
文章图片
文章图片
文章图片
css代码
*{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#div1 {
width: 400px;
height: 400px;
position: relative;
margin: 150px 600px;
overflow: hidden;
}
#div1 ul {
width: 600%;
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 400px;
height: 400px;
}
#div1 ol {
position: absolute;
top: 375px;
left: 10px;
float: left;
}
ol li {
float: left;
background-color: white;
margin: 0 6px;
width: 8px;
height: 8px;
border-radius: 10px;
cursor: pointer;
}
.current {
background-color: #FF0000;
}
.arrow1,.arrow2 {
display: none;
z-index: 100;
position: absolute;
width: 50px;
height: 50px;
}
.arrow1 {
top: 200px;
left: 0px;
background:url(images/jiantou_zuo.png) no-repeat;
}
.arrow2 {
top: 200px;
left: 350px;
background:url(images/jiantou_you.png) no-repeat;
}js函数animate代码+js轮播实现代码
function animate (obj,target,callback){
clearInterval(obj.timer);
//避免开启太多的定时器使得动画效果异常
obj.timer=setInterval(function(){
var step=(target-obj.offsetLeft)/10;
//缓动动画，运动快要结束的时候缓慢结束
step=step>0?Math.ceil(step):Math.floor(step);
//这样写向左移动还是向右移动就都适用了
if(obj.offsetLeft==target){
clearInterval(obj.timer);
callback&&callback();
//回调函数，运动函数实行完后，运行这个回调函数
}
obj.style.left=obj.offsetLeft+step+'px';
},15);
}window.addEventListener('load',function(){
var arrow1=document.getElementById('arrow1');
var arrow2=document.getElementById('arrow2');
var oDiv=document.getElementById('div1');
var num=0;
var circle=0;
//触摸显示箭头，鼠标离开箭头消失
oDiv.onmouseover=function(){
arrow1.style.display='block';
arrow2.style.display='block';
clearInterval(timer);
//鼠标移入，图片自动轮播结束
timer=null;
}
oDiv.onmouseout=function(){
arrow1.style.display='none';
arrow2.style.display='none';
timer=setInterval(function(){
arrow2.click();
},2500)//鼠标离开，图片自动轮播再开始
}
var ol=document.getElementById('ol');
var ul=document.getElementById('ul');
var oDivwidth=oDiv.offsetWidth;
//添加原点并实现排他思想
for(var i=0;
i效果
文章图片
【笔记|前端作业-图片轮播】
推荐阅读
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- Android中的AES加密-下
- 【读书笔记】贝叶斯原理
- 【韩语学习】（韩语随堂笔记整理）
- 人性的弱点-笔记
- 读书笔记:博登海默法理学|读书笔记:博登海默法理学 —— 正义的探索（1）
- D034+3组苏曼＋《写作这回事》读书笔记
- 《自我的追寻》读书笔记3
- 最有效的时间管理工具（赢效率手册和总结笔记）
- 17|17 关山松 第二课作业#公众号项目# D20