基于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 相关文章推荐
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 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递归列出所有文件和目录的代码
2008/09/10 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
Prototype源码浅析 Number部分
2012/01/16 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python3中exp()函数用法分析
2019/02/19 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python虚拟环境venv用法详解
2020/05/25 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Java面试题:为什么要用Java
2012/05/11 面试题
文秘求职信范文
2014/04/10 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
委托证明范本
2014/11/25 职场文书
销售员岗位职责
2015/02/10 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
MySQL查询日期时间
2022/05/15 MySQL
Python加密与解密模块hashlib与hmac
2022/06/05 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python