（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{ margin:0}
#div{width:100px height:100px background:red position:absolute left:50px bottom:0}
</style>
<script>
window.onload=function ()
{
var oUp=document.getElementById('up')
var oDown=document.getElementById('down')
var oLeft=document.getElementById('left')
var oRight=document.getElementById('right')
var oDiv=document.getElementById('div')
var timer=null
oUp.onmousedown=function ()
{
Move('top')
}
oDown.onmousedown=function ()
{
Move('bottom')
}
oLeft.onmousedown=function ()
{
Move('left')
}
oRight.onmousedown=function ()
{
Move('right')
}
var iSpeed=2//每次移动的距离，可调整
var MoveTime=20//移动间隔时间，可调整
function Move (f)
{
clearInterval(timer)
timer=setInterval(function (){
switch (f)
{
case 'left' :
oDiv.style.left=oDiv.offsetLeft-iSpeed+'px'
break
case 'right' :
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'
break
case 'top' :
oDiv.style.top=oDiv.offsetTop-iSpeed+'px'
break
case 'bottom' :
oDiv.style.top=oDiv.offsetTop+iSpeed+'px'
}
},MoveTime)
}
oUp.onmouseup=oDown.onmouseup=oLeft.onmouseup=oRight.onmouseup=function ()
{
MouseUp ()
}
function MouseUp ()
{
clearInterval(timer)
}
}
</script>
</head>
<body>
<input type="button" value="向上" id="up">
<input type="button" value="向下" id="down">
<input type="button" value="向左" id="left">
<input type="button" value="向右" id="right">
<div id="div"></div>
</body>
</html>
一个比较简单的按钮控制Div的上下左右移动
用jquery使一个按钮让div左右移动方法如下：
就是点击“#anniu”，然后"#caozuo"div左右移动，我的代码左移了就不能移动回来了 <div class="bottom textstyle" id="caozuo"><a href="#" id="anniu"><img src="jiantou2.png" width="20" id="tanchu" /></a></div> $(document).ready(function()... 就是点击“#anniu”，然后"#caozuo"div左右移动，我的代码左移了就不能移动回来了。
<div class="bottom textstyle" id="caozuo">
<a href="#" id="anniu"><img src="jiantou2.png" width="20" id="tanchu" /></a>
</div>
$(document).ready(function() {
$("#anniu").click(function(event){
event.preventDefault()
if($('#caozuo').is({right:'0em'})){
$('#caozuo').animate({right:'-8.5em'},"fast")}
else{
$('#caozuo').animate({right:'0em'},"fast")
}
})
})
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
