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. iOS Developer Libray （中文版）-- Defining Classes 定义类

    该篇是我自己学习iOS开发时阅读文档时随手记下的翻译,有些地方不是很准确,但是意思还是对的,毕竟我英语也不是很好,很多句子无法做到准确的字词翻译,大家可以当做参考,有错误欢迎指出,以后我会尽力翻译的更 ...

  2. 微软Azure Services Bus中的工作流

    在Azure Services Platform上对于工作流服务的支持,一直是我很感兴趣的内容.当然也是疑问 比较多的领域.鉴于这方面的资料太少,所以今天就从AzureServicesKit中的一个D ...

  3. UVA 11478 Halum（差分约束）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=34651 [思路] 差分约束系统. 设结点u上的操作和为sum[u] ...

  4. [Audio processing] 数据集生成 & 性别年龄分类训练 Python

    1.重命名,Python中文路径各种错误,所以需要先将所有文件的路径名全都改成中文.用的是MAC系统,所以WIN下的命令行批处理没法解决,所以用C来完成 // Created by Carl on 1 ...

  5. zoj 1760 floyd构图+Dinic最大流

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1760 #include <cstdio> #includ ...

  6. JSTL和select标签的组合使用

    1.用于根据不同的值显示对应的内容,不能选择 <select name="grade"> <c:choose> <c:when test=" ...

  7. java 编辑报错 非法字符: \ufeff 解决方案

    用Notepad ++ 调成utf-8 格式 bom 或无bom根据情况 新建类 把代码一句句粘进去 ok

  8. storyBoard方式ScrollView的AutoLayout

    在使用storyboard和xib时,我们经常要用到ScrollView,还有自动 布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说 ...

  9. QML 语言基础

    在<Qt Quick 简单介绍>中我们提到 QML 语法和 Json 相似,请參考<Qt on Android: http下载与Json解析>查看 Json 语法.当然这里我们 ...

  10. linux网络编程学习笔记之五 -----并发机制与线程�

    进程线程分配方式 简述下常见的进程和线程分配方式:(好吧,我仅仅是举几个样例作为笔记...并发的水太深了,不敢妄谈...) 1.进程线程预分配 简言之,当I/O开销大于计算开销且并发量较大时,为了节省 ...