基於js讀取gif文件（js製作gif）

本文目錄一覽：

• 1、js如何實現先調用一個gif格式的圖片，在調用一個png圖片
• 2、asp js 如何讀取文件夾中的圖片並點擊自動播放後可以每隔一秒播放一張？
• 3、javascript中怎樣讀取指定文件夾里的圖片？
• 4、原生js獲取文件
• 5、js獲取圖片路徑

js如何實現先調用一個gif格式的圖片，在調用一個png圖片

使用js等待！初始化載入的時候。img id=”tu” src=”動態圖片.gif”/

10秒後執行js代碼，改變src=「靜態圖片.jpg」

我只能幫你提供思路了。代碼網上直接找來組織一下就可以了。

asp js 如何讀取文件夾中的圖片並點擊自動播放後可以每隔一秒播放一張？

script

$(function(){

$(‘.slides’).slides({ 這裡就是圖片滾動代碼還有兩個js

preload: true,

preloadImage: ‘img/loading.gif’,

play: 2800,

pause: 2500,

hoverPause: true

});

});

/script

javascript中怎樣讀取指定文件夾里的圖片？

var i_strngth = 1;

var i_image = 0;

var imageurl = new Array();

// 這一部分我是手功指定的圖片路徑,你的圖片路徑是放在資料庫中的，只用在這裡做更改，把路徑的設置改成動態讀取就可以了

//======================================

imageurl[0] =”images/pic1.gif”;

imageurl[1] =”images/pic2.gif”;

imageurl[2] =”images/pic3.gif”;

imageurl[3] =”images/pic4.gif”;

//======================================

function showimage()

{

if(document.all)

{

if (i_strngth = 110)

{

div_Pic.innerHTML = “img style=\”filter:alpha(opacity='” + i_strngth + “‘); height:248px; width:138px;\” src='” + imageurl[i_image] + “‘ border=’0’ /”;

i_strngth = i_strngth + 10;

var timer=setTimeout(“showimage()”, 100);

}

else

{

clearTimeout(timer);

var timer = setTimeout(“hideimage()”, 1000);

}

}

if(document.layers)

{

clearTimeout(timer)

document.div_Pic.document.write(“img src='” + imageurl[i_image] + “‘ border=’0′ style=’height:248px; width:138px;’ /”);

document.close();

i_image++;

if (i_image = imageurl.length)

{

i_image = 0;

}

var timer = setTimeout(“showimage()”, 2000);

}

}

function hideimage()

{

if (i_strngth = -10)

{

div_Pic.innerHTML = “img style=\”filter:alpha(opacity='” + i_strngth + “‘); height:248px; width:138px;\” src='” + imageurl[i_image] + “‘ border=’0’ /”;

i_strngth = i_strngth – 10;

var timer = setTimeout(“hideimage()”, 100);

}

else

{

clearTimeout(timer)

i_image++;

if (i_image = imageurl.length)

{

i_image = 0;

}

i_strngth = 1;

var timer=setTimeout(“showimage()”, 500);

}

}

那就需要用到Ajax技術，你是用時間來做為圖片名稱，那麼可以用程序取出文件名然後選取離系統當前時間最近的一個文件做為當前顯示的圖片，然後回傳達到JS來進行圖片路徑的更改顯示

原生js獲取文件

HTML5新增了關於文件的File，FileReader兩個對象，用於獲取文件信息和讀取文件信息。

var

    fileInput = document.getElementById(‘test-image-file’),

    info = document.getElementById(‘test-file-info’),

    preview = docement.getElementById(‘test-image-preview’);

//監聽change事件

fileInput.addEventListener(‘change’, function() {

  //清除背景圖片

  preview.style.backgroundImage = ”;

  //檢查文件是否選擇

  if(!fileInput.value) {

    info.innerHTML = ‘沒有選擇文件’;

    return;

  }

  //獲取file文件引用：

  var file = fileInput.files[0];

  //獲取文件信息

  info.innerHTML = ‘文件：’ + file.name + ‘br’ +

                  ‘大小：’ + file.size + ‘br’ +

                  ‘修改：’ + file.lastModifiedDate;

if(file.type !== ‘image/jpeg’ file.type !== ‘image/png’ file.type !== ‘image/gif’) {

  alert(‘不是有效的圖片文件’);

  return;

}

  //讀取文件

  var reader = new FileReader();

  reader.onload = function(e) {

    var data = e.target.result;

  preview.style.backgroundImage = ‘url(‘+ data + ‘)’;

  };

  //以DataURL的形式讀取文件：

  reader.readerAsDataURL(file);

})

js獲取圖片路徑

理論是可以的，首先用js取得location，然後在和圖片路徑相加

哦

想複雜了

其實很簡單，你在image元素裡面加個onclick事件，這樣寫

tabletr

tdinput type=”image” id=”expression1″ name=”expression1″ src=”1.gif” onClick=”soso(this)/td

tdinput type=”image” id=”expression2″ name=”expression2″ src=”2.gif” onClick=”soso(this)/td

tdinput type=”image” id=”expression3″ name=”expression3″ src=”3.gif” onClick=”soso(this)/td

tdinput type=”image” id=”expression4″ name=”expression4″ src=”4.gif” onClick=”soso(this)/td

tdinput type=”image” id=”expression5″ name=”expression5″ src=”5.gif” onClick=”soso(this)/td

/tr/table

div id=”abc” /div

script language=”javascript”

function soso(tt){

document.all(“abc”).innerHTML=”img Src='”+tt.src+”‘”

}

/script

________________________________

你是想在abc層某處加上這個表情么？類似在線編輯器？

那麼簡單的辦法就是在abc層裡面再加個div或者span，賦予ID，修改soso函數裡面的ID名就可以了