图片轮播--基于JS数组实现

谁借莪１个温暖的怀抱￠ 2022-07-13 15:52 98阅读 0赞

之前发布过一款js图片轮播，是利用js调整margin来实现的轮播，代码、思路、逻辑比较复杂，今天介绍一款相当简单的图片轮播–基于JS数组实现。  
**设计思路：**  
**定义一个数组mypic，用于存放三张图片地址，mypic\[0\]是第一张图片的地址，mypic\[1\]是第二张图片的地址，mypic\[2\]是第三张图片的地址。利用JS获取到的节点改变其src=mypic\[i\]，做到图片变换。**

js代码：

window.onload=initLinks;
        var mypic=new    Array("tplb2/t1.jpg","tplb2/t2.jpg","tplb2/t3.jpg");
        //定义数组来存放图片地址
        var thispic=0;
        function initLinks(){ 
            document.getElementById('befLink').onclick=turnBef;
            document.getElementById('nexLink').onclick=turnNex;
        }
        function turnBef(){ 
            if(thispic==0){
                thispic=mypic.length;
            }
            thispic--;
            document.getElementById('tplbimg').src=mypic[thispic];
            return false;
        }
        function turnNex(){ 
            thispic++;
            if(thispic==mypic.length){
                thispic=0;
            }
            document.getElementById('tplbimg').src=mypic[thispic];
            return false;
        }

html：

<div class="tplb">
            <img src="tplb2/t1.jpg" id="tplbimg" alt="" width="500" height="300">
            <input type="button" id="befLink" value="上一张">
            <input type="button" id="nexLink" value="下一张">
        </div>

效果：  
![运行效果][SouthEast]

[SouthEast]: /images/20220709/ff8d5bb0526f447abef93048a778f400.png

发表评论取消回复

表情：

评论列表（有 0 条评论，98人围观）

还没有评论，来说两句吧...

相关阅读

相关 js图片轮播

js图片轮播 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

淩亂°似流年/ 2024年02月17日 20:14/ 0 赞/ 12 阅读

相关 html原生js实现图片轮播,原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样

冷不防/ 2022年10月06日 07:52/ 0 赞/ 258 阅读

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，

比眉伴天荒/ 2022年10月06日 07:52/ 0 赞/ 311 阅读

相关 html实现自动图片轮播,图片轮播的实现（html__js）

1.简单实现 1)实现思想：通过轮播次数来决定显示那一张首先，可以用简单的div 包含img的框架来实现，我们为他添加按钮，每个按钮对应不同的图片，那么，每点击一次，将要显示

待我称王封你为后i/ 2022年10月06日 00:48/ 0 赞/ 238 阅读

相关图片轮播--基于JS数组实现

之前发布过一款js图片轮播，是利用js调整margin来实现的轮播，代码、思路、逻辑比较复杂，今天介绍一款相当简单的图片轮播–基于JS数组实现。设计思路：定义一个数

谁借莪１个温暖的怀抱￠/ 2022年07月13日 15:52/ 0 赞/ 99 阅读

相关 js和jquery实现图片轮播

给大家分享的是使用JS和JQ两种方法分别实现相同的图片轮播特效示例图 ![Center][] 实现思路 1.首先是个外围部分（其实也就是最外边的整体wrappe

桃扇骨/ 2022年06月07日 03:57/ 0 赞/ 215 阅读

相关 JS实现简单的图片轮播

看了很多大佬的博客，大佬们的博客写的都非常有水平，小菜鸡今天就用自己的理解方式，按照自己的思路整理一下学习笔记啦！！！轮播、轮播自然就是轮流着播放啦！图片轮播简单来

- 日理万妓/ 2022年05月17日 08:12/ 0 赞/ 197 阅读

相关 JS代码实现图片轮播

核心思想：轮播图，其实就是想要网页显示不同图片，只需要切换图片的src属性就可以了。代码： <!DOCTYPE html> <html lang="en"

谁借莪１个温暖的怀抱￠/ 2022年02月23日 04:30/ 0 赞/ 269 阅读

相关 js实现图片轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

偏执的太偏执、/ 2022年01月07日 10:21/ 0 赞/ 315 阅读

相关 js实现图片轮播简单案例

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-

偏执的太偏执、/ 2021年09月22日 15:26/ 0 赞/ 311 阅读