js原生写图片轮播和切换

最新推荐文章于 2024-07-24 21:47:58 发布

要做前端的一股清流

最新推荐文章于 2024-07-24 21:47:58 发布

阅读量7.8k

点赞数 7

分类专栏： web前端学习文章标签： js轮播图图片切换

本文链接：https://blog.csdn.net/qq_31915745/article/details/71746918

版权

web前端学习专栏收录该内容

22 篇文章 4 订阅

订阅专栏

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

要做前端的一股清流

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
js原生写图片轮播和切换

网上有很多轮播图的写法，有一些我觉得写的太过繁琐可读性差。所以我自己写了两个js块。第一个是轮播图写法，第二个是通过点击左右箭头切换图片。这里主要是展示js代码，省略了样式。1.js原生写轮播图.prev,.next{ cursor: pointer;}.showpic{ display: none;} >
复制链接

扫一扫

专栏目录