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

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

智能推荐

Android IPC机制-程序员宅基地

文章浏览阅读917次，点赞18次，收藏11次。为了方便有学习需要的朋友，我把资料都整理成了视频教程（实际上比预期多花了不少精力）当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。无论你现在水平怎么样一定要持续学习没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！我希望每一个努力生活的IT工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

利用ode45求解含控制量并且控制量为离散点的动力学方程_ode函数离散-程序员宅基地

文章浏览阅读2k次，点赞5次，收藏14次。1、写出微分方程函数2、求解function dy=rigid(t,y)dy=zeros(3,1);dy(1)=y(2)*y(3);dy(2)=-y(1)*y(3);dy(3)=-0.51*y(1)*y(2);end%将微分方程写成函数形式，待调用options=odeset('RelTol',1e-4,'AbsTol',[1e-4 1e-4 1e-5]);[T Y]=ode45(@rigid,[0 12],[0 1 1],options);plot(T,Y(:,1),'-',T,Y_ode函数离散

Java中==和equals的区别-程序员宅基地

文章浏览阅读3.8w次，点赞41次，收藏180次。==操作符与equals方法的区别_java中==和equals的区别

flask-login-程序员宅基地

文章浏览阅读170次。创建扩展对象实例from flask_login import LoginManagerlogin_manager = LoginManager()login_manager.login_view = 'auth.login'# 上面这一句是设置登录视图的名称，如果一个未登录用户请求一个只有登录用户才能访问的视图，# 则闪现一条错误消息，并重定向到这里设置的登录视图。# 如果未设置..._python flask please log in to access this page

html怎么控制top值为0,关于vue滚动scrollTop 赋值一直为0问题-程序员宅基地

文章浏览阅读428次。Vue中document.body.scrollTop的值总为零的解决办法最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0但是发现document.body.scrollTop一直是0。查资料发现是DTD的问题。页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。页面没有DTD，即没指定DOCTYPE时，使用d..._滚动给scrolltop赋值

kingbase数据库安装教程（初步使用）（人大金仓）-程序员宅基地

文章浏览阅读2.1k次，点赞25次，收藏21次。人大金仓数据库管理系统KingbaseES（简称：金仓数据库或KingbaseES）是北京人大金仓信息技术股份有限公司自主研制开发的具有自主知识产权的通用关系型数据库管理系统。_kingbase

随便推点

发现电脑一直默认按住Ctrl键如何解决_键盘一直自动按ctrl-程序员宅基地

文章浏览阅读1k次，点赞11次，收藏9次。你的键盘上应该有两个Ctrl键，按右边的Ctrl解决了。_键盘一直自动按ctrl

Linux 命令【6】：cut_cut使用特殊字符为分隔符-程序员宅基地

文章浏览阅读141次。Linux 命令【6】：cut文章目录一、简介二、命令详解三、实例演示一、简介cut 命令是一个将文本按列进行切分的小工具，它可以指定分隔每列的定界符。二、命令详解命令格式：cut {选项} {文件名}选项：-b ：以字节为单位进行分割。这些字节位置将忽略多字节字符边界，除非也指定了 -n 标志。-c ：以字符为单位进行分割。-d ：自定义分隔符，默认为制表符。-f ：与-d一起使用，指定显示哪个区域。-n ：取消分割多字节字符。仅和 -b 标志一起使用。如果字符的最后一._cut使用特殊字符为分隔符