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. Parencodings

    Description Let S = s1 s2...s2n be a well-formed string of parentheses. S can be encoded in two diff ...

  2. LXC是如何与CGROUP，namespace扯上关系的？再加上DOCKER.IO。完美！！！

    最后还余下网络去攻克了. 不同的模板,只是在同一个LINUX内核上去实现不同的发行版的特性. 终归,都是用同样的内核来实现调度.故而是一个轻量极的方案. 而不像KVM一样,GUEST OS里的CPU也 ...

  3. ISO-7816-1-2-3协议

    第一部分:卡的电气特性一. 卡的触点分配IC卡触点的分配遵循ISO7816-2的规定,如下所示: C1 电源电压(Vcc) C5 地(GND) C2 复位信号(RST) C6 不使用 C3 时钟信号( ...

  4. BS_OWNERDRAW风格的作用和例子，值得研究～

    TBitBtn就是一个例子: procedure TBitBtn.CreateParams(var Params: TCreateParams); begin inherited CreatePara ...

  5. Gap Locks 区间锁

    Gap Locks 区间锁 1. 区间锁不能用于语句锁定记录使用一个唯一索引来搜索一个唯一的记录 2.READ COMMITTED 没有区间锁 区间锁是一个锁在一个在index记录间的区间,或者一个l ...

  6. （转载）PHP去掉转义后字符串中的反斜杠\函数stripslashes

    (转载)http://www.beijibear.com/index.php?aid=182 addslashes()函数主要是在字符串中添加反斜杠对特殊字符进行转义,stripslashes()则是 ...

  7. 图论(无向图的割顶)：POJ 1144 Network

    Network   Description A Telephone Line Company (TLC) is establishing a new telephone cable network. ...

  8. 数学概念——E 期望（经典问题）

    E - 期望(经典问题) Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submit S ...

  9. [Locked] Factor combinations

    Numbers can be regarded as product of its factors. For example, 8 = 2 x 2 x 2; = 2 x 4. Write a func ...

  10. 11th day

    今天MySQL数据库的基本知识就学完了,明天开始做小项目什么的,有点小激动啊... <?php // 定义$sql语句执行函数 function my_query($sql){ $result ...