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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
vue实现按钮切换图片
Jan 20 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php获取用户浏览器版本的方法
2015/01/03 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
JS 控制CSS样式表
2009/08/20 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python调用java的jar包方法
2018/12/15 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python switch 实现多分支选择功能
2020/12/21 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
教师实习自我鉴定
2013/12/11 职场文书
英语道歉信范文
2014/01/09 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript