手把手原生js轻松轮播图金沙8331网址

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出。

进入前端将近一年了,js还是很弱,突发奇想写一个轮播图,就找到了这个博主的材料,和大家分享。

原理:

轮播图的原理:

将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播。

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

步骤一:建立html基本布局

金沙8331网址 1

 轮播图            1 2 3 4 5  < > 

Html布局

只有五张图片,却使用7张来轮播,这是为了实现无缝轮播,后面会详细介绍。

首先父容器container存放所有内容,子容器list存在图片。子容器buttons存放按钮小圆点。

而5个span,即我们可以实时看到轮播图目前所处的位置。

金沙8331网址 2

最后是两个按钮,可以通过它来控制前进与后退。

优化,无缝滚动。

这里我们需要对wrap使用绝对定位,所以用left:-600px;将第一张图片显示出来。

当你从最后一张图切换回第一张图时,有很大空白,利用两张辅助图来填补这个空白。

步骤二: css布局

这里补充下无缝滚动,直接看代码,复制最后一张图片放置第一张图片前,同时复制第一张图片放置最后一张图片的后面。并且,将第一张图片辅助图(实际上是实际显示的第5张图片隐藏起来,故设置style=”left:
-600px;”)

手把手原生js轻松轮播图金沙8331网址。首先,resetcss,如下所示:

CSS修饰

* { margin:0; padding:0; } a{ text-decoration: none; }

1、对盒子模型,文档流的理解,绝对定位问题。

接着,我们为了让图片只在container中,所以需要限定其宽度和高度并且使用overflow:hidden;将其余的图片隐藏起来,并且我们希望wrap相对于container左右移动,所以设置为relative,如下:

2、注意list的overflow:hidden;只显示窗口的一张图片,把左右两边的都隐藏起来。

 .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } 

3、确保buttons中每个span所在层置顶,将其设置为最顶端。(z-index:999)我这里设置为z-index:2

我们设置wrap是绝对定位的,所以,我们就可以通过控制Left和Right来控制图片的移动了。设置z-index:1;以对后面将要放置的buttons作为参考。
因为共有七张图片,所以width为4200px,我们只需让图片左浮动即可实现占满一排了。

* {margin: 0;padding: 0;text-decoration: none;}

 .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; }

body {padding: 20px;}

然后我们把图片设置位左浮动,并限定其大小,如下所示:

#container {position: relative;width: 600px;height: 400px;border: 3px
solid #333;overflow: hidden;}

 .container .wrap img { float: left; width: 600px; height: 400px; }

#list {position: absolute;z-index: 1;width: 4200px;height: 400px;}

即这时已经显示出了第一张图片。并且充满了整个container(container是有box-shadow的);

#list img {float: left;width: 600px;height: 400px;}

然后我们把显示次序的buttons放在图片的右下角。并且设置z-index:2;以保证buttons是在图片的上面的。

#buttons {position: absolute;left: 250px;bottom: 20px;z-index:
2;height: 10px;width: 100px;}

 .container .buttons { position: absolute; right: 150px; bottom:20px; width: 100px; height: 10px; z-index: 2; }

#buttons span {float: left;margin-right: 5px;width: 10px;height:
10px;border: 1px solid       #fff;border-radius: 50%;background:
#333;cursor: pointer;}

然后将buttons下面的span做一个简单的修饰,并且给和图片对应的span设置一个on类,如下:

#buttons .on {background: orangered;}

 .container .buttons span { margin-left: 5px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: green; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: red; }

.arrow {position: absolute;top: 180px;z-index: 2;display: none;width:
40px;height: 40px;font-size: 36px;font-weight: bold;line-height:
39px;text-align: center;color: #fff;background-color: RGBA(0, 0, 0,
.3);cursor: pointer;}

接下来,我们把左右切换的箭头加上,然后做简单的修饰,注意:因为这里使用实体来表示左右箭头,所以设置font-size才能改变其大小,

.arrow:hover {background-color: RGBA(0, 0, 0, .7);}

 .container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } .container .arrow_left { left: 10px; } .container .arrow_right { right: 10px; } .container:hover .arrow { display: block; } .container .arrow:hover { background-color: rgba; }

#container:hover .arrow {display: block;}

步骤三:添加js逻辑

#prev {left: 20px;}

我们首先获取到 wrap,然后获取到左右两个箭头,并实现手动轮播,如下:

