基于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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
微信小程序input抖动问题的修复方法
Mar 03 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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 url路由入门实例
2014/04/23 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php实现上传图片文件代码
2015/07/19 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python中List的sort方法指南
2014/09/01 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
利用python开发app实战的方法
2019/07/09 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
个人能力自我鉴赏
2014/01/25 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
超市收银员岗位职责
2015/04/07 职场文书
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL