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. c# 绘图常用对象和方法

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

  2. 【HDOJ】2266 How Many Equations Can You Find

    简单DFS. #include <cstdio> #include <cstring> #define MAXN 15 char str[MAXN]; __int64 x; i ...

  3. Linux Kernel 空指针逆向引用拒绝服务漏洞

    漏洞名称: Linux Kernel 空指针逆向引用拒绝服务漏洞 CNNVD编号: CNNVD-201306-449 发布时间: 2013-07-01 更新时间: 2013-07-01 危害等级:   ...

  4. HDU 4185 Oil Skimming

    题目大意:在一个N*N的矩阵里寻找最多有多少个“##”(横着竖着都行).     题目分析:重新构图,直接以相邻的两个油井算中间算以条边,然后进行匹配,看看两两之间最多能匹配多少对. #include ...

  5. （转载）mysql 用drop和delete方法删除用户的区别

    (转载)http://hi.baidu.com/yymagento/item/56c3f6184bce8347e75e06db 在学习drop方法删除用户时,按照书上讲的一直没操作成功,后来到网上查了 ...

  6. UVAlive3126 Taxi Cab Scheme（DAG的最小路径覆盖）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=32568 [思路] DAG的最小路径覆盖. 将每个人看做一个结点,如 ...

  7. Java EL 详细用法讲解

    本文主要介绍了Java EL的语法结构以及EL的使用方法,并结合例子代码讲解了Java EL对象.Java EL运算符以及Java EL函数.希望对Java开发者有所帮助. 一.EL简介 1.语法结构 ...

  8. Hibernate二 映射 注解 一级缓存

    Hibernate映射1.@Entity 被该注解修饰的POJO类是一个实体,可以用name属性指定该实体类的名称,系统默认以该类的类名作为实体类的名称.2.@Table 指定持久化类所映射的表,它的 ...

  9. 2016最新cocoapods版本更新，以及多个版本的问题

    先删除之前的pod 在终端中执行下面命令. 删除目录下的podrm -rf /usr/local/bin/pod 执行gem list | grep cocoapods 查看所有与cocoapods相 ...

  10. winform timespan 两个时间的间隔（差） 分类： WinForm 2014-04-15 10:14 419人阅读 评论(0) 收藏

    TimeSpan 结构  表示一个时间间隔. 先举一个小例子:(计算两个日期相差的天数) 代码如下: DateTime dt = DateTime.Now.ToShortDateString(yyyy ...