原生js图片轮播效果实现代码

2024-11-29 15:09:19

现在很多javascript的插件都可以实现图片轮播的功能，这篇文章，主要是通过这个domo来解析javascript图片轮播的原理。
老规矩，先上代码。至于代码中的图片，随便找三张即可，最核心的还是理解其思想。

html：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>滚动图</title>
 <link rel="stylesheet" type="text/css" href="css/scroll.css"/>
 </head>
 <body>
 <div id="wrapper">
  <div id="box">
  <img src="img/banner0.png"/>
  <img src="img/banner1.png"/>
  <img src="img/banner2.png"/>
  </div>
  <div id="pointer">
  <span class="active"></span>
  <span></span>
  <span></span>
  </div>
 </div>
 <script src="js/scroll.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>

css:

*{
 margin: 0;
 padding: 0;
}
#wrapper{
 position: relative;
 width: 1200px;
 margin: 50px auto;
 overflow: hidden;
}
#pointer{
 clear: both;
 position: absolute;
 right: 500px;
 bottom: 15px;
 width: 180px;
 height: 2px;
}
#pointer span{
 display: block;
 box-sizing: border-box;
 float: left;
 width: 50px;
 height: 1.5px;
 margin-right: 10px;
 border-radius: .5px;
 background: #fff;
 opacity: .5;
 -webkit-opacity: .5;
 -moz-opacity: .5;
 filter:alpha(opacity=50);
}
#pointer .active{
 opacity: .8;
 -webkit-opacity: .8;
 -moz-opacity: .8;
 filter:alpha(opacity=80);
}
#box{
 position: relative;
 width: 3600px;
 clear: both;
}
img{
 display: block;
 float: left;
 width: 1200px;
 height: 337px;
}

javascript:

window.onload = function(){
 //获取装图片的盒子
 var box = document.getElementById('box');
 //获取装页码的盒子
 var pointer = document.getElementById('pointer');
 //获取盒子中的所有图片
 var imglist = box.getElementsByTagName('img')
 //获取盒子中的所有页码
 var pointerList = pointer.getElementsByTagName('span');
 //图片的宽度,正负用于左右的循环
 var n = -1200;
 //增加一倍的图片用于循环
 box.innerHTML = box.innerHTML+box.innerHTML;
 //设置盒子的宽
 box.style.width = imglist[0].offsetWidth*imglist.length+"px";
 var timer = null;
 timer = setInterval(function(){
 scroll(box,n,pointerList);
 },3000);
 box.onmouseover = function(){
 clearInterval(timer);
 }
 pointer.onmouseover = function(){
 clearInterval(timer);
 }
 box.onmouseout = function(){
 timer = setInterval(function (){
//  console.log(new Date());
  scroll(box,n,pointerList);
 },3000);
 }
 //设置页码的点击事件
 for(var i=0;i<pointerList.length;i++){
 pointerList[i].index=i;//设置一个参数，用下面调用某个页码
 //如果不设置参数，在调用页码的时候会直接调用最后一个，因为我们使用了循环
 pointerList[i].onclick=function (){
  for(var j=0;j<pointerList.length;j++){
  pointerList[j].className='';//清空激活的class
  }
  move(box,n*(this.index));//移动图片
  this.className='active';//激活点击的页码
 }
 } 

}
/**
 * 循环滚动函数
 * @param {Object} box
 * @param {Object} n
 */
function scroll(box,n,page){
 //判断是否到达临界点，即box的中间部分
 if(box.offsetLeft<=-box.offsetWidth/2){
 box.style.left = "0px";//重新从头开始
 console.log('0');
 }
 if(box.offsetLeft%n!=0){
 //因为在我们切换浏览器标签页或者切换去其他软件界面的时候，
 //会影响到setInterval,有时候setInterval会增加好几秒，在这里我们必须加一个判断
 //只有当它走完了一个整个的图片宽度时，我们才进行下一次滚动。
 }
 else{
 pageScroll(box,n,page);
 move(box,n+box.offsetLeft);
 }
}
/**
 * 滚动页码函数
 * @param {Object} box
 * @param {Object} n
 * @param {Object} page
 */
function pageScroll(box,n,page){
 //直接通过图片盒子的定位判断页码值，但是此时的页码值是滚动之前的，所以后面的值要+1使用
 var index = Math.abs(box.offsetLeft/n);
 console.log(index);
 for(var i=0;i<page.length;i++){
 page[i].className='';
 }
 //判断是不是最后一页，是最后一页的话+1要变成0；
 if(index<page.length-1){
 page[index+1].className='active';
 }
 else{
 page[0].className='active';
 }
} 

/**
 * 变速移动
 * @param {Object} ele
 * @param {Object} target
 */
