简易轮播图

原创于 2022-08-03 22:02:42 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #html #前端

本文介绍了一个使用HTML、CSS和JavaScript实现的图片轮播组件，用户可以通过左右按钮或单独的图片按钮进行切换。代码中展示了如何设置图片路径数组、定时切换图片以及响应用户的点击操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

.box {

width: 1200px;

height: 675px;

position: relative;

margin: 0 auto;

}

img {

position: absolute;

}

#left {

position: absolute;

width: 30px;

height: 30px;

font-size: 30px;

line-height: 30px;

padding-left: 0;

border: none;

border-radius: 0 15px 15px 0;

color: #fff;

margin-top: 26%;

background-color: rgba(255, 255, 255, .6);

}

#right {

position: absolute;

width: 30px;

height: 30px;

font-size: 30px;

line-height: 30px;

padding-right: 0;

border: none;

border-radius: 15px 0 0 15px;

color: #fff;

margin-top: 26%;

right: 0;

background-color: rgba(255, 255, 255, .6);

}

.box1 {

position: absolute;

width: 100%;

bottom: 0;

text-align: center;

}

.box1 input {

width: 20px;

height: 20px;

margin: 5px;

border-radius: 20px;

}

</style>

<body>

<div class="box1"><input type="button" id="btn1"><input type="button" id="btn2"><input type="button"

id="btn3"><input type="button" id="btn4"><input type="button" id="btn5"><input type="button"

id="btn6"><input type="button" id="btn7"></div>

</div>

</body>

var arr = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.jpg', 'img/6.png', 'img/7.png'];

var obj = document.getElementById('pic');

var num = 0;

var _left = document.getElementById('left')

var _right = document.getElementById('right')

var _btn1 = document.getElementById('btn1'),

_btn2 = document.getElementById('btn2'),

_btn3 = document.getElementById('btn3'),

_btn4 = document.getElementById('btn4'),

_btn5 = document.getElementById('btn5'),

_btn6 = document.getElementById('btn6'),

_btn7 = document.getElementById('btn7');

function lunbo() {

obj.src = arr[num];

num++;

if (num == 7) {

num = 0

}

setInterval('lunbo()', 2000)

_right.onclick = function () {

if (num < 6) {

num = num + 1;

obj.src = arr[num];

} else {

num = 0

obj.src = arr[num];

}

_left.onclick = function () {

if (num > 0) {

num = num - 1;

obj.src = arr[num];

} else {

num = 6

obj.src = arr[num];

}

_btn1.onclick = function () {

num = 0;

obj.src = arr[num];

}

_btn2.onclick = function () {

num = 1;

obj.src = arr[num];

}

_btn3.onclick = function () {

num = 2;

obj.src = arr[num];

}

_btn4.onclick = function () {

num = 3;

obj.src = arr[num];

}

_btn5.onclick = function () {

num = 4;

obj.src = arr[num];

}

_btn6.onclick = function () {

num = 5;

obj.src = arr[num];

}

_btn7.onclick = function () {

num = 6;

obj.src = arr[num];

}

</script>

</html>