简单的js图片轮换代码(js图片轮播)_javascript技巧

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>images</title>
 <script type="text/javascript">
  var curIndex = 0;
  var timeInterval = 1000;
  var arr = new Array();
  arr[0] = "1 (1).jpg";
  arr[1] = "1 (2).jpg";
  arr[2] = "1 (3).jpg";
  arr[3] = "1 (4).jpg";
  arr[4] = "1 (5).jpg";
  arr[5] = "1 (6).jpg";
  arr[6] = "1 (7).jpg";
  arr[7] = "1 (8).jpg";
  setInterval(changeImg,timeInterval);
  function changeImg() {
   var obj = document.getElementById("obj");
   if (curIndex == arr.length-1) {
    curIndex = 0;
   } else {
    curIndex += 1;
     }
   obj.src = arr[curIndex];
  }
 </script>

 <script language="javascript">
  setInterval(test,1000);
  var array = new Array();
  var index = 0;
  var array = new Array("1 (1).jpg","1 (2).jpg","1 (3).jpg","1 (4).jpg","1 (5).jpg","1 (6).jpg","1 (7).jpg","1 (8).jpg");
  function test() {
   var myimg=document.getElementById("imgs");
   if(index==array.length-1)
   { index=0; }else{ index++; }
   myimg.src=array[index];
  }
 </script>
 </head>
 <body>
  <img id = "obj" src="1 (1).jpg" border = 0 />
 </body>

<body>
</body>
</html>

时间: 2024-11-16 18:14:48

简单的js图片轮换代码(js图片轮播)_javascript技巧的相关文章

js图片自动轮播代码分享(js图片轮播)_javascript技巧

1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left =  .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http:

js实现图片点击左右轮播_javascript技巧

这个 相当于一个小框架,拿来就可以用: 1. 功能:  如上图显示: 点击左右两个button,可以实现图片向左右滚动,也可以设置在多少秒自己滚动. 2. 首先建立一个js文件,文件名为play.js(只要和HTML中的引入相同就可以了): var sina = { $: function(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")')

轻松实现Bootstrap图片轮播_javascript技巧

本文实例讲解了Bootstrap实现图片轮播的详细代码,分享给大家供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/cs

JS及PHP代码编写八大排序算法_javascript技巧

从学习数据结构开始就接触各种算法基础,但是自从应付完考试之后就再也没有练习过,当在开发的时候也是什么时候使用什么时候去查一下,现在在学习JavaScript,趁这个时间再把各种基础算法整理一遍,分别以JS和PHP语法的方式编写代码.1.冒泡排序原理:临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换,这样一趟过去后,最大或最小的数字被交换到了最后一位,然后再从头开始进行两两比较交换,直到倒数第二位时结束时间复杂度:平均情况:O(n2)  最好情况:O(n) 最坏情况:O(n2)空间复

js相册效果代码(点击创建即可)_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

js 广告图片轮换代码

js 广告图片轮换代码 <script language="javascript" type="text/javascript">  var imgWidth=232;              //图片宽  var imgHeight=150;             //图片高  var TimeOut=5000;              //每张图切换时间 (单位毫秒);  var imgUrl=new Array();  var adNum=0

图片压缩-求一份压缩图片的代码!图片本身有4-5m,好像能压缩到500k!就大神指教!谢谢啦!

问题描述 求一份压缩图片的代码!图片本身有4-5m,好像能压缩到500k!就大神指教!谢谢啦! 如题!谢谢大神!看到了!能帮我下最好了!c代码也行!我这主要是mac电脑图片压缩! 解决方案 图片压缩无非分为两步,一个是编码方式,比如采用png jpg对位图压缩,一个是像素采样,把分辨率降低. 你可以按照这两个思路去google相应的代码. 解决方案二: 上次看到一个网站专门压缩的效率很高.你上网搜索好像是国外的一个网站. 解决方案三: BitmapFactory.Options options

javascript实现图片自动和可控的轮播切换特效_javascript技巧

演示图: 需要引入的文件 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1

原生js和jQuery实现淡入淡出轮播效果_jquery

本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下:基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播<