轮播图效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#back {
width: 500px;
height: 300px;
/*让卷轴相对于视窗进行定位*/
position: relative;
/*所有显示在视窗外部外的东西隐藏*/
overflow: hidden;
border: 1px solid black;
}
/*卷轴样式*/
#content {
/*width: 800%;*/
height: 300px;
position: absolute;
/*用来设置css样式变化时，过渡效果，第一个值表示需要让哪个值产生过度，（all表示该标签全部的css样式，第二个值表示过渡效果的持续时间）*/
transition: all 0.5s;
/*left:0;*/
}
/*切记 加 浮动*/
#content div {
width: 500px;
height: 300px;
float: left;
}
#content div img {
width: 99%;
}
</style>
</head>
<body>
<!--第一部分，顶部六个控制按钮-->
<div id="buttons">
<input type="button" name="" id="last" value="上一个" />
<input type="button" name="" class="btn" value="button1" />
<input type="button" name="" class="btn" value="button2" />
<input type="button" name="" class="btn" value="button3" />
<input type="button" name="" class="btn" value="button4" />
<input type="button" name="" id="next" value="下一个" />
</div>
<!--第二部分，轮播图展示区-->
<!--轮播图可视区域-->
<div id="back">
<!--展示图片的背板-->
<div id="content">
<!--四张轮播图片-->
<div class="div"><img src="img/1 (1).jpg"></div>
<div class="div"><img src="img/1 (2).jpg"></div>
<div class="div"><img src="img/1 (3).jpg"></div>
<div class="div"><img src="img/1 (4).jpg"></div>
</div>
</div>
</body>
<script type="text/javascript">
//按钮标签
var last = document.getElementById("last")
var next = document.getElementById("next")
var btns = document.getElementsByClassName("btn");
//轮播图组件
var back = document.getElementById("back");
var content = document.getElementById("content");
var divs = document.getElementsByClassName("div");
//定义用来记录当前轮到第几张图片显示的 计数器 index等同于图片数组的下标
var index = 0; // 设置初始图片
//定义用来保存定时器的变量
var timer;
//把卷轴宽度设置为轮播图片的总宽；
content.style.width = divs.length * 500 + "px";
//定义函数 执行函数，卷轴被抽动向左一个轮播图片的距离， 封装实现显示下一张的函数
function nextFun() {
//获取当前显示的图片
index++;
//判断计数器+1后是否超过图片总张数，超过，则总第一张开始
/*if(index>divs.length-1){
index = 0;
}*/
index = index % 4;
//修改卷轴的左侧left值 向左移动所以值为负
content.style.left = index * 500 * -1 + "px";
}
content.style.left = "0px"
//设置定时器，调用下一张函数实现图片的轮播
timer = setInterval(nextFun, 2000);
//当鼠标移入卷轴时，定时器停止计时
content.onmouseover = function() {
clearInterval(timer);
}
//鼠标离开，调用定时器
content.onmouseout = function() {
timer = setInterval(nextFun, 2000);
}
//定义封装函数，主要控制安妮切换页面时使用
function resetTimer() {
//清理旧版定时器
clearInterval(timer);
//假期新定时器
timer = setInterval(nextFun, 2000);
}
next.onclick = function() {
//不下表示加一，表示图片向后轮播一张
index++;
//判断边界问题
if(index > 3) {
index = 0;
}
//根据indexd的值得到第几张图片，，进而修改卷轴的左偏移量
content.style.left = index * 500 * -1 + "px";
resetTimer();
}
last.onclick = function() {
index--;
if(index < 0) {
index = 3;
}
content.style.left = index * 500 * -1 + "px";
resetTimer();
}
//给1-4这四个按钮添加对应的页面切换效果
for(var i = 0; i < btns.length; i++) {
//给每一而btn对象添加一个新属性，，用来保存i的值
btns[i].index = i;
//添加点击事件
btns[i].onclick = function() {
//取出当前按钮中index的值，该值就是这个按钮对应的图片编号
index = this.index;
//手动干预当前轮播图片的位置
content.style.left = index * 500 * -1 + "px";
//清理原有定时器,并开启新定时器
resetTimer();
}
}
</script>
</html>来源： http://10.0.88.88:8083/forum.php?mod=viewthread&tid=44632
