|
这篇文章主要为大家详细介绍了javascript轮播图算法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轮播图，是网站首页中常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了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)做首尾呼应呢？原因如下图：
这里以向左滚动的例子为说明
一开始布局的时候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图片，并且根据图片大小来更改样式，就能实现图片轮播。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 | 
发表于 2016-10-21 10:31:28
