（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
<!doctype html><html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" />
<script src="js/js.js" type="text/javascript"></script>
</head>
<body>
<div class="lp_wrap">
<div class="lp_left"></div>
<div class="lp_main">
<ul>
<li><img src="images/1.jpg" alt="我是1" /></li>
<li><img src="images/2.jpg" alt="我是2" /></li>
<li><img src="images/3.jpg" alt="我是2" /></li>
<li><img src="images/4.jpg" alt="我是2" /></li>
<li><img src="images/5.jpg" alt="我是2" /></li>
<li><img src="images/6.jpg" alt="我是2" /></li>
<li><img src="images/7.jpg" alt="我是2" /></li>
<li><img src="images/8.jpg" alt="我是2" /></li>
</ul>
</div>
<div class="lp_right"></div>
</div>
<!--隐藏域-->
<div class="lp_alert">
<div class="lp_aleft"></div>
<div class="lp_aimg" style="width:540px height:400px">
<img src="images/1.jpg" />
<span></span>
<font></font>
</div>
<div class="lp_aright"></div>
<div class="clear"></div>
</div>
<div class="zhezhao"></div>
<!--隐藏域-->
</body>
</html>
window.onload = function (){
function getClass(className){
var get = document.getElementsByTagName('*')
var arr = []
for(var i = 0 i < get.length i ++){
if(get[i].className == className){
arr.push(get[i])
}
}
return arr
}
function lp(lp1,lp2,lp3,lp4,lp5,lp6,lp7){
var wrap = getClass(lp1)[0]
var ul = getClass(lp2)[0].getElementsByTagName('ul')[0]
var li = ul.getElementsByTagName('li')
var mar_r = 10 //margin-right
var w = li[0].offsetWidth + mar_r
var l = li.length
var max = w * l
var setIndex = 0
var lp_aleft = getClass(lp3)[0]
var lp_img = getClass(lp4)[0]
var img = lp_img.getElementsByTagName('img')[0]
var font = lp_img.getElementsByTagName('font')[0]
var lp_aright = getClass(lp5)[0]
var lp_zhezhao = getClass(lp6)[0]
var lp_wrap = getClass(lp7)[0]
var lp_iw = 540 //为弹出 元素宽 ps：隐藏元素获取不到宽 高，估 写死值
var lp_ih = 400 //为弹出 元素高
//获取屏幕宽高
var wid = document.body.clientWidth | document.documentElement.clientWidth
var hei = document.body.clientHeight | document.documentElement.clientHeight
//求值居中
function left(n,w){
return (n - w) / 2
}
function top(n,h){
return (n - h) / 2
}
lp_img.style.left = left(wid,lp_iw) + 'px'
lp_img.style.top = top(hei,lp_ih) + 'px'
lp_aleft.style.top = top(hei,lp_aleft.offsetHeight) + 'px'
lp_aright.style.top = top(hei,lp_aleft.offsetHeight) + 'px'
lp_zhezhao.style.width = wid + 'px'
lp_zhezhao.style.height = hei + 'px'
//窗口改变大小
window.onresize = function (){
console.log(lp_img.offsetWidth)
wid = document.body.clientWidth | document.documentElement.clientWidth
hei = document.body.clientHeight | document.documentElement.clientHeight
lp_img.style.left = left(wid,lp_img.offsetWidth) + 'px'
lp_img.style.top = top(hei,lp_img.offsetHeight) + 'px'
lp_aleft.style.top = top(hei,lp_aleft.offsetHeight) + 'px'
lp_aright.style.top = top(hei,lp_aleft.offsetHeight) + 'px'
lp_zhezhao.style.width = wid + 'px'
lp_zhezhao.style.height = hei + 'px'
}
for(var i = 0 i < l i ++){
ul.appendChild(li[i].cloneNode(true))
}
for(var i = 0 i < li.length i ++){
li[i].index = i
li[i].onclick = function (){
_this = this
img.src = this.getElementsByTagName('img')[0].src
font.innerHTML = this.getElementsByTagName('img')[0].alt
lp_wrap.style.display = 'block'
lp_zhezhao.style.display = 'block'
lp_aleft.onclick = function (){
_this.index --
if(_this.index < 1){
_this.index = 0
alert('当前第一张')
}
console.log(_this.index)
img.src = li[_this.index].getElementsByTagName('img')[0].src
font.innerHTML = li[_this.index].getElementsByTagName('img')[0].alt
}
lp_aright.onclick = function (){
_this.index ++
if(_this.index >= li.length){
_this.index = li.length - 1
alert('最后一张')
}
img.src = li[_this.index].getElementsByTagName('img')[0].src
font.innerHTML = li[_this.index].getElementsByTagName('img')[0].alt
}
}
}
var stop = setInterval(setl,30)
function setl(){
if(setIndex >= max){
setIndex = 0
}
setIndex ++
ul.style.left = -setIndex + 'px'
}
wrap.onmouseover = function (){
clearInterval(stop)
}
wrap.onmouseout = function (){
stop = setInterval(setl,30)
}
}
new lp('lp_wrap','lp_main','lp_aleft','lp_aimg','lp_aright','zhezhao','lp_alert')
}
*{ margin:0 padding:0 list-style:none }
.clear{ clear:both }
.lp_wrap{ width:900px margin:0 auto }
.lp_main{ width:835px margin-left:17px height:188px overflow:hidden float:left position:relative }
.lp_main ul{ width:1000em position:absolute }
.lp_main ul li{ float:left margin-right:10px }
.lp_main ul li img{ width:253px height:188px }
.lp_left{ background:url(../images/left_arrow.jpg) 0 50% no-repeat width:15px height:188px float:left }
.lp_right{ background:url(../images/right_arrow.jpg) 0 50% no-repeat width:15px height:188px float:right }
.zhezhao{ display:none background:#000 opacity:0.3 position:fixed top:0 left:0 z-index:233}
.lp_aleft{ background:url(../images/aleft.png) no-repeat width:35px cursor:pointer height:63px margin-left:165px }
.lp_alert{height:0 width:1000px margin:0 auto display:none}
.lp_aimg,.lp_aleft,.lp_aright{ position:absolute z-index:234}
.lp_aright{ background:url(../images/aright.png) no-repeat width:35px cursor:pointer height:63px margin-left:800px }
.lp_aimg span{ width:540px height:30px background:#000 display:block opacity:0.5 position:absolute margin-top:-33px }
.lp_aimg font{ width:540px height:30px margin-top:-33px display:block color:#fff font-size:14px position:absolute line-height:30px text-align:center }
以前练习的时候做的，你看看，合胃口?
用js的 event.keyCode来获取方向键。从网上你可以查到左右方向键对应的keyCode值，这样你就能获取到左右键点击事件了。
然后当左右键点击的时候，触发显示和隐藏对应图片的功能。
图片的显示和隐藏，你可以用js给对应的图片添加显示或者隐藏的css。
这样就能实现你要的效果了
