轮播图制作
效果: 轮播图自动自动切换 点击页数时候跳转到相应页数;
一、html部分:
<body>
<img src="img/1.jpg" id="li" alt="">
<input type="button" value="上一页" onclick="up(this)">
<input type="button" value="1" onclick="change(this)">
<input type="button" value="2" onclick="change(this)">
<input type="button" value="3" onclick="change(this)">
<input type="button" value="4" onclick="change(this)">
<input type="button" value="5" onclick="change(this)">
<input type="button" value="6" onclick="change(this)">
<input type="button" value="7" onclick="change(this)">
<input type="button" value="8" onclick="change(this)">
<input type="button" value="下一页" onclick="next(this)">
</body>
二、Js部分
var imgs = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg"];
//定义一个变量记录当前是哪张图片
var index = 0;
var dingshi;
//点击按钮时候切换页面方法
function change(node) {
//先获取该节点的value值
// var val=node.value;
index = node.value - 1;
//切换图片
document.getElementById("li").src = imgs[index];
}
//下一页
function next() {
if (index == imgs.length - 1) {
//让下标为0即为第一张图片
index = 0;
} else {
index++;
}
document.getElementById("li").src = imgs[index];
}
//上一页
function up() {
//如果是第一页
if (index == 0) {
//让下标为即为最后一张图片
index = imgs.length - 1;
} else {
index--;
}
document.getElementById("li").src = imgs[index];
}
//开始轮播
function start() {
dingshi = setInterval(next, 2000);
}
//停止轮播
function stop() {
clearInterval(dingshi);
}
//设置定时器
window.onload = function () {
dingshi = setInterval(next, 2000);
var imgg = document.getElementById("li");
//当鼠标放到图片上取消定时器
imgg.onmouseover = stop;
//当鼠标放到图片上设置定时器
imgg.onmouseout = start;
}
欢迎各位大神指点和评论;
