js原生写图片轮播和切换

来源：互联网发布：IP仿冒Mac地址上网编辑：程序博客网时间：2024/05/17 22:07

网上有很多轮播图的写法，有一些我觉得写的太过繁琐可读性差。所以我自己写了两个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" onclick="plusSlides(-1)"><</div><div class="next" onclick="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);    }

0 0