不用写html排版标签的图片轮播js,纯JavaScript手写图片轮播代码

左手的ㄟ右手 2022-10-06 07:53 117阅读 0赞

废话不多说了，直接给大家贴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;\}

加载中...

加载中...

**<**

**>**

![Image 1][]

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();

\}

以上所述是小编给大家介绍的纯JavaScript手写图片轮播代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

[Image 1]:

发表评论取消回复

表情：

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

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

相关阅读

相关用js写图片轮播

好的。要用 JavaScript 写图片轮播，你需要做的是： 1. 准备好你要轮播的图片，并把它们放在一个数组中。 2. 使用 JavaScript 来创建一个图片轮

骑猪看日落/ 2024年03月27日 12:37/ 0 赞/ 41 阅读

相关 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,纯JavaScript手写图片轮播代码

废话不多说了，直接给大家贴js代码实现手写图片轮播的代码了，代码非常简单，具体代码如下所示： js图片轮播切换 .imgCon\{width: 400px;height:

左手的ㄟ右手/ 2022年10月06日 07:53/ 0 赞/ 118 阅读

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

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

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

相关 html中轮播图片js代码怎么写,js+html+css实现轮播图

首先先把轮播图的结构搭建起来(html),代码如下： ![87e21a61cde69f8a16d258ef0f652414.png][] 结构可自行搭建，结构搭建完接着就是

小鱼儿/ 2022年10月05日 10:58/ 0 赞/ 273 阅读

相关 html文字自动轮播代码怎么写,图片轮播HTML代码

![428c09165da34559d48c211c0d0c1a7f.png][]代码运行效果图要实现类似幻灯片效果的图片自动切换，怎样通过Html代码实现，对于很多新手来

逃离我推掉我的手/ 2022年10月05日 10:51/ 0 赞/ 198 阅读

相关 html简单实现自动轮播代码怎么写,HTML图片轮播代码怎么写？

贴一个超级简单的JS代码，不需要插件图片轮播代码 body\{max-width: 640px;margin: 0 auto;\} \lunbo ul li\{widt

客官°小女子只卖身不卖艺/ 2022年10月05日 10:46/ 0 赞/ 223 阅读

相关手写轮播

//手写轮播 //第一块： <style> \win \{ width:250px; height:100px; overflow:hidden; \}

古城微笑少年丶/ 2022年06月06日 09:35/ 0 赞/ 141 阅读

相关 javascript图片轮播

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

深碍√TFBOYSˉ_/ 2022年05月12日 02:44/ 0 赞/ 274 阅读

相关用js写图片轮播效果

用js写图片轮播效果轮播效果有两种，位移轮播（位移又分为上下和左右）和渐变轮播。两种轮播的HTML是一样的结构，只是css和js有一点点区别。 ![效果图][wate

雨点打透心脏的1/2处/ 2022年02月24日 11:55/ 0 赞/ 203 阅读