javaScript 手写图片轮播
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>js图片轮播切换</title>
- <style type="text/css">
- .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;}
- </style>
- </head>
- <body>
- <div class="imgCon">
- <span id="numCon" class="numStyle">加载中...</span>
- <span id="textCon" class="textStyle">加载中...</span>
- <strong id="prev" class="prev"><</strong>
- <strong id="next" class="next">></strong>
- <img src="" id="imgChange"/>
- </div>
- <script type="text/javascript">
- 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();
- }
- </script>
- </body>
- </html>
javaScript 手写图片轮播的更多相关文章
- HTML纯javaScript代码写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- JavaScript学习---简易图片轮播
效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...
- JavaScript数组实现图片轮播
最终效果 注:图片来源于百度图片 文件结构: 代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- vue手写的轮播图片,解决已经修改data中的值,页面标签已绑定,但页面没效果
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手写无缝轮播banner
<div class="banner"> <ul class="clearfloat bannerul xin" id="xin&q ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
随机推荐
- ibatis动态语句加and 和不加and
<select id="queryGoodsGroupCodeName" parameterClass="String" resultClass=&quo ...
- 0x80072f8a未指定的错误
问题: 安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2.exe提示:0x80072f8a未指定的错误 解决方法: 修改IE选项,取消选项 “检查服务器证书是否已 ...
- Lua开发环境配置
Lua(英语发音:/ˈluːə/)程序设计语言是一个简洁.轻量.可扩展的脚本语言,是葡萄牙语中“Luna”(月亮)的意思. Lua is a powerful, fast, lightweight, ...
- 动态规划:NOI 2009 管道取珠
[NOI2009] 管道取珠 输入文件:ballb.in 输出文件:ballb.out 简单对比 时间限制:1 s 内存限制:512 MB #include <iostream> ...
- 【枚举】Vijos P1496 火柴棒等式 (NOIP2008提高组第二题)
题目链接: https://vijos.org/p/1496 题目大意: 给你n(n<24)根火柴棍,你可以拼出多少个形如“A+B=C”的等式?("+"和"=&qu ...
- 2013=10=19 ENGLISH 翻译
数据结构习题及答案 严蔚敏_课后习题答案 http://www.doc88.com/p-243584884293.html 273089354 随着女性获得平等权力的趋势,女性日渐增长的经济权力以及为 ...
- SRM 401(1-250pt, 1-500pt)
DIV1 250pt 题意:给一个整数f,则这样的正整数整数数列称为好数列:数列元素a0 >= a1 >= a2...,且a0<= f, a1 <= f-1, a2 <= ...
- 函数调用和给对象发消息(Runtime理解)
在写代码的时候这个差距其实是不打看的出得,很多时候也就无所谓叫什么,很多人为了便于理解,干脆就叫函数调用.这个其实应该是oc的一个特色,消息发送.具体的类typedef struct objc_cla ...
- Git push本地代码到新建远程仓库
快速搞定 1.git init #初始化本地仓库 2.git remote add origin https://git.oschina.net/redArmy/springboot-swagger ...
- Struts2.xml中result type属性说明
在struts2配置XML里,result中type属性有以下几种: 1.dispatcher:服务器跳转到前台,后面跟着可以是JSP.htm等等前台页面,默认是这种. 2.redirect:客户端跳 ...