function move(ele,target){
 clearInterval(ele.timer);
 console.log(new Date());
 ele.timer = setInterval(function () {
 var step = (target-ele.offsetLeft)/10;
 step = step>0?Math.ceil(step):Math.floor(step);
 if(target==ele.offsetLeft){
  console.log(new Date());
  clearInterval(ele.timer);
 }
 else{
  ele.style.left = ele.offsetLeft + step + "px";
 }
 },30);
}

html和css部分依旧比较简单，直接跳过。javascript部分的代码注释写的也比较详细，下面主要讲解逻辑部分。
图片滚动的原理是利用setInterval函数进行背景图片的不断循环。为了避免图片循环的过程中出现间断，首先是在javascript中进行图片的复制（增加一倍），然后当到达临界点时，瞬间将图片移动到初始的位置，然后开始下一轮循环。
在这个domo中，主要包含四个函数：

1、外层控制间隔时间的函数。这个比较容易理解，通过setInterval函数每隔几秒循环执行一次图片滚动的函数。
2、中间层滚动函数。判断图片盒子是否到达临界点，判断当前状态是否符合进入下一次滚动（这个条件主要是为了防止切换界面对setInterval函数的影响，具体原因在最后）。
3、中间层页码滚动函数。基本没有难点，主要是理解页码为什么+1即可。
4、图片滚动函数。这个在之前写过的一篇文章有详细讲解，不再赘述，参考：http://www.jb51.net/article/95211.htm

最后，一点关于setInterval底层机制的扩展。

我们内层函数的执行事件正常情况下为1-2s（测试过），而外层的循环需要3s才进行一次，正常的情况是没有问题的。但是，当你切换界面的时候，浏览器就会对setInterval函数产生影响，此时执行事件的事件就会超过3面，在没移动结束的情况下开启另一个定时器进行下一次图片滚动，所以就会发生错乱。

javascript是单线程的，当你使用setInterval函数的时候并不是真正暂停，而是先挂起这个事件，继续执行下面的事件，而当这个事件要执行时，如果浏览器当前没有任务，那么它会立马执行，但是如果浏览器有任务，那么就会有一定的延迟，这也是为什么切换界面会对setInterval函数的时间产生影响。

（关于setInterval函数的理解如有错误，欢迎指正！如果大家想要深入理解，也可以去一些大神的博客看一下setInterval函数的文章）

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

JS原生带小白点轮播图实例讲解

咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: 300px; position: absolute; } li{ float: left; list-style: none; } img{ width: 500px; height: 300px; } div{ width: 500px; height: 300px; margin: 50px a
原生js实现轮播图

本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下 CSS: <style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; } body { background: #eee; } #Bigbox { width: 720p
原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
原生JS实现图片轮播效果

之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉.后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小demo,用的是jquery,小弟前端小白一个,各位前端大神看了之后,望批评指正. 我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页.如果是
原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
原生js图片轮播效果实现代码

现在很多javascript的插件都可以实现图片轮播的功能,这篇文章,主要是通过这个domo来解析javascript图片轮播的原理. 老规矩,先上代码.至于代码中的图片,随便找三张即可,最核心的还是理解其思想. html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动图</title> <link rel="sty
js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去三.定义图片切换函数提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过来的index值找到对应的li给
原生JS实现轮播效果+学前端的感受(防止走火入魔)

插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法前辈们可以无视下面这段废话: 在开始之前,先说下我学前端到现在的一点感受.到今天应该有两个月左右了吧,基本每天6-10小时的学习时间,纯自学,据说培训不靠谱!本人目前的阶段是只会三大件(HTML5.CSS3.javascript),其它所有知识都还排在学习计划后面....现在正处在迷茫期,不知道下面该先学什么
图解js图片轮播效果

本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下两种图片轮播实现方案,先来看效果对比: 方案一: 原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张.这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯. 方案二: 实现原理示意图原理: 1.轮播过程中,有几个关键元素:一个舞台(绿框).候场区(黑框).排队区(红框)和两个数组A和B.A用来保存正在展示和下一个将要展示的图片,如:图片1.2:B用来保存排队等
详解js图片轮播效果实现原理

本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="tex
一个简易的js图片轮播效果

一个简易的js图片轮播效果,话不多说,代码献上. 只有img标签的html代码,做测试用: <body> <img src="images/class1-1.jpg" id="img"> </body> 下面是js代码: var k=0; //当前的索引 var ss = new Array(); //数组,用来存放图片 ss[0] = "images/class1-1.jpg"; ss[1] = "
js淡入淡出的图片轮播效果代码分享

本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播效果代码如下 <html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table i
js手动播放图片实现图片轮播效果

本文实例为大家分享了js图片轮播具体实现代码,供大家参考,具体内容如下一.html代码部分(et.thtml): <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet"
JS实现旋转木马式图片轮播效果

本文实例为大家分享了js图片轮播的具体代码,供大家参考,具体内容如下主要html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href=
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

原生js图片轮播效果实现代码

相关推荐

随机推荐