功能描述:

1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏

2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步

3.拷贝第一张图片添加到ul最后可以实现动态添加图片

4.给箭头绑定单击事件,并且使图片可以无缝轮播

5.实现自动轮播(动画函数)

具体实现代码:

1.鼠标移入左右侧箭头显示,鼠标离开箭头隐藏

 con.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block'; // 将左右箭头的display设为block
arrow_r.style.display = 'block';
});
con.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none'; // 将左右箭头display设为none
arrow_r.style.display = 'none';
});

2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步

 for(var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i); // 通过添加自定义属性来记录小圆圈索引号
ol.appendChild(li); // 将创建的li添加进ol里
// 生成小圆圈的同时就可以给它绑定单击事件
li.addEventListener('click', function() {
// 排他思想 干掉所有人,留下我自己
for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圆圈改为未选中状态
ol.children[i].className = '';
}
// 再把当前小圆圈改为选中状态
this.className = 'current';
var index = this.getAttribute('index'); // 获取当前小圆圈的索引
// 将index值赋值给num以及circle,将小圆圈的点击事件和左右箭头点击事件同步
num = index;
circle = index;
animate(ul, - index * conWidth);
})
}

3.拷贝第一张图片添加到ul最后可以实现动态添加图片

 // 克隆第一张图片
var first = ul.children[0].cloneNode(true); // true 深拷贝
ul.appendChild(first); // 拷贝第一张图片添加到ul最后

4.给箭头绑定单击事件,并且使图片可以无缝轮播

①右侧箭头的单击事件

 var num = 0;    // 用来存储点击后图片序号
var circle = 0; // 用来存储点击后小圆圈序号
var flag = true; // flag 节流阀 防止用户点击过快 图片播放太快
// 右侧箭头点击播放
arrow_r.addEventListener('click', function() {
if(flag) {
// 点击后先关闭节流阀
flag = false;
// 如果播放到了最后一张,就把left直接值设为0从头播放,同时还原num
if(num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, - num * conWidth, function() {
// 回调函数 动画执行完后开启节流阀
flag = true;
});
// 小圆圈和箭头一起变化
circle++;
/* if(circle == ol.children.length) {
circle = 0;
} */
// 可以用三元运算符判断小圆圈是否到了最后一个,如果是最后一个就还原circle
circle == ol.children.length ? circle = 0 : circle;
circleChange(); // 使当前小圆圈为选中状态(重复代码封装到一个函数里了)
}
})

②左侧箭头的单击事件

 arrow_l.addEventListener('click', function() {
if(flag) {
// 首先关闭节流阀
flag = false;
// 如果播放到了第一张,就把left值设为最后一张的值
if(num == 0) {
num = ul.children.length - 1;
ul.style.left = - num * conWidth + 'px';
}
num--;
animate(ul, - num * conWidth, function() {
flag = true;
});
// 小圆圈和箭头一起变化
circle--;
// 三元表达式 circle < 0 时说明是第一张图片,将小圆圈改为第四个(索引为3)
circle < 0 ? circle = ol.children.length - 1 : circle;
circleChange();
}
})
circleChange();函数代码
 // 小圆圈的选中状态(相同代码可以封装为一个函数,使代码更简洁)
function circleChange() {
// 排他思想
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}

5.实现自动轮播(动画函数)

 // 自动播放轮播图,相当于隔一段时间调用一次右侧箭头点击事件
var timer = setInterval(function() {
// 手动调用点击事件
arrow_r.click();
}, 2000);

动画函数 animate.js(ps:我没有把这个写入下边index.js里,这个要你自己弄进去哦,可以作为animate.js文件引入进去或者直接粘贴到你的js代码里边)

 // obj 动画对象
// target 目标位置
// callback 回调函数
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10; // step步长值
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 大于零向上取整,小于零向下取整
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
// if(callback) { // 判断是否传了回调函数
// callback(); // 回调函数,当动画执行完后才执行
// }
// &&是短路运算符,存在callback时才会继续执行callback()
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}

具体实现代码如下:

HTML代码:

 <div class="con">
<i class="icon iconfont iconarrow_left arrow-l"></i>
<i class="icon iconfont iconarrow_right arrow-r"></i>
<ul>
<li>
<a href="javascript:;"><img src="data:images/img1.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="data:images/img2.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="data:images/img3.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="data:images/img4.jpg" alt=""></a>
</li>
<li>
<a href="javascript:;"><img src="data:images/img5.jpg" alt=""></a>
</li>
</ul>
<ol>
</ol>
</div>

ps: 我左右侧小箭头是使用的Iconfont图标(iconarrow_left,iconarrow_right),要引入进去

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1518420_oljcm07nn2.css">

CSS代码:

 <style>
* {
margin: 0;
padding: 0;
}
ul,li,ol,a {
list-style: none;
text-decoration: none;
}
.con {
width: 533px;
height: 300px;
margin: 100px auto;
position: relative;
background-color: #f0f0f0;
overflow: hidden;
}
.arrow-l,.arrow-r{
display: none;
width: 20px;
height: 40px;
line-height: 40px;
text-align: center;
color: #eee;
position: absolute;
top: 45%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 2;
cursor: pointer;
}
.arrow-l {
left: 0;
}
.arrow-r{
right: 0;
}
ul {
position: absolute;
width: 600%;
}
ul li {
float: left;
}
ul li img {
width: 533px;
height: 300px;
}
ol {
position: absolute;
left: 50%;
bottom: 8px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
ol li {
float: left;
width: 6px;
height: 6px;
margin: 0 2px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.current {
background-color: #ffe;
}
</style>

详细JavaScript代码(index.js)

 window.addEventListener('load', function() {   // 等页面加载完毕
// 获取需要用到的的元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var con = document.querySelector('.con');
var conWidth = con.offsetWidth;
// 鼠标经过箭头显示,鼠标离开箭头隐藏
con.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block'; // 将左右箭头的display设为block
arrow_r.style.display = 'block';
// 鼠标经过停止定时器
clearInterval(timer);
timer = null; // 释放定时器变量
});
con.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none'; // 将左右箭头display设为none
arrow_r.style.display = 'none';
// 鼠标离开再重新开启定时器
timer = setInterval(function() {
// 手动调用点击事件
arrow_r.click(); // 自动轮播
}, 2000);
}); var ul = con.querySelector('ul');
var ol = con.querySelector('ol');
// 动态添加底部小圆圈
for(var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
// 通过添加自定义属性来记录小圆圈索引号
li.setAttribute('index', i);
ol.appendChild(li);
// 生成小圆圈的同时就可以给它绑定单击事件
li.addEventListener('click', function() {
// 排他思想 干掉所有人,留下我自己
for(var i = 0; i < ol.children.length; i++) { // 先把所有的小圆圈改为未选中状态
ol.children[i].className = '';
}
// 再把当前小圆圈改为选中状态
this.className = 'current';
var index = this.getAttribute('index'); // 获取当前小圆圈的索引
// 将index值赋值给num以及circle,将小圆圈的点击事件和左右箭头点击事件同步
num = index;
circle = index;
animate(ul, - index * conWidth);
})
}
// 让第一个小圆圈底色为白色(选中状态)
ol.children[0].className = 'current';
// 克隆第一张图片
var first = ul.children[0].cloneNode(true); // true 深拷贝
ul.appendChild(first); // 拷贝第一张图片添加到ul最后 var num = 0; // 用来存储点击后图片序号
var circle = 0; // 用来存储点击后小圆圈序号
var flag = true; // flag 节流阀 防止用户点击过快 图片播放太快
// 右侧箭头点击播放
arrow_r.addEventListener('click', function() {
if(flag) {
// 点击后先关闭节流阀
flag = false;
// 如果播放到了最后一张,就把left直接值设为0从头播放,同时还原num
if(num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, - num * conWidth, function() {
// 回调函数 动画执行完后开启节流阀
flag = true;
});
// 小圆圈和箭头一起变化
circle++;
/* if(circle == ol.children.length) {
circle = 0;
} */
// 可以用三元运算符判断小圆圈是否到了最后一个,如果是最后一个就还原circle
circle == ol.children.length ? circle = 0 : circle;
circleChange(); // 使当前小圆圈为选中状态
}
}) // 左侧箭头点击播放
arrow_l.addEventListener('click', function() {
if(flag) {
// 关闭节流阀
flag = false;
// 如果播放到了第一张,就把left值设为最后一张的值
if(num == 0) {
num = ul.children.length - 1;
ul.style.left = - num * conWidth + 'px';
}
num--;
animate(ul, - num * conWidth, function() {
flag = true;
});
// 小圆圈和箭头一起变化
circle--;
// circle < 0 时说明是第一张图片,将小圆圈改为第四个(索引为3)
if(circle < 0) {
circle = ol.children.length - 1;
}
circleChange();
}
})
// 小圆圈的选中状态(相同代码可以封装为一个函数,使代码更简洁)
function circleChange() {
// 排他思想
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
// 自动播放轮播图,相当于隔一段时间调用一次右侧箭头点击事件
var timer = setInterval(function() {
// 手动调用点击事件
arrow_r.click();
}, 2000);
})

JavaScript实现动态轮播图效果的更多相关文章

  1. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  2. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  3. 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...

  4. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  5. 纯CSS实现轮播图效果,你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  6. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. 小程序实践(二):swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  8. Android项目实战(四十七):轮播图效果Viewpager

    简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V    需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...

  9. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

随机推荐

  1. 基于HTTP协议的WAF绕过

    一,畸形包绕过 1.先关闭burpsuite长度更新,为get请求,先使用bp的method转换为POST请求 2.get请求中空格使用%20代替,Connection改为keep-alive 二,分 ...

  2. Webstrom怎么修改主题

    开发Node.js程序,当选首选的是webstorm IDE工具,这个不用解释.但是可能很多习惯其它IDE的同学在使用Webstorm的时候,后感觉webstorm的主题,并不怎么适合自己的审美.就 ...

  3. QQ登录功能之如何获取用于本地测试的APPID

    本文主要说明一下开发者如何在QQ互联创建测试应用,从而分配给我们一套APP ID和APP KEY,在我们平时学习的时候使用. 一.QQ互联注册开发者 要想使用QQ登陆的功能,首先你必须是腾讯开发者.腾 ...

  4. Stream系列(十二) PartitioningBy方法使用

    分割列表 视频讲解: https://www.bilibili.com/video/av78106120/ EmployeeTestCase.java package com.example.demo ...

  5. 记一次MySQL数据库导入错误

    昨天在转数据的时候,控制台报出了下面这个warning: Warning: Data truncated for column '控制距离' at row 1 字面上意思应该是:控制距离这一字段在第一 ...

  6. 【Android - 自定义View】之View的draw过程解析

    draw(绘制)过程的作用是将View绘制到屏幕上面.View中有 draw() 方法和 onDraw() 方法,但onDraw()方法是空方法:ViewGroup中没有draw()方法,也没有onD ...

  7. docker配置mysql主从与django实现读写分离

    一.搭建主从mysql环境 1 下载mysql镜像 docker pull mysql:5.7 2 运行刚下载的mysql镜像文件 # 运行该命令之前可以使用`docker images`是否下载成功 ...

  8. HTTPS工作流程(入门)

    1.CA(为服务器做担保的第三方机构)将包含CA[公钥C]等信息的[证书C]发送给浏览器: 2.服务器将其[公钥S]和网站信息发送给CA: 3.CA用CA[私钥C]将这些信息加密得到了签名后的[服务器 ...

  9. mysql主从架构搭建

    1.配置文件,开启二进制日志 vim /etc/my.cnf 在mysql下增加如下内容 server-id= log-bin=mysql-bin relay-log=mysql-relay 2.登录 ...

  10. Leecode_98_Validate_Binary_Search_Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...