（本文以阴阳师中“平安世界”模块的轮播图为例）
这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。
在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。
本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。
左右点击切换模块：
我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。
当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果
对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果
在移动的过程中的动画和定时器设置的延迟可以自己添加一下。
左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。
本次现讲一下左右切换的思路。
<html><head>
<title>jquery或JS拖动DIV左右移动</title>
<script src="jquery-1.7.1.min.js"></script>
<style type="text/css">
body {background-color: #fff }
.win {position: absolute top: 0px left: 0pxwidth: 300pxheight: 222px}
.title {height: 20pxwidth: 300px position: absolutebackground-color: #0094ff float: inherit top: 0px left: 0px }
.winCon { height: 200pxwidth: 298px position: absolute border: solid
border-width: 1px border-color: #0094ff border-top: none float: inherit left: 0px top: 20px }
</style>
</head>
<body onload="showDiv(this,'test1')">
</body>
<script type="text/javascript">
function showDiv(element, str) {
$(document.body).append("<div class='win' id='win" + str + "'><div class='title' id='" + str + "'></div><div class='winCon'> 清新自在</div></div>")
$("#" + str).mousedown(function (event) {
var offset = $(this).offset()
_x = event.clientX - offset.left
_y = event.clientY + 20 - offset.top
$("#win" + str).css({ "top": offset.top - 20 + "px" })
$("#win" + str).mousemove(function (event) {
_xx = event.clientX - _x
_yy = event.clientY - _y
this.style.left = _xx + "px"
this.style.top = _yy + "px"
this.style.zIndex = "100"
return false
})
return false
})
$("#win" + str).mouseup(function () {
$(this).unbind("mousemove")
$(this).css({ "z-index": "-1" })
return false
})
}
</script>
</html>
<!DOCTYPE HTML><html>
<head>
<meta charset=utf-8 />
<title>UFO来了</title>
<script>
window.onload = function() {
var i = 10
var j = 0
var e = target
var win = document.documentElement || document.body
function intern() {
var width = e.clientWidth
var height = e.clientHeight
var left = parseFloat(e.style.left)
var top = parseFloat(e.style.top)
var windowWidth = win.clientWidth
var windowHeight = win.clientHeight
if (windowWidth - width < (left + i)) {
i = -i
} else if ((left + i) < 0) {
i = -i
}
if (windowHeight - height < (top + j)) {
j = -j
} else if ((top + j) < 0) {
j = -j
}
e.style.left = left + i + "px"
e.style.top = top + j + "px"
}
setInterval(intern, 30)
}
</script>
</head>
<body>
<div id="target" style="border-radius:90pxbackground-color: red width: 30px height: 30px position: absolute top:100px left: 0px"></div>
</body>
</html>
