js无缝滚动、图片轮播
作者：互联网
无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无缝滚动</title>
<style>
* {
padding: 0;
margin: 0;
}
.hidden {
margin: auto;
width: 1000px;
height: 200px;
overflow: hidden;
/* overflow-x: scroll; */
}
.contain {
width: 2880px;
height: 200px;
}
.picture,
.repeat {
width: 1440px;
height: 200px;
float: left;
}
.picture>img,
.repeat>img {
width: 360px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="hidden">
<div class="contain">
<div class="picture">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</div>
<div class="repeat"></div>
</div>
</div>
<script>
var repeat=document.getElementsByClassName("repeat")[0];
var picture=document.getElementsByClassName("picture")[0];
var hidden=document.getElementsByClassName("hidden")[0];
repeat.innerHTML=picture.innerHTML;
var speed=0.01;
hidden.scrollLeft=0;
res();
function res(){
setInterval(function(){
hidden.scrollLeft-=speed;
if(hidden.scrollLeft<=0){
hidden.scrollLeft=1440;
}
},1);
}
</script>
</body>
</html>
简单的图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单的图片轮播</title>
</head>
<style>
.outside {
width: 500px;
height: 300px;
margin: auto;
position: relative;
}
img {
width: 500px;
height: 300px;
}
span {
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 135px;
/* 透明度范围 0-1 透明-不透明 */
background-color: rgba(221, 221, 221, 0.7);
color: white;
font-size: 18px;
text-align: center;
line-height: 30px;
display: none;
}
.btnl {
left: 0px;
}
.btnr {
right: 0px;
}
.outside:hover>span {
display: block;
}
.yuan {
width: 100px;
height: 8px;
position: absolute;
bottom: 15px;
left: 200px;
display: flex;
white-space: nowrap;
justify-content: space-between;
}
.dian {
height: 8px;
width: 8px;
background-color: transparent;
border: solid 1px rgba(240, 252, 250, 0.986);
border-radius: 50%;
}
</style>
<body>
<div class="outside">
<span class="btnl">
<</span> <img src="img/1.jpg" alt="" class="picture">
<span class="btnr">></span>
<div class="yuan">
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
</div>
</div>
<script>
var pic = document.getElementsByClassName("picture")[0];
var outside = document.getElementsByClassName("outside")[0];
var btnl = document.getElementsByClassName("btnl")[0];
var btnr = document.getElementsByClassName("btnr")[0];
var dian = document.getElementsByClassName("dian");
var num = 0;
dian[num].style.backgroundColor = "rgba(240, 252, 250, 0.986)";
lbdh();
function lbdh() {
start = setInterval(function () {
num++;
for (var i = 0; i < dian.length; i++) {
dian[i].style.backgroundColor = "";
}
if (num > 4) {
num = 1;
}
dian[num - 1].style.backgroundColor = "rgba(240, 252, 250, 0.986)";
pic.src = "img/" + num + ".jpg";
}, 1000);
}
outside.onmouseenter = function () {
clearInterval(start);
}
outside.onmouseleave = function () {
lbdh();
}
btnl.onclick = function () {
num--;
if (num < 1) {
num = 4;
}
pic.src = "img/" + num + ".jpg";
for (var i = 0; i < dian.length; i++) {
dian[i].style.backgroundColor = "";
}
dian[num - 1].style.backgroundColor = "rgba(240, 252, 250, 0.986)";
}
btnr.onclick = function () {
num++;
if (num > 4) {
num = 1;
}
pic.src = "img/" + num + ".jpg";
for (var i = 0; i < dian.length; i++) {
dian[i].style.backgroundColor = "";
}
dian[num - 1].style.backgroundColor = "rgba(240, 252, 250, 0.986)";
}
</script>
</body>
</html>
标签：dian,轮播,getElementsByClassName,js,width,num,var,height,无缝 来源： https://blog.csdn.net/Wang_jiao_yaa/article/details/99560371