php中轮转图片js代码,纯JavaScript手写图片轮播代码-程序员宅基地

废话不多说了，直接给大家贴js代码实现手写图片轮播的代码了，代码非常简单，具体代码如下所示：

js图片轮播切换

.imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}

.imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}

.numStyle{top: 0px;}

.textStyle{bottom: 0px;}

.imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}

.imgCon .prev{left: 10px;}

.imgCon .next{left: 370px;}

img{width:400px;height: 400px;}

加载中...

var numCon = document.getElementById('numCon');

var textCon = document.getElementById('textCon');

var prev = document.getElementById('prev');

var next = document.getElementById('next');

var imgChange = document.getElementById('imgChange');

var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg'];

var imgText = ['第一张','第二张','第三张','第四张'];

var num = 0;

//数字图片变化函数

function imgTab(){

numCon.innerHTML = num+1 + '/' + imgArr.length; //数字变化

textCon.innerHTML = imgText[num]; //底部文字内容变化

imgChange.src = imgArr[num]; //图片变化

}

imgTab();

//下一张按钮

next.onclick = function(){

num++;

if(num == imgArr.length){

num = 0;

}

imgTab();

}

//上一张按钮

prev.onclick = function(){

num--;

if(num == -1){

num = imgArr.length-1;

}

imgTab();

}

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

本文链接：https://blog.csdn.net/weixin_39973410/article/details/116125008

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

linux配置的jmeter环境变量_linux配置jmeter环境变量-程序员宅基地

在CentOS 7系统中配置非root用户的jmeter环境变量，通过编辑.bash_profile文件并添加export JMET命令来配置。确保配置生效后，可通过java -version命令查看java版本信息。参考链接：知乎和程序员宅基地。

L2-039 清点代码库 - java_l2-039 清点代码库 java-程序员宅基地

文章浏览阅读7.6k次。L2-039 清点代码库 (25 分)Java (javac)时间限制1500 ms内存限制128 MBPython (python3)时间限制1500 ms内存限制64 MB其他编译器时间限制500 ms内存限制64 MB上图转自新浪微博：“阿里代码库有几亿行代码，但其中有很多功能重复的代码，比如单单快排就被重写了几百遍。请设计一个程序，能够将代码库中所有功能重复的代码找出。各位大佬有啥想法，我当时就懵了，然后就挂了。。。”这里我们把问题简化一下：首先假设两个功能模_l2-039 清点代码库 java

PTA:完全二叉搜索树 (25 分)_完全二叉搜索树分数 10 作者陈越单位浙江大学一个无重复的非负整数序列,必定-程序员宅基地

文章浏览阅读922次，点赞2次，收藏6次。题目详情：一个无重复的非负整数序列，必定对应唯一的一棵形状为完全二叉树的二叉搜索树。本题就要求你输出这棵树的层序遍历序列。输入格式：首先第一行给出一个正整数N（≤1000），随后第二行给出N个不重复的非负整数。数字间以空格分隔，所有数字不超过 2000。输出格式：在一行中输出这棵树的层序遍历序列。数字间以 1 个空格分隔，行首尾不得有多余空格。输入样例：101 2 3 4 5 6 7 8 9 0结尾无空行输出样例：6 3 8 1 5 7 9 0 2 4..._完全二叉搜索树分数 10 作者陈越单位浙江大学一个无重复的非负整数序列,必定

[2020.8.3]联想 ZUK Z1 Magisk ROOT 纯净无推广一键刷机 ZUI_-程序员宅基地

文章浏览阅读72次。教程本刷机包比一般的大，是因为同时适配recovery卡刷和酷卓一键刷机。但是刷进系统后和普通刷机包都是一样的。注意事项(务必细读) 联想 ZUK Z1 免解锁BL(bootloader)，一键ROOT是保资料的，刷机是会清空数据的(无论如何都请备份重要数据)卡刷方法卡刷需要已经安装了twrp recovery，直接传入手机后用twrp recovery刷机，和普通刷机包使用无区别..._zukz1被root了怎么办

数据结构与算法分析 3.26 — 双端队列的实现-程序员宅基地

文章浏览阅读590次。一、题目编写支持双端队列的例程，插入与弹出操作均花费 O(1)时间二、解答双端队列（deque，全名double-ended queue）是一种具有队列和栈性质的数据结构。双端队列中的元素可以从两端弹出，插入和删除操作限定在队列的两边进行。基本操作：在双端队列两端插入与删除。 ADT术语： ..._编写算法实现双端队列。数据结构分析

centos7安装clion_clion centos-程序员宅基地

文章浏览阅读4.2k次。centos7安装clion下载clion的linux包。上传到linux服务器下。scp -P 20211 E:\迅雷下载\cmake-3.14.3.tar.gz 用户名@服务器地址:/home/bob/解压并到解压的文件夹bin目录下。运行命令“./clion.sh”。（需在centos7图形界面模式下才能启动clion）启动之后还不能运行c语言程序，我们还需要安装gcc、..._clion centos