1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>js图片轮播切换</title>
  6. <style type="text/css">
  7. 　　.imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}
  8. 　　.imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}
  9. 　　.numStyle{top: 0px;}
  10. 　　.textStyle{bottom: 0px;}
  11. 　　.imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}
  12. 　　.imgCon .prev{left: 10px;}
  13. 　　.imgCon .next{left: 370px;}
  14. 　　img{width:400px;height: 400px;}
  15. </style>
  16. </head>
  17. <body>
  18. 　　<div class="imgCon">
  19. 　　　　<span id="numCon" class="numStyle">加载中...</span>
  20. 　　　　<span id="textCon" class="textStyle">加载中...</span>
  21. 　　　　<strong id="prev" class="prev">&lt;</strong>
  22. 　　　　<strong id="next" class="next">&gt;</strong>
  23. 　　　　<img src="" id="imgChange"/>
  24. 　　</div>
  25. 　　<script type="text/javascript">
  26. 　　　　var numCon = document.getElementById('numCon');
  27. 　　　　var textCon = document.getElementById('textCon');
  28. 　　　　var prev = document.getElementById('prev');
  29. 　　　　var next = document.getElementById('next');
  30. 　　　　var imgChange = document.getElementById('imgChange');
  31. 　　　　var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg'];
  32. 　　　　var imgText = ['第一张','第二张','第三张','第四张'];
  33. 　　　　var num = 0;
  34. 　　　　//数字 图片变化函数
  35. 　　　　function imgTab(){
  36. 　　　　　　numCon.innerHTML = num+1 + '/' + imgArr.length; //数字变化
  37. 　　　　　　textCon.innerHTML = imgText[num]; //底部文字内容变化
  38. 　　　　　　imgChange.src = imgArr[num]; //图片变化
  39. 　　　　}
  40. 　　　　imgTab();
  41. 　　　　//下一张 按钮
  42. 　　　　next.onclick = function(){
  43. 　　　　num++;
  44. 　　　　if(num == imgArr.length){
  45. 　　　　　　num = 0;
  46. 　　　　}
  47. 　　　　imgTab();
  48. 　　　　}
  49. 　　　　//上一张 按钮
  50. 　　　　prev.onclick = function(){
  51. 　　　　　　num--;
  52. 　　　　if(num == -1){
  53. 　　　　　　num = imgArr.length-1;
  54. 　　　　}
  55. 　　　　imgTab();
  56. 　　　　}
  57. 　　</script>
  58. </body>
  59. </html>

javaScript 手写图片轮播的更多相关文章

  1. HTML纯javaScript代码写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  3. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  4. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...

  5. JavaScript数组实现图片轮播

    最终效果 注:图片来源于百度图片 文件结构: 代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  6. vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果

    1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...

  7. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 手写无缝轮播banner

    <div class="banner"> <ul class="clearfloat bannerul xin" id="xin&q ...

  9. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

随机推荐

  1. Delphi中的THashTable

    在Delphi中,Inifiles单元中有一个TStringHash的类,不过它的Value仅支持Integer(其实也不是问题,有其它类型可以将变量变为Pointer),有点不舒服,今天没事做就把它 ...

  2. CBO学习笔记（转）

    Query Transformation 在继续研究SQL的其他操作(比如Join)对CBO的影响之前,我们来讨论一下Oracle优化器的Query Transformation特性.我们都习惯于根据 ...

  3. java学习之数组（一）【内存】

    在java语言当中,为了更方便多个数据的管理,这里提供数组. 比如说,现在我们有一组数据,7,8,9,9,为了保存这四个数据,我们分别要定义变量来保存,少了还好说.但是假如,有100多个数据呢,我们一 ...

  4. River Hopscotch(二分)

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5473   Accepted: 2379 Description Every ...

  5. COJ 2108 Day7-例1

    Day7-例1 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述   在计算机中,CPU只能和高速缓存Cache直接交换数据.当 ...

  6. 【转】 为SeekBar滑块设置固定值以及自定义Seekbar，progressbar样式--不错

    原文网址:http://blog.csdn.net/jdsjlzx/article/details/7804080 最近在项目中使用到了seekbar和progressbar,且必须按照设计要求来进行 ...

  7. Delphi 为TClientdataset定义结果集，并增加记录

    Delphi 为TClientdataset定义结果集,并增加记录 procedure addDefsFieldsForCDS(aDataSet: TClientDataSet);begin  aDa ...

  8. wchar_t与char、wstring与string的相互转换

    个人倾向于使用优秀的开源库做这个. 最近使用boost进行转换,代码极其简单: boost::filesystem::path src(wchar_t); char = src.string().c_ ...

  9. Apache-Tika解析Excell文档

    通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理Excell格式的文章,如下: package com.mengyao.tika.app; ...

  10. PHP 生命周期,Opcode 缓存。

    1.php 执行的生命周期. 用户发出请求---->.php--->词典扫描--->解析--->创建Opcode--->处理opcode--->响应 这就是php的 ...