#next {right: 20px;}

 var wrap = document.querySelector; var next = document.querySelector; var prev = document.querySelector; next.onclick = function ; } prev.onclick = function ; } function next_pic () { var newLeft = parseInt-600; wrap.style.left = newLeft + "px"; } function prev_pic () { var newLeft = parseInt+600; wrap.style.left = newLeft + "px"; }

Js

值得注意的是,这里wrap.style.left是一个字符串,所以要转化为数字才能进行计算,而设定left时就要加上px成为一个字符串了。

首先我们先实现出手动点击左右两个箭头切换图片的效果:

可以看到,在第一页时,left值为-600,所以我们可以点击一次上一张,但是当再点击一次时,就出现了空白。同样的,下一张点击,到-3600是最后一张,就不能再继续点击了。


也就是说,当我们点击下一张到-3600px时,我们需要下次跳转到第二张,即-1200px;这样才能正常跳转;

window.onload=function() {varlist =
document.getElementById(‘list’);varprev =
document.getElementById(‘prev’);varnext =
document.getElementById(‘next’);functionanimate(offset)
{//获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值,//且style.left获取的是字符串,需要用parseInt()取整转化为数字。varnewLeft
= parseInt(list.style.left) +offset;

同理,当我们点击上一张到0px,我们希望下次跳转到第四张,即-2400px;

list.style.left= newLeft + ‘px’;

按照这样的思路我们重新将next_pic和prev_pic函数修改如下:

}

 function next_pic () { var newLeft; if(wrap.style.left === "-3600px"){ newLeft = -1200; }else{ newLeft = parseInt-600; } wrap.style.left = newLeft + "px"; } function prev_pic () { var newLeft; if(wrap.style.left === "0px"){ newLeft = -2400; }else{ newLeft = parseInt+600; } wrap.style.left = newLeft + "px"; }

prev.onclick=function() {

这时,我们就可以发现图片可以循环播放了!

animate(600);

但是,这时我们仅仅时手动循环播放的,我们如果希望自动播放,使用setInterval()即可,如下所示:

}

 var timer = null; function autoPlay () { timer = setInterval { next_pic; } autoPlay();

next.onclick=function() {

即先设定一个计时器,然后创建一个可以自动播放的函数,最后调用这个函数即可。
现在它就可以自动播放了,效果如下:

animate(-600);

但是如果我们想要仔细看其中一个图片的时候,我们希望轮播图停止播放,只要clearInterval()即可,如下:

}

 var container = document.querySelector; container.onmouseenter = function () { clearInterval; } container.onmouseleave = function ; }

}

现在,只要我们把鼠标移入轮播图中,这时轮播图就不会播放了。而移开鼠标之后,轮播图自动播放。


但是到目前为止,轮播图下方的小圆点还没有动,现在我们就实现它。

运行后我们会发现,一直点击右箭头
,会出现空白,而且,不能回到第一张图片。要点击左箭头才能回到第一张图片。

原理很简单,即设置buttons的index初始值为0,即第一个span的class为on,然后触发next_pic函数时,index加1,当触发prev_pic函数时,inex减1,
并设置当前index的小圆点的class为on,
这就要求index必须设置为全局变量,才能保证它在每一个函数的作用域中。

金沙8331网址 3

添加showCurrentDot函数:

利用谷歌浏览器F12,原因是我们利用偏移量left来获取图片,当看到left值小于3600时,因为没有第8张图片就出现空白,所以这里我们需要对偏移量做一个判断。

 var index = 0; var dots = document.getElementsByTagName; function showCurrentDot () { for(var i = 0, len = dots.length; i < len; i++){ dots[i].className = ""; } dots[index].className = "on"; }

在animate函数里加上这么一段:

在next_pic中添加代码:


 index++; if{ index = 0; }

if(newLeft<-3000){

在prev_pic中添加大吗:

list.style.left= -600 + ‘px’;

 index--; if{ index = 4; } showCurrentDot();

}if(newLeft>-600){

这样,轮播图就可以自动切换,并且小圆点也在随着图片的变化而变化了。

list.style.left= -3000 + ‘px’;

但是,这距离我们经常看到的轮播图还有一定距离 – – – 当点击小圆点时,
就可跳转到相应图片。 实现原理即:
点击小圆点,就使wrap的Left变成相应的值。代码如下:

}

 for (var i = 0, len = dots.length; i < len; i++){ { dots[i].onclick = function () { var dis = index - i; if(index == 4 && parseInt!==-3000){ dis = dis - 5; } //和使用prev和next相同,在最开始的照片5和最终的照片1在使用时会出现问题,导致符号和位数的出错,做相应地处理即可 if(index == 0 && parseInt!== -600){ dis = 5 + dis; } wrap.style.left = (parseInt + dis * 600)+"px"; index = i; showCurrentDot; }

原理就是当点击到小圆点时,得到相应的i值,这个i值也就是span的index值,我们拿他和全局变量index作比较,然后重新设置wrap.style.left的值,然后把i值复制给全局变量index,最后显示当前的小原点即可。值得注意的是:这里涉及到了闭包的概念,如果直接使用for循环,则不能得到正确的结果。

好,运行一下,没问题了。轮播图,顾名思义,是自己会动的图片,这个时候我们需要用到浏览器的内置对象定时器。

 轮播图  * { margin:0; padding:0; } a{ text-decoration: none; } .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .container .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 5px; bottom:40px; width: 150px; height: 10px; z-index: 2; } .container .buttons span { margin-left: 5px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: green; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: red; } .container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } .container .arrow_left { left: 10px; } .container .arrow_right { right: 10px; } .container:hover .arrow { display: block; } .container .arrow:hover { background-color: rgba; }             1 2 3 4 5  < >   var wrap = document.querySelector; var next = document.querySelector; var prev = document.querySelector; next.onclick = function ; } prev.onclick = function ; } function next_pic () { index++; if{ index = 0; } showCurrentDot(); var newLeft; if(wrap.style.left === "-3600px"){ newLeft = -1200; }else{ newLeft = parseInt-600; } wrap.style.left = newLeft + "px"; } function prev_pic () { index--; if{ index = 4; } showCurrentDot(); var newLeft; if(wrap.style.left === "0px"){ newLeft = -2400; }else{ newLeft = parseInt+600; } wrap.style.left = newLeft + "px"; } var timer = null; function autoPlay () { timer = setInterval { next_pic; } autoPlay(); var container = document.querySelector; container.onmouseenter = function () { clearInterval; } container.onmouseleave = function ; } var index = 0; var dots = document.getElementsByTagName; function showCurrentDot () { for(var i = 0, len = dots.length; i &lt; len; i++){ dots[i].className = ""; } dots[index].className = "on"; } for (var i = 0, len = dots.length; i &lt; len; i++){ { dots[i].onclick = function () { var dis = index - i; if(index == 4 &amp;&amp; parseInt!==-3000){ dis = dis - 5; } //&#21644;&#20351;&#29992;prev&#21644;next&#30456;&#21516;&#65292;&#22312;&#26368;&#24320;&#22987;&#30340;&#29031;&#29255;5&#21644;&#26368;&#32456;&#30340;&#29031;&#29255;1&#22312;&#20351;&#29992;&#26102;&#20250;&#20986;&#29616;&#38382;&#39064;&#65292;&#23548;&#33268;&#31526;&#21495;&#21644;&#20301;&#25968;&#30340;&#20986;&#38169;&#65292;&#20570;&#30456;&#24212;&#22320;&#22788;&#29702;&#21363;&#21487; if(index == 0 &amp;&amp; parseInt!== -600){ dis = 5 + dis; } wrap.style.left = (parseInt + dis * 600)+"px"; index = i; showCurrentDot; } 

对于定时器,有必要说明一下setInterval()跟setTimeout的区别了。简单来说,setInterval()执行多次,setTimeout()只执行一次。

总结:

更具体的用法可以点击链接查看区别:window.setInterval  window.setTimeout

实现一个轮播图还是不难的,大体思路:
先创建一个div,限定其宽度和高度,overflow:hidden。然后创建一个装图片的div,宽度为所有图片的总宽度,并且使其浮动,这样所有的图片就处于一行中。然后为了实现无缝滚动,所以需要在首尾分别添加一张过渡图片。
先添加两个按钮,
使其可以手动轮播,然后只需要添加一个定时器使其朝一个方向自动轮播即可,因为用户有时需要查看详情,所以当鼠标进入时就clear定时器,滑出再定时播放。为了更好地用户体验,我们再下面添加了一排小圆点,用户可以清楚地知道现在所处的位置,
最后, 利用闭包使得用户可以直接通过点击小圆点切换图片。

这里我们是用setInterval(),因为我们的图片需要循环滚动。插入下面


vartimer;functionplay() {

timer= setInterval(function() {

prev.onclick()

},1500)

}

play();


运行,ok!

金沙8331网址 4

但是,当我们想仔细看某一张图片时候,要把图片停住,我们清楚定时器就可以了,这里用到window.clearInterval这个方法。

这里,我们需要对其DOM操作,需要获取整个轮播图区域;


😉

varcontainer = document.getElementById(‘container’);functionstop() {

clearInterval(timer);

}

container.onmouseover=stop;

container.onmouseout= play;


😉

但这里,一个轮播图基本算完成了,有同学·会问,那么简单。看到图片下面的那一排小圆点没。我给你加功能了。


这里是升级版:


😉

varbuttons =
document.getElementById(‘buttons’).getElementsByTagName(‘span’);varindex
= 1;functionbuttonsShow() {//这里需要清除之前的样式for(vari = 0; i <
buttons.length; i++) {if(buttons[i].className == ‘on’) {

buttons[i].className= ”;

}

}//数组从0开始,故index需要-1buttons[index – 1].className = ‘on’;

}

prev.onclick=function() {

index-= 1;if(index < 1) {

index= 5;

}

buttonsShow();

animate(600);

}

next.onclick=function()
{//由于上边定时器的作用,index会一直递增下去,我们只有5个小圆点,所以需要做出判断index
+= 1;if(index > 5) {

index= 1;

}

buttonsShow();

animate(-600);

}


😉

金沙8331网址 5

现在看起来正常多了吧,但我们想实现通过鼠标任意点击其中一个小圆点,切换到相应的图片,原理同样,我们还是需要通过偏移量去找到对应的图片。


😉

for (var i = 0; i < buttons.length; i++) {

buttons[i].onclick = function () {

// 在浏览器的控制台打印一下,看看结果

console.log(i);

/*
偏移量获取:这里获得鼠标移动到小圆点的位置,用this把index绑定到对象buttons[i]上,去谷歌this的用法 
*/

/*
由于这里的index是自定义属性,需要用到getAttribute()这个DOM2级方法,去获取自定义index的属性*/

var clickIndex = parseInt(this.getAttribute(‘index’));

var offset = 600 * (index – clickIndex);

animate(offset); //存放鼠标点击后的位置,用于小圆点的正常显示

index = clickIndex;

buttonsShow();

}

}


到这一步时,以为大功告成?你在控制台会发现打印出来的永远的是i=5。

错误原因:没有正确获取i值,使用闭包就可以了。你在高级程序设计第三版中76页,会看到这么一句话:

“对javascript来说,由for语句创建的变量i即使在for循环执行结束后,也依旧会存在于循环外部的执行环境中。”

就是说,js没有块级作用域这东西,(可能我C写多了,混淆了)。在第一次循环(从
i=0 到 4 这一过程)结束后,最后的 i 获取到的为buttons.length的值被

保存在for循环之外,最后鼠标点击任何一个小圆点时,自然访问的一直是 i=5
了。

正确代码如下:


😉

for(vari = 0; i < buttons.length; i++)
{//这里使用的是立即执行函数,(function(i) {

buttons[i].onclick=function() {varclickIndex =
parseInt(this.getAttribute(‘index’));varoffset = 600 * (index
-clickIndex);

animate(offset);

index=clickIndex;

buttonsShow();

}

})(i)

}


😉

有关闭包的知识我不展开来说,要说的又一大推,

大家可以参考下我很久之前的博客:头疼的闭包

金沙8331网址 6

大家,可能发现了,这个轮播图有点奇怪,不中规中矩,它是向左切换的,改写一下:


functionplay() {//将轮播图换成向右切换图片timer = setInterval(function()
{

next.onclick();

},2000)            }


这里结合评论,补充下:

就算是初学者也要特别注意代码规范问题,上面的CSS实在太不规范了,难怪我带的人都不怎样,哈哈哈。。。

Css的书写顺序

CSS里最好不用或直接不用id来改变样式(我这里是id为了方便DOM操作)

这里推荐css规范的技术文章

前端前辈的博客:http://www.cnblogs.com/hustskyking/p/css-spec.html

或者这位大神的Github:https://github.com/fex-team/styleguide/blob/master/css.md

以及KISSY v1.4
Documentation的css编码规范:http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/css-coding-style.html

over

原文转载:

金沙8331网址 7

金沙8331网址 8

发表评论

电子邮件地址不会被公开。 必填项已用*标注