基于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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascript下过滤数组重复值的代码
Sep 10 Javascript
日期 时间js控件
May 07 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 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利用事务处理转账问题
2015/04/22 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
取得传值的函数
2006/10/27 Javascript
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
python生成器表达式和列表解析
2016/03/10 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python 复平面绘图实例
2019/11/21 Python
python构造函数init实例方法解析
2020/01/19 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
摄影专业毕业生求职信
2014/08/05 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android