javascript轮播图算法


Posted in Javascript onOctober 21, 2016

轮播图,是网站首页中常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了Jquery中的封装好的方法实现图片轮播,省事简单。所以我想介绍一下javascript纯代码实现的图片轮播。

HTML

<div id="content_img1">
<ul id="img1">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="mouseover" style="margin-left: 300px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div id="content_img2">
<ul id="img2">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="mouseover" style="margin-left: 300px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

这里我相信最多疑惑的是,明明五张图片为何要在首尾加两张图片(li)做首尾呼应呢?原因如下图:

这里以向左滚动的例子为说明

javascript轮播图算法

一开始布局的时候left: -470px;先处于第2个li也就是第2张图,当我们图片陆续向左滚动到第7张图片的时候,迅速扯回到第2张图,然后还是继续向左滚动。这样看起来就像是假象式的无限向左滚动循环,其实它里面只有7张图组成。同样的,如果实现向右滚动,我们一开始布局的时候,先处于第1个li也就是第1张图,当我们图片陆续向右滚动到第6张图片的时候,迅速扯回到第1张图,然后还是继续向右滚动。其实上下滚动轮播图道理是一样的,只不过少了一个float:left属性,让li垂直排列。

CSS

*{
margin: 0;
padding: 0;
list-style: none;
}
span{
width: 20px;
height: 20px;
display: block;
background-color: blanchedalmond;
border: 1px solid black;
float: left;
text-align: center;
line-height: 20px;
z-index: 1;
cursor: pointer;
margin: 120px 8px 0 0;
}
span.mouseover{
background-color: orange;
}
#content_img1{
position: relative;
width: 470px;
height: 150px;
border: 2px black solid;
margin: 30px auto;
overflow: hidden;
}
#img1{
position: absolute;
top: 0px;
left: -470px;
z-index: -1;
width: 700%;
height: 150px;
}
#img1>li{
width: 470px;
height: 150px;
float: left;
}
#content_img2{
position: relative;
width: 470px;
height: 150px;
border: 2px black solid;
margin: 30px auto;
overflow: hidden;
}
#img2{
position: absolute;
top: -150px;
left: 0px;
z-index: -1;
width: 470px;
height: 700%;
}
#img2>li{
width: 470px;
height: 150px;
}

javascript函数方法

window.onload=function(){
var cont_img1=document.getElementById("content_img1");
var spannum1=cont_img1.getElementsByTagName("span");
var img1=document.getElementById("img1");
var cont_img2=document.getElementById("content_img2");
var spannum2=cont_img2.getElementsByTagName("span");
var img2=document.getElementById("img2");

   //向左轮播图的span"按钮"鼠标经过事件

   for(var i=0;i<spannum1.length;i++){
spannum1[i].index=i;
spannum1[i].onmouseover=function(){
for(var p=0;p<spannum1.length;p++){
if(spannum1[p]==this){
spannum1[p].className="mouseover";
}else{
spannum1[p].className="";
}
}
clearTimeout(img1.timer1);
now=this.index;
scrollimg1(img1,spannum1);
 }
}

   //向左轮播的主函数调用
scrollimg1(img1,spannum1);

   //向上轮播图的span"按钮"鼠标经过事件

for(var i=0;i<spannum2.length;i++){
spannum2[i].index=i;
spannum2[i].onmouseover=function(){
for(var p=0;p<spannum2.length;p++){
if(spannum2[p]==this){
spannum2[p].className="mouseover";
}else{
spannum2[p].className="";
}
}
clearTimeout(img2.timer1);
nows=this.index;
scrollimg2(img2,spannum2);
 }
}

    //向上轮播的主函数调用
scrollimg2(img2,spannum2);

}

   var now=1;
 function scrollimg1(obj,spannum1){
 if(obj.offsetLeft<=-(obj.children.length-1)*obj.children[0].offsetWidth){//达到极限的计算位置,既是最后一个图就马上扯回初始位置
 now=0;
 obj.style.left=-(++now)*obj.children[0].offsetWidth+"px";
 }else{
 Move(obj,-obj.children[0].offsetWidth*(++now),"left",5,30);//否则图片进行向左运动的缓冲动画
 }
 for(var i=0;i<spannum1.length;i++){
 
spannum1[i].className="";
 }
 spannum1[(now-1)%spannum1.length].className="mouseover";
 obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调,实现无限循环的图片轮播
 
scrollimg1(obj,spannum1);
 },3000);
 }
 
 var nows=1;
 function scrollimg2(obj,spannum2){
 if(obj.offsetTop<=-(obj.children.length-1)*obj.children[0].offsetHeight){//达到极限的计算位置,既是最后一个图就马上扯回初始位置
 nows=0;
 obj.style.top=-(++nows)*obj.children[0].offsetHeight+"px";
 }else{
 Move(obj,-obj.children[0].offsetHeight*(++nows),"top",5,30);//否则图片进行向左运动的缓冲动画
 }
 for(var i=0;i<spannum2.length;i++){
 
spannum2[i].className="";
 }
 spannum2[(nows-1)%spannum2.length].className="mouseover";
 obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调,实现无限循环的图片轮播
 
scrollimg2(obj,spannum2);
 },3000);
 }



function Move(obj,target,stylename,average,cycle,continuefunction){参数类型:(对象,目标值,改变的样式属性,缓冲系数(速度与大小成反比),周期时间(速度与大小成反比),回调函数(可有可无))
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
if(stylename=="opacity"){
var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);
var speed=(target-offvalue)/average;
 speed=speed>0?Math.ceil(speed):Math.floor(speed);
 if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
 }else{
obj.style[stylename]=(offvalue+speed)/100;
obj.style.filter="alpha(opacity:"+(offvalue+speed)+")";
 }
}else{
var offvalue=parseInt(getStyle(obj,stylename));
var speed=(target-offvalue)/average;
 speed=speed>0?Math.ceil(speed):Math.floor(speed);
 if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
 }else{
obj.style[stylename]=offvalue+speed+"px";
 }
}
},cycle);
}
function getStyle(obj,stylename){//对象样式属性大小获取函数
if(obj.currentStyle){
return obj.currentStyle[stylename];
}else if(getComputedStyle(obj,false)){
return getComputedStyle(obj,false)[stylename];
}
}

这种通过计算位置轮播算法的好处是,可以在我的样式范围内,在HTML的<ul id="img"></ul>内无限添加li里的图片,但是要记得要在首尾加前后呼应的li图片,并且根据图片大小来更改样式,就能实现图片轮播。

javascript轮播图算法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 #Javascript
javascript简易画板开发
Apr 12 #Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 #Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 #Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 #Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 #Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
js回调函数仿360开机
2019/12/26 Javascript
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
python创建学生管理系统
2019/11/22 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
优良学风班申请材料
2014/02/13 职场文书
检举信的格式及范文
2014/04/04 职场文书
家长给学校的建议书
2014/05/15 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
高中地理教学反思
2016/02/19 职场文书
员工升职自我评价
2019/03/26 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
python实现简单的井字棋
2021/05/26 Python
HTML基础详解(上)
2021/10/16 HTML / CSS