信鸽网

Javascript实现图片轮播效果(一)让图片跳动起来

  作者：bea

图片轮播效果，在各大网站的首页都能看到，比较常见。下面小编给大家分享这一效果的简单实现。 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图： 代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8"><title></title&

图片轮播效果，在各大网站的首页都能看到，比较常见。下面小编给大家分享这一效果的简单实现。


1.图片跳动起来


2.图片序列控制的实现


3.前后按钮控制的实现


这篇文章来看图片按照间隔时间进行切换.


我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图：



代码如下:




<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

* {

box-sizing: border-box;

}

a {

text-decoration: none;

}

ul,ol,li{

list-style: none;

margin: 0;

padding: 0;

}

#slider{

width: 800px;

height: 300px;

overflow: hidden;

position: relative;

margin: 0 auto;

}

#slider ul{

width: 2400px;

position: relative;

}

#slider ul:after{

content: " ";

width: 0;

height: 0;

display: block;

}

#slider ul li{

float: left;

width: 800px;

height: 300px;

overflow: hidden;

}

#slider ul li img{

width: 100%;

}

#slider ol{

position: absolute;

bottom: 10px;

left: 46%;

}

#slider ol li{

display: inline-block;

}

#slider ol li a{

display: inline-block;

padding:4px 8px;

border-radius:15px;

background-color: #000;

color: #fff;

}

#slider .prev, #slider .next{

display: inline-block;

position: absolute;

top: 49%;

background-color: #000;

opacity: 0.6;

color: #fff;

padding: 3px;

}

#slider .prev{

left: 10px;

}

#slider .next{

right: 10px;

}

</style>

</head>

<body>

<div id="slider">

<ul>

<li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>

<li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>

<li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>

</ul>

<ol>

<li> <a href="#">1</a> </li>

<li> <a href="#">2</a> </li>

<li> <a href="#">3</a> </li>

</ol>

<a href="#">上一张</a>

<a href="#">下一张</a>

</div>

</body>

</html>


好的,现在我们来通过JS控制图片的跳转.


首先我们需要找到图片所在的位置,这里我们是通过ul来进行布局的所以首先得找到UL下的LI的数目


接着让图片一张一张的展示,我们使用了视窗的模式,就是遮罩层的模式.#slider是一个视窗,ul是视窗外的景色,而ul得景色是横向排版的


然后就是让外面的景色显示为视窗的大小,也就是让每一张图片作为每一次的视窗景色,这里就是控制图片的大小要与视窗同等大小.


上面讲解的是一个概念,也就是布局的处理,下面我们JS的控制了,要实现图片间隔的显示不同.我们就需要用到JS的setInterval或者setTimeout.这里我们使用setInterval(因为这个用起来方便.)


每跳转一次,我们控制的是UL的position的left,这样就可以让ul下的景色,在每一次都是显示不一样,而这个left是根据视窗的宽度来决定,第一张left当然是-800 * 0 ,第二种就是 -800*1,第三种是-800*2...依次类推.那我们就可以得出下面的代码




<script>

(function(){

var slider = document.getElementById("slider");

var imgul = slider.getElementsByTagName("ul")[0];

var imglis = imgul.getElementsByTagName("li");

var len = imglis.length;

var index = 0;

setInterval(function(){

if(index >= len){

index = 0;

}

imgul.style.left = - (800 * index) + "px";

index++;

},2000);

})();

</script>


JS代码这样看起来就很简单了. 我这里是设置2秒跳转依次,然后跳转的次数大于等于图片的数目后,让其返回到第一张图片.


 


以上内容是小编给大家介绍Javascript实现图片轮播效果(一)让图片跳动起来的全部内容，希望对大家有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: