现在流行的js轮播图片原理都有哪些。 原理可以了，发代码不太美观

JavaScript026

现在流行的js轮播图片原理都有哪些。 原理可以了，发代码不太美观,第1张

首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图片的src属性值，这样就达到了图片的切换，图片的轮播是使用定时器来时显的！setInterval('play()',500)的意思是每0.5s调用一次play()函数！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>Insert title here</title>

</head>

<script type="text/javascript">

var timeID

var image

var current = 0

var images = new Array(5)

function init(){

for (var i=1i<=5i++){

images[i] = new Image(450,550)

images[i].src = "pictures/"+i+".jpg"

}

image = document.images[0]

}

function setSrc(i){

current = i

//设置图片src的属性，实现图片的切换

image.src = images[i].src

}

function pre(){

if (current <= 0){

alert('已经是第一张了')

}else{

current--

setSrc(current)

}

}

function next(){

if (current >= 5){

alert('已经是最后一张了')

}else{

current++

setSrc(current)

}

}

function play(){

if (current >= 5){

current = 0

}

setSrc(++current)

}

</script>

<body onload="init()">

<input type="button" value="第一张" onclick="setSrc(1)">

<input type="button" value="上一张" onclick="pre()">

<input type="button" value="下一张" onclick="next()">

<input type="button" value="最后一张" onclick="setSrc(5)">

<input type="button" value="幻灯播放" onclick="timeID=setInterval('play()',500)">

<input type="button" value="停止播放" onclick="clearInterval(timeID)">

<div style="border:1px solid bluewidth:450pxheight:550px" id="myPic">

<img src="pictures/1.jpg" />

</div>

</body>

</html>

我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。

（本文以阴阳师中“平安世界”模块的轮播图为例）

这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。

在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。

本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。

左右点击切换模块：

我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。

当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果

对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果

在移动的过程中的动画和定时器设置的延迟可以自己添加一下。

左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。

本次现讲一下左右切换的思路。