大图轮播特效制作
大图轮播是网站中常见的图片特效，就是将图片一张张左右滑动，随时查看想要的图片，下面便是大图轮播特效的代码：
首先设置一个大div stage，再在里边放一个条幅ad-banner，然后再放五个div模块ad，用来轮播，然后就是设置左右切换按钮：left-btn、right-btn。body里边就设置完了。
<body> <div class="stage"> <div class="left-btn"> </div> <div class="right-btn">></div> <div class="ad-banner"> <div class="ad" style="background-color: green;">1</div> <div class="ad" style="background-color: royalblue;">2</div> <div class="ad" style="background-color: red;">3</div> <div class="ad" style="background-color: yellow;">4</div> <div class="ad" style="background-color: gray;">5</div> </div> </div> </body>
接下来就是CSS样表对body里边的内容进行设置。首先将全部样式的外边距及内边距定义为0， stage设置宽高边框边距，相对定位，并设置超出部分隐藏，因为轮播时只显示一张图片。然后设置ad-banner的宽高即可。
* { margin: 0px; padding: 0px; } .stage { width: 300px; height: 200px; border: 10px solid black; margin: 50px; margin-left: 200px; overflow: hidden; position: relative; } .ad-banner { width: 1500px; height: 200px; }
然后就是对五个div模块设置宽高，为了使字体居中要设置行高及水平居中，流式布局向左，在设置字体大小颜色等。
.ad { width: 300px; height: 200px; float: left; font-size: 50px; line-height: 200px; color: white; text-align: center; }
左右按钮要用并列选择器，中间用逗号隔开，设置宽高，定位要用绝对定位，因为按钮的位置是定死的，不会移动。设置透明效果，字体大小等。
.left-btn, .right-btn { height: 200px; width: 20px; position: absolute; line-height: 200px; background-color: gray; opacity: 0.5; font-size: 20px; text-align: center; }
用绝对定位的时候，一定要设置边距为0：
.left-btn { left: 0px; top: 0px; } .right-btn { right: 0px; top: 0px; }
CSS最后就是设置按钮处鼠标变成小手，有透明效果：
.left-btn:hover, .right-btn:hover { cursor: pointer; opacity: 0.8; }
接下来就是用JS设计点击事件，这里比较复杂一点，要用到setInterval来做时间周期，设置速度的变量speed，以及count变量，用数组来做。因为点击右按钮时图片会相应的往左移动，所以count会有负值。向右移动不能超过5，向左移动不能小于1。
<script>
var speed = 10;
var count = 1;
var arr = Array();
document.getElementsByClassName("right-btn")[0].onclick = function() {
arr.push(window.setInterval(moveToLeft, 10));
}
function moveToLeft() {
var banner = document.getElementsByClassName("ad-banner")[0];
if(banner.offsetLeft > count * (-300)&&count<5) {
banner.style.marginLeft = banner.offsetLeft - speed + "px";
} else {
if(count<5)
{count++;}
for(var i in arr) {
window.clearInterval(arr[i]);
}
}
}
document.getElementsByClassName("left-btn")[0].onclick = function() {
arr.push(window.setInterval(moveToRight, 10));
}
function moveToRight() {
var banner = document.getElementsByClassName("ad-banner")[0];
if(banner.offsetLeft < (count-2) * (-300)&&count>1) {
banner.style.marginLeft = banner.offsetLeft + speed + "px";
} else {
if(count>1)
{count--;}
for(var i in arr) {
window.clearInterval(arr[i]);
}
}
}
</script>
