js实现左右切换轮播图思路

JavaScript0180

js实现左右切换轮播图思路,第1张

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

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

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

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

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

左右点击切换模块：

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

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

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

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

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

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

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

* {margin:0padding:0}

#div1 {width:712pxheight:108pxmargin:100px autoposition:relativebackground:redoverflow:hidden}

#div1 ul {position:absoluteleft:0top:0}

#div1 ul li {float:leftwidth:178pxheight:108pxlist-style:none}

</style>

<script>

window.onload=function ()

{

var oDiv=document.getElementById('div1')

var oUl=oDiv.getElementsByTagName('ul')[0]

var aLi=oUl.getElementsByTagName('li')

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML

oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'

setInterval(function (){

if(oUl.offsetLeft<-oUl.offsetWidth/2)

{

oUl.style.left='0'

}

oUl.style.left=oUl.offsetLeft-2+'px'

}, 30)

}

</script>

</head>

<body>

<div id="div1">

<ul>

<li><img src="img2/1.jpg" /></li>

<li><img src="img2/2.jpg" /></li>

<li><img src="img2/3.jpg" /></li>

<li><img src="img2/4.jpg" /></li>

</ul>

</div>

</body>

</html>

//js

function getStyle(obj, name)

{

if(obj.currentStyle)

{

return obj.currentStyle[name]

}

else

{

return getComputedStyle(obj, false)[name]

}

}

function startMove(obj, attr, iTarget)

{

clearInterval(obj.timer)

obj.timer=setInterval(function (){

var cur=0

if(attr=='opacity')

{

cur=Math.round(parseFloat(getStyle(obj, attr))*100)

}

else

{

cur=parseInt(getStyle(obj, attr))

}

var speed=(iTarget-cur)/6

speed=speed>0?Math.ceil(speed):Math.floor(speed)

if(cur==iTarget)

{

clearInterval(obj.timer)

}

else

{

if(attr=='opacity')

{

obj.style.filter='alpha(opacity:'+(cur+speed)+')'

obj.style.opacity=(cur+speed)/100

document.getElementById('txt1').value=obj.style.opacity

}

else

{

obj.style[attr]=cur+speed+'px'

}

}

}, 30)

}

//css

body { background: #666} ul { padding: 0margin: 0} li { list-style: none} img { border: 0}

.play { width: 400pxheight: 430pxmargin: 50px auto 0background: #999font: 12px Arial}

.big_pic { width: 400pxheight: 320pxoverflow: hiddenborder-bottom: 1px solid #cccbackground: #222position: relative}

.big_pic li { width: 400pxheight: 320pxoverflow: hiddenposition: absolutetop: 0left: 0z-index: 0background: url(images/loading.gif) no-repeat center center}

.mark_left { width: 200pxheight: 320pxposition: absoluteleft: 0top: 0background: redfilter: alpha(opacity:0)opacity: 0z-index:3000}

.mark_right { width: 200pxheight: 320pxposition: absoluteleft: 200pxtop: 0background: greenfilter: alpha(opacity:0)opacity: 0z-index:3000}

.big_pic .prev { width: 60pxheight: 60pxbackground: url(images/btn.gif) no-repeatposition: absolutetop: 130pxleft: 10pxz-index: 3001filter:alpha(opacity:0)opacity:0cursor: pointer}

.big_pic .next { width: 60pxheight: 60pxbackground: url(images/btn.gif) no-repeat 0 -60pxposition: absolutetop: 130pxright: 10pxz-index: 3001filter:alpha(opacity:0)opacity:0cursor: pointer}

.big_pic .text { position: absoluteleft: 10pxtop: 302pxz-index: 3000color: #ccc}

.big_pic .length { position: absoluteright: 10pxbottom: 4pxz-index: 3000color: #ccc}

.big_pic .bg { width: 400pxheight: 25pxbackground: #000filter: alpha(opacity=60)opacity: 0.6position: absolutez-index: 2999bottom: 0left: 0}

.small_pic { width: 380pxheight: 94pxposition: relativetop: 7pxleft: 10pxoverflow: hidden}

.small_pic ul { height: 94pxposition: absolutetop: 0left: 0}

.small_pic li { width: 120pxheight: 94pxfloat: leftpadding-right: 10pxbackground: url(images/loading.gif) no-repeat center centercursor: pointerfilter: alpha(opacity=60)opacity: 0.6}

.small_pic img { width: 120pxheight: 94px}