网上有很多轮播图的写法,有一些我觉得写的太过繁琐可读性差。所以我自己写了两个js块。第一个是轮播图写法,第二个是通过点击左右箭头切换图片。这里主要是展示js代码,省略了样式。
1.js原生写轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.prev,.next{
cursor: pointer;
}
.showpic{
display: none;
}
</style>
</head>
<body>
<div class="showpic" style="display: block"><img src="images/bx.jpg"></div>
<div class="showpic"><img src="images/hafo.jpg"></div>
<div class="showpic"><img src="images/standfo.jpg"></div>
<div class="prev" οnclick="plusSlides(-1)"><</div>
<div class="next" οnclick="plusSlides(1)">></div>
<script>
var slideIndex=1;
showSlides();
function showSlides() {
var slides=document.getElementsByClassName('showpic');
if(slideIndex<1){
slideIndex=slides.length;
}
if(slideIndex>slides.length){
slideIndex=1;
}
for(var i =0;i<slides.length;i++){
slides[i].style.display='none';
}
slides[slideIndex-1].style.display='block';
slideIndex++;
setTimeout(showSlides,3000); //这里要注意setTimeout的用法,使用函数名作为句柄调用时,不能包含
任何参数,写成showSlides()也是不行的。
}
</script>
</body>
</html>
2.js写图片切换
<script>
var slideIndex=1;
showSlides(slideIndex); //与上处代码的变化是加了一个slideIndex参数
function plusSlides(n){
showSlides(slideIndex+=n);
}
function showSlides(n) { // 此处必须要用一个形参n,否则会卡死。
var slides=document.getElementsByClassName('showpic');
if(n<1){
slideIndex=slides.length;
}
if(n>slides.length){
slideIndex=1;
}
for(var i =0;i<slides.length;i++){
slides[i].style.display='none';
}
slides[slideIndex-1].style.display='block';
// slideIndex++;
// setTimeout(showSlides,3000);
}
来源:CSDN
作者:要做前端的一股清流
链接:https://blog.csdn.net/qq_31915745/article/details/71746918