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

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

智能推荐

基于百度智能云平台的情感倾向计算_百度智能云算法原理在哪找-程序员宅基地

文章浏览阅读2.1k次。基于百度智能云平台的情感倾向计算_百度智能云算法原理在哪找

LoRa模块的使用过程中要注意什么？_lora模块没有天线头能用吗-程序员宅基地

文章浏览阅读273次。LoRa无线模块作为近年来最火热的低功耗远距离的无线模块，在市场上是非常受欢迎的。合理规范安装使用是LoRa无线模块可以长期稳定工作的重要因素之一，同时也可以避免产生损坏，减少维护和项目运维成本。那么LoRa模块在使用安装过程中，要注意什么，下面就来简单介绍一下。_lora模块没有天线头能用吗

javaweb框架--自定义标签与freemaker结合_public class goodsgallytag extends basefreemarkert-程序员宅基地

文章浏览阅读4.8k次，点赞2次，收藏6次。很有用但是不不知道怎么说，写个例子，总之方便多了，并且容易管理，重复利用强1、自定一个类，实现 javax.servlet.jsp.tagext.Tag;（PageTag.java）2、建立一个tld文件（myfTag.tld）3、建立一个freemaker文件*.ftl（page.ftl）4、建立jsp页面，导入标签（%@taglib prefix="myf" uri="/m_public class goodsgallytag extends basefreemarkertag这是什么写法

在Windows上一键编译各种版本的Protobuf-程序员宅基地

文章浏览阅读6次。所需工具 : cmake for windows 和 git for windows原理:protobuf 是google的一个开源项目,其源代码在github上可以下载到,并且源码都采用cmake来构建,所以我们可以把源码下载到本地,然后了利用cmake构建本地工程,然后编译.步骤一:下载源码　　复制以下代码,保存到download_protobuf_source.bat 文件中...

Unity热更新笔记（三）Addressable+ILRuntime 实现代码热更_unity dll 和 addresable 一起使用-程序员宅基地

文章浏览阅读1.6k次，点赞2次，收藏13次。系列文章目录（一）ILRuntime基础使用（二）Addressable基础使用目录系列文章目录简介流程DLL 转换代码DLL 加载代码简介把热更项目的 DLL 作为 addressable 的资源来实现热更新流程资源部分（1）addressable 是不支持 dll 的，所以需要把 dll 文件加工成 addressable 支持的格式（2）直接 File.ReadAllBytes 读取成 bytes 然后 File.WriteAllBytes 保存（3）保存文件的后缀为 .b_unity dll 和 addresable 一起使用

g2o optimize_如何在WordPress中添加Google Optimize（2种简单方法）-程序员宅基地

文章浏览阅读154次。g2o optimizeAre you looking to add Google Optimize on your WordPress site? 您是否要在WordPress网站上添加Google Optimize？ Google Optimize is a free tool by Google that helps website owners optimize their site..._google optimize