js原生写图片轮播和切换

瘦欲@ 提交于 2019-12-06 05:06:42

网上有很多轮播图的写法,有一些我觉得写的太过繁琐可读性差。所以我自己写了两个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);
    }




标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!