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: ...
随机推荐
- Delphi中的THashTable
在Delphi中,Inifiles单元中有一个TStringHash的类,不过它的Value仅支持Integer(其实也不是问题,有其它类型可以将变量变为Pointer),有点不舒服,今天没事做就把它 ...
- CBO学习笔记(转)
Query Transformation 在继续研究SQL的其他操作(比如Join)对CBO的影响之前,我们来讨论一下Oracle优化器的Query Transformation特性.我们都习惯于根据 ...
- java学习之数组(一)【内存】
在java语言当中,为了更方便多个数据的管理,这里提供数组. 比如说,现在我们有一组数据,7,8,9,9,为了保存这四个数据,我们分别要定义变量来保存,少了还好说.但是假如,有100多个数据呢,我们一 ...
- River Hopscotch(二分)
Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5473 Accepted: 2379 Description Every ...
- COJ 2108 Day7-例1
Day7-例1 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 在计算机中,CPU只能和高速缓存Cache直接交换数据.当 ...
- 【转】 为SeekBar滑块设置固定值以及自定义Seekbar,progressbar样式--不错
原文网址:http://blog.csdn.net/jdsjlzx/article/details/7804080 最近在项目中使用到了seekbar和progressbar,且必须按照设计要求来进行 ...
- Delphi 为TClientdataset定义结果集,并增加记录
Delphi 为TClientdataset定义结果集,并增加记录 procedure addDefsFieldsForCDS(aDataSet: TClientDataSet);begin aDa ...
- wchar_t与char、wstring与string的相互转换
个人倾向于使用优秀的开源库做这个. 最近使用boost进行转换,代码极其简单: boost::filesystem::path src(wchar_t); char = src.string().c_ ...
- Apache-Tika解析Excell文档
通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理Excell格式的文章,如下: package com.mengyao.tika.app; ...
- PHP 生命周期,Opcode 缓存。
1.php 执行的生命周期. 用户发出请求---->.php--->词典扫描--->解析--->创建Opcode--->处理opcode--->响应 这就是php的 ...