基于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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
vue中添加与删除关键字搜索功能
Oct 12 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
python如何实现word批量转HTML
2020/09/30 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
出国考察邀请函
2014/01/21 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
公司建议书怎么写
2014/05/15 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
2015年防汛工作总结
2015/05/15 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL