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

2024-08-24 18:28:08

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

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

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>

展示效果如图：

接下来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实现轮播效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js基于myFocus实现轮播图效果

本文实例为大家分享了myFocus轮播图的具体代码,供大家参考,具体内容如下完整文件及代码: https://github.com/erdouzhang/slider-myFocus step1.页面引入相关文件 <link rel="stylesheet" href="lib/mf-pattern/mF_slide3D.css" rel="external nofollow" > <script src="lib/
原生js实现网易轮播图效果

一.实现效果图二.分析布局主盒子里分上下两个小盒子(1和2). 包含图片的盒子占两张图片的宽(3),处于上盒子中,当前图片在上盒子(1)中,其它图片在盒子(3)的右侧等待播放. 下边的盒子(2)包括了六个小方块及定位在主盒子上的两个箭头. 三.html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wa
javascript经典特效分享手风琴、轮播图、图片滑动

最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 纯css的手风琴: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style:
完美实现八种js焦点轮播图（下篇）

继续上一篇的学习完美实现八种js焦点轮播图(上篇),供大家参考,具体内容如下 5.定时上下无缝滚动思路: 1.思路1: 将ul复制一份,但滚动一半距离重新归位:(大型网站性能略低): 2.思路2: 通过相对定位,将第一个li移动到最后,再将ul和Li归位. window.onload=function(){ var oBox=document.getElementById('box'); var oUl=document.getElementById('ul'); var aLi_u=oUl.
javascript轮播图算法

轮播图,是网站首页中常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了Jquery中的封装好的方法实现图片轮播,省事简单.所以我想介绍一下javascript纯代码实现的图片轮播. HTML <div id="content_img1"> <ul id="img1"> <li><img src="img/5.jpg"/></li> <li><img s
JS轮播图中缓动函数的封装

轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1.我想让页面中的一个盒子从开始的位置匀速向右运动到200px的地方,该怎么实现? 分析: 1)我们需要知道盒子在哪个地方,这个可以通过offsetLeft属性去获取: 2)要让盒子匀速运动,对于js肯定需要setInterval了: 3)要让盒子向右边跑起来?那就是需要不停改变盒子与左边起始点的距离,
轮播图组件js代码

本文实例为大家分享了JavaScript轮播图组件代码,供大家参考,具体内容如下 //轮播图组件 function Rolling(o) { this.index = ++o.index || 1; //当前滚动的位置,当index大于可轮播的次数listLength或者等于0,为不可滚动状态 this.num = o.num || 1; //默认滚动一个列表 this.obj = o.obj || null; //要轮播的对象ul this.perObj = o.perObj || null;
js实现炫酷的左右轮播图

本文实例为大家分享了js左右轮播图的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta keyword="左右轮播图-效果比较好"> <title>Document</title> <link rel="style
原生Javascript和jQuery做轮播图简单例子

接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮
JS仿京东移动端手指拨动切换轮播图效果

如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张

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

相关推荐

随机推荐