基于JavaScript实现轮播图原理及示例


Posted in Javascript onApril 10, 2020

网上有很多的例子介绍,在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。

我们首先看一下 div+css 的结构样式:

基于JavaScript实现轮播图原理及示例

div+css代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 ul,ol{
 list-style: none;
 }
 /*消除图片底部3像素距离*/
 img{
 vertical-align: top;
 }
 .scroll{
 width: 500px;
 height: 200px;
 margin: 100px auto;
 border: 1px solid #ccc;
 padding: 7px;
 overflow: hidden;
 position: relative;
 }
 .box{
 width: 500px;
 height: 200px;
 overflow: hidden;
 position: relative;
 }
 .box ul{
 width: 600%;
 position: absolute;
 left: 0;
 top: 0;
 }
 .box ul li{
 float: left;
 }
 .scroll ol{
 position: absolute;
 right: 10px;
 bottom: 10px;

 }
 .scroll ol li{
 float: left;
 width: 20px;
 height: 20px;
 background: pink;
 text-align: center;
 line-height: 20px;
 border-radius: 50%;
 background-color: pink; 
 margin-left:10px ;
 cursor: pointer;
 }
 .scroll ol li.current{
 background-color: purple;
 }
 </style>
 </head>
 <body>
 <div id="scroll" class="scroll">
 <div id="box" class="box">
 <ul id="ul">
 <li><img src="images/1.jpg" width="500" height="200"></li>
 <li><img src="images/2.jpg" width="500" height="200"></li>
 <li><img src="images/3.jpg" width="500" height="200"></li>
 <li><img src="images/4.jpg" width="500" height="200"></li>
 <li><img src="images/5.jpg" width="500" height="200"></li>
 </ul>
 <ol id="ol">
 <li class="current">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </div>
 </div>
 </body>
</html>

展示效果如图:

基于JavaScript实现轮播图原理及示例

接下来js代码,再此之前我们要明白,小圆点 1 2 3 并不是写死的,它是根据ul li中的图片张数来决定的 ,所以我们要先把div中ol li中的代码去掉。

要实现无缝滚动就需要多一张图片才行 ,即克隆第一张图片,放到最后面。此时css布局保留,div中只剩下:

<body>
 <div id="scroll" class="scroll">
 <div id="box" class="box">
 <ul id="ul">
 <li><img src="images/1.jpg" width="500" height="200"></li>
 <li><img src="images/2.jpg" width="500" height="200"></li>
 <li><img src="images/3.jpg" width="500" height="200"></li>
 <li><img src="images/4.jpg" width="500" height="200"></li>
 <li><img src="images/5.jpg" width="500" height="200"></li>
 </ul> 
 </div>
 </div>
 </body>

此时我们用js代码生成小圆点

var scroll = document.getElementById("scroll"); // 获得大盒子
var ul = document.getElementById("ul"); // 获得ul
var ulLis = ul.children;// 获得ul的盒子 以此来生成ol中li的个数
var liWidth = ul.children[0].offsetWidth;// 获得每个li的宽度
 // 操作元素
 // 因为要做无缝滚动,所以要克隆第一张,放到最后一张后面
 // 1. 克隆元素
 ul.appendChild(ul.children[0].cloneNode(true));

 // 2.创建ol 和li
 vaar ol = document.createElement("ol");//创建ol元素
 scroll.appendChild(ol);// 把ol放到scroll盒子里面去
 for (var i=0;i<ulLis.length-1;i++) {
 var li = document.createElement("li");// 创建li元素
 li.innerHTML = i + 1;// 给li里面添加文字 1 2 3 4 5
 ol.appendChild(li);// 将li元素添加到ol里面
 }
ol.children[0].className = "current";// ol中的第一个li背景色为purple

此时ol li元素即小圆点创建完毕 我们接着用js做动画

动画部分包括:

1.鼠标经过第几个小圆点,就要展示第几张图片,并且小圆点的颜色也发生变化
2.图片自动轮播,(这需要一个定时器)
3.鼠标经过图片,图片停止自动播放(这需要清除定时器)
4.鼠标离开图片,图片继续自动轮播 (重新开始定时器)
这里我们封装了一个animate()动画函数

// 动画函数 第一个参数,代表谁动 第二个参数 动多少
// 让图片做匀速运动,匀速动画的原理是 当前的位置 + 速度 即 offsetLeft + speed

 function animate(obj,target){
 // 首先清除掉定时器
 clearInterval(obj.timer);
 // 用来判断 是+ 还是 - 即说明向左走还是向右走
 var speed = obj.offsetLeft < target ? 15 : -15;
 obj.timer = setInterval(function(){
 var result = target - obj.offsetLeft;//它们的差值不会超过speed
 obj.style.left = obj.offsetLeft + speed + "px";
 // 有可能有小数的存在,所以在这里要做个判断 
 if (Math.abs(result) <= Math.abs(speed)) {
 clearInterval(obj.timer);
 obj.style.left = target + "px";
 }
 },10);
 }

定时器 函数

var timer = null; // 轮播图的定时器
 var key = 0;// 控制播放的张数
 var circle = 0;// 控制小圆点

 timer = setInterval(autoplay,1000);// 自动轮播
 function autoplay(){
 /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,
 就要重头开始播放. 因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
 key++; // 先++
 if(key > ulLis.length-1){// 后判断

 ul.style.left = 0; // 迅速调回
 key = 1; // 因为第6张是第一张,所以播放的时候是从第2张开始播放
 }
 // 动画部分
 animate(ul,-key*liWidth);
 // 小圆点circle 当显示第几张图片是,对应的小圆点的颜色也发生变化

 /*同理,对小圆点也要有一个判断*/
 circle++;
 if (circle > olLis.length-1) {
 circle = 0;
 }
 // 小圆点颜色发生变化
 for (var i = 0 ; i < olLis.length;i++) {
 // 先清除掉所用的小圆点类名
 olLis[i].className = ""; 
 }
 // 给当前的小圆点 添加一个类名
 olLis[circle].className = "current";

 }

好啦,这里我们展示了主要代码,具体代码,查看这里下载js实现轮播效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
js实现模糊匹配功能
Feb 15 #Javascript
js 性能优化之算法和流程控制
Feb 15 #Javascript
微信小程序 常用工具类详解及实例
Feb 15 #Javascript
微信小程序 基础知识css样式media标签
Feb 15 #Javascript
js 性能优化之快速响应的用户界面
Feb 15 #Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 #Javascript
DOM事件探秘篇
Feb 15 #Javascript
You might like
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
vue.js的提示组件
2017/03/02 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
小程序实现密码输入框
2020/11/16 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python opencv判断图像是否为空的实例
2019/01/26 Python
Python for循环与range函数的使用详解
2019/03/23 Python
关于Python解包知识点总结
2020/05/05 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
大学生标准推荐信范文
2013/11/25 职场文书
廉政教育心得体会
2014/01/01 职场文书
称象教学反思
2014/02/03 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
升学宴演讲稿
2014/09/01 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python