简单轮播图JS

最新推荐文章于 2024-09-04 20:18:34 发布

SZ_HMT

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量422

点赞数 1

分类专栏： JS轮播文章标签： javascript 轮播

本文链接：https://blog.csdn.net/SZ_HMT/article/details/76315099

版权

JS轮播专栏收录该内容

2 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box {
position: relative;
margin: 10px auto;
width: 600px;
}

#box img {
width: 600px;
}

#box .control {
position: absolute;
right: 10px;
bottom: 10px;
height: 20px;
line-height: 20px;
}

#box .left,.right{

display: inline-block;
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 20px;
text-align: center;
background: #ccc;
top: 100px;
right: 0;
}

#box .left{
left: 0;
}

.control span {
width: 20px;
height: 20px;
margin-right: 5px;
display: inline-block;
background: #666;
border-radius: 50%;
}

.control span.active {
background: #fa0;
}
</style>
<script>
var imgurl = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];

window.onload = function () {
var box = document.getElementById('box');
var index = 0;
var spans = [];
var image = createImage();
//
var timer = setInterval(next,1500);
appendBtn();

function createImage() {
//添加小圆点图片
var img = document.createElement('img');
img.src = 'img/' + imgurl[0];
box.appendChild(img)
// var btn = ['<','>'];

//将span按钮添加到轮播图上
appendSpans(box,imgurl,img);
return img
}
function appendBtn(){
var span = document.createElement('span');
span.className = 'right';
span.innerHTML = '>';
span.onclick = next;
box.appendChild(span);

var span1 = document.createElement('span');
span1.className = 'left';
span1.innerHTML = '<';
span1.onclick = prev;
box.appendChild(span1);
}

function appendSpans(parent,arr,img){
var control = document.createElement('div');
control.className = 'control';
parent.appendChild(control);
for(var i= 0;i < arr.length;i++){
var span = document.createElement('span');
control.appendChild(span);
//给span按钮添加点击事件
span.index = i;
span.onclick = function(){
index = this.index;
img.src = 'img/'+ imgurl[this.index]
activeSpan(this.index,spans)
}

spans.push(span);
}
control.firstElementChild.className='active';
}

function next(){
index++;
if(index >= imgurl.length){
index = 0;
}
image.src = 'img/'+imgurl[index];
activeSpan(index,spans)
}

function prev(){
index--;
if(index < 0){
index = imgurl.length - 1;
}
image.src = 'img/'+imgurl[index];
activeSpan(index,spans)
}

function activeSpan(index, spans) {
for (var i = 0; i < spans.length; i++) {
if (i == index) {
spans[i].className = 'active';
} else {
spans[i].className = '';
}
}
}

box.onmouseenter = function () {
//鼠标移入
clearInterval(timer)
}

box.onmouseleave = function () {
//鼠标移出
timer = setInterval(next,1500)
}

}

</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

SZ_HMT

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单轮播图JS

#box { position: relative; margin: 10px auto; width: 600px; } #box img { width: 600px; } #box .control {
复制链接

扫一扫

专栏目录