js轮播的三种实现方式
1、替换scr(入门级)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.wrapper{
width: 600px;
height: 350px;
margin: 0 auto;
position: relative;
}
img{
width: 100%;
height: 100%;
}
.btn{
width:150px;
display: flex;
justify-content: space-around;
position: absolute;
left:225px;
bottom:10px;
}
.btn span{
display: block;
width:15px;
height:15px;
border: 3px solid white;
border-radius: 50%;
}
.active{
background-color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="./imgs/1.png" alt="">
<div class="btn">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var _img=document.querySelector("img");
var _wrapper=document.querySelector(".wrapper");
var _spots=document.querySelectorAll(".btn span");
var imgs=['./imgs/1.png','./imgs/2.png','./imgs/3.png','./imgs/4.png','./imgs/5.png']
//自动播放
autoplay();
var id;
var index=1;
function autoplay(){
id=setInterval(function(){
_img.src=imgs[index];
//控制小圆点
spots();
index++;
if(index>=5){
index=0;
}
},2000)
}
//小圆点变化
function spots(){
for (var i = 0; i < _spots.length; i++) {
if(i==index){
_spots[i].className="active"
}else{
_spots[i].className=""
}
}
}
//悬浮时停止
_wrapper.onmouseover=function(){
clearInterval(id);
}
//离开时继续
_wrapper.onmouseout=function(){
autoplay();
}
</script>
</body>
</html>
效果图:
2、滚动条（进阶版）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrapper {
width: 900px;
height: 350px;
overflow: hidden;
overflow: auto;
margin: 0 auto;
}
img {
width: 900px;
height: 350px;
}
.contain {
display: flex;
width: 5400px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="contain">
<img src="./img/10011.jpg" />
<img src="./img/10012.jpg" />
<img src="./img/10013.jpg" />
<img src="./img/10014.jpg" />
<img src="./img/10015.jpg" />
<img src="./img/10011.jpg" />
</div>
</div>
<script>
var _wrapper = document.querySelector(".wrapper");
var index = 0;
var num = setInterval(function () {
//滚动一张
var moveLength = 0; //用标识是否走完一张
var id = setInterval(function () {
_wrapper.scrollLeft += 12;
moveLength += 12
if (moveLength >= 900) {
clearInterval(id);
}
}, 20) //一张需要2250毫秒
index++;
// 走完所有下标和滚动都要从0开始
if (index >= 6) {
index = 0;
_wrapper.scrollLeft = 0;
}
}, 3000)
</script>
</body>
</html>
效果图：
文章来源：https://www.toymoban.com/news/detail-469328.html
3、定位（豪华版）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrapper {
width: 900px;
height: 350px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
img {
width: 900px;
height: 350px;
}
.contain {
display: flex;
width: 4500px;
position: absolute;
left: 0;
top: 0;
}
.btn {
width: 150px;
display: flex;
justify-content: space-around;
position: absolute;
left: 375px;
bottom: 10px;
}
.btn span {
display: block;
width: 15px;
height: 15px;
border: 3px solid white;
border-radius: 50%;
}
.wrapper a {
text-decoration: none;
font-size: 50px;
color: red;
position: absolute;
top: 35%;
}
.wrapper a:nth-of-type(1) {
left: 10px;
}
.wrapper a:nth-of-type(2) {
right: 10px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="contain">
<img src="./img/10011.jpg" />
<img src="./img/10012.jpg" />
<img src="./img/10013.jpg" />
<img src="./img/10014.jpg" />
<img src="./img/10015.jpg" />
</div>
<div class="btn">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:void(0);"><</a>
<a href="javascript:void(0);">></a>
</div>
<script>
var _wrapper = document.querySelector(".wrapper");
var _contain = document.querySelector(".contain");
var _btn = document.querySelector(".btn");
//下一张按钮
var _nextPic = document.querySelector(".wrapper a:nth-of-type(2)");
// 上一张按钮
var _prevPic = document.querySelector(".wrapper a:nth-of-type(1)");
var _btn = document.querySelector(".btn");
//获取所有小圆点
var _spots = document.querySelectorAll(".btn span");
// 下一张
_nextPic.onclick = function () {
next_pic();
}
var index = 0;
function next_pic() {
_contain.style.left = _contain.offsetLeft - 900 + "px";
if (_contain.offsetLeft <= -4500) {
_contain.style.left = 0;
}
index++;
if (index > 4) {
index = 0;
}
spots();
}
// 上一张
_prevPic.onclick = function () {
prev_pic();
}
function prev_pic() {
_contain.style.left = _contain.offsetLeft + 600 + "px";
if (_contain.offsetLeft > 0) {
_contain.style.left = -3600 + "px";
}
index--;
if (index < 0) {
index = 4;
}
spots();
}
//自动轮播
autoplay();
var id;
function autoplay() {
id = setInterval(function () {
next_pic();
}, 2000)
}
//小圆点变化
function spots() {
for (var i = 0; i < _spots.length; i++) {
if (i == index) {
_spots[i].className = "active"
} else {
_spots[i].className = ""
}
}
}
//悬停控制
_wrapper.onmouseover = function () {
clearInterval(id);
}
_wrapper.onmouseout = function () {
autoplay();
}
//悬浮小圆点更新图片
_btn.onmouseover = function (event) {
//获取悬浮的小圆点
var target = event.srcElement || event.target;
if (target.nodeName == 'SPAN') {
//查询小圆点下标
var n = Array.from(_spots).findIndex(function (tag) {
return tag == target
})
//更新下标
index = n;
//更新位移
_contain.style.left = -900 * n + "px";
//更新颜色
spots();
}
}
</script>
</body>
</html>
效果图：
文章来源地址https://www.toymoban.com/news/detail-469328.html
到了这里，关于三种js轮播实现方式详解（看一遍就会）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
