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. 有趣的TWinControl.RecreateWnd，并分析在哪些场合使用

    CM_RECREATEWND = CM_BASE + 51; // TWinControl里有对应函数procedure CMRecreateWnd(var Message: TMessage); m ...

  2. [C#] - 注入DLL

    原文:http://xyzlht.blog.163.com/blog/static/69301417200882834211787/ ) { MessageBox.Show("创建远程线程失 ...

  3. c# 绘图常用对象和方法

    //BitMap 位图,常用的方法,     Save:主要方式有:(1)保存在图像文件里,可以指定格式[gif,bmp]:(2) 保存在流中,以指定格式[gif,bmp]         //gra ...

  4. AOE网上的关键路径(最长路径 + 打印路径)

    题目描述 一个无环的有向图称为无环图(Directed Acyclic Graph),简称DAG图.     AOE(Activity On Edge)网:顾名思义,用边表示活动的网,当然它也是DAG ...

  5. Linux Kernel ‘skbuff.c’本地拒绝服务漏洞

    漏洞名称: Linux Kernel ‘skbuff.c’本地拒绝服务漏洞 CNNVD编号: CNNVD-201307-498 发布时间: 2013-07-24 更新时间: 2013-07-24 危害 ...

  6. javascript 基础学习整理

    1. javascript是动态语言,脚本语言,弱类型语言. 2. javascript代码在html文件中的位置安排,放在<body></body>内部与外部的区别.如何引用 ...

  7. FFT(快速傅立叶变换)：HDU 1402 A * B Problem Plus

    Calculate A * B. Input Each line will contain two integers A and B. Process to end of file. Note: th ...

  8. 汇编学习笔记(3)[bx]和loop

    本文是<汇编语言>一书的学习笔记,对应书中的4-6章. 汇编程序的执行 要想将源代码变为可执行的程序需经过编译.连接两个步骤,WIN7操作系统下需要MASM程序来进行编译连接工作.将MAS ...

  9. poj 3281 最大流建图

    题目链接:http://poj.org/problem?id=3281 #include <cstdio> #include <cmath> #include <algo ...

  10. A - Wireless Network-poj2236（简单并查集）

    说是有N个村庄,刚开始每个村庄的网络都是受损状态,于是派一个人去修理,修理过的村庄只能联系距离他们半径为D的村庄,当然他们可以通过一些村庄当中转站,联系.   输入先输入一个N表示有N个村庄,还有一个 ...