（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
<style>*{margin:0padding:0}
body{font-size:14pxfont-family:"Microsoft YaHei"}
ul,li{list-style:none}
#tab{position:relative}
#tab .tabList ul li{
float:left
background:#fefefe
background:-moz-linear-gradient(top, #fefefe, #ededed)
background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed))
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed))
border:1px solid #ccc
padding:5px 0
width:100px
text-align:center
margin-left:-1px
position:relative
cursor:pointer
}
#tab .tabCon{
position:absolute
left:-1px
top:32px
border:1px solid #ccc
border-top:none
width:403px
height:100px
}
#tab .tabCon div{
padding:10px
position:absolute
opacity:0
filter:alpha(opacity=0)
}
#tab .tabList li.cur{
border-bottom:none
background:#fff
}
#tab .tabCon div.cur{
opacity:1
filter:alpha(opacity=100)
}
</style>
<div id="tab" style="margin-left:460pxmargin-top:20px">
<div class="tabList">
<ul>
<li class="cur">许嵩</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div class="tabCon">
<div class="cur">断桥残雪、千百度、幻听、想象之中</div>
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
<div>被风吹过的夏天、江南、一千年以后</div>
<div>十年、K歌之王、浮夸</div>
</div>
</div> <script>
window.onload = function() {
var oDiv = document.getElementById("tab")
var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li")
var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div")
var timer = null
for (var i = 0 i < oLi.length i++) {
oLi[i].index = i
oLi[i].onmouseover = function() {
show(this.index)
}
}
function show(a) {
index = a
var alpha = 0
for (var j = 0 j < oLi.length j++) {
oLi[j].className = ""
aCon[j].className = ""
aCon[j].style.opacity = 0
aCon[j].style.filter = "alpha(opacity=0)"
}
oLi[index].className = "cur"
clearInterval(timer)
timer = setInterval(function() {
alpha += 2
alpha > 100 && (alpha = 100)
aCon[index].style.opacity = alpha / 100
aCon[index].style.filter = "alpha(opacity=" + alpha + ")"
alpha == 100 && clearInterval(timer)
},
5)
}
}
</script>
有没有感觉很酷？其实用jquery实现起来更简单，用fadeIn（）和fadeOut（）就可以搞定，不知道是不是你想要的结果
点击切换值，这个其实就是修改DOM的innerHTML或是value，
下面是简单的代码实现，仅供参考：
<body><div style="width:100px height:100px border:1px solid #ccc"></div>
</body>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0]
var arr = [1,2,3,4,5,6,7,8,94,1,3,4,5,6]
oDiv.onclick=function(){
oDiv.innerHTML = arr[Math.floor(Math.random()*arr.length)]
}
</script>
