ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript ノートの画像処理

JavaScript ノートの画像処理

高洛峰
高洛峰オリジナル
2016-11-26 09:37:53970ブラウズ

 JavaScript最常见也最显著的用途之一是在网页上添加动画,从而在视觉上更具有吸引力。其中有翻转器效果,广告条应用。记录两个实用的示例:
     (一)在循环广告条中添加链接
     这样可以让访问者通过点击链接进入与广告相关的站点。
广告条所需的HTML
[html]
         
 
 
    Rotating Banner with Links 
     
 
 
   

 
           
 
 
 

以下的js脚本(script01.js)演示如何将循环广告条转换为真正的可点击的广告条
[javascript]
window.onload = initBannerLink; 
 
var thisAd = 0; 
 
function initBannerLink() { 
    if (document.getElementById("adBanner").parentNode.tagName == "A") { 
        document.getElementById("adBanner").parentNode.onclick = newLocation; 
    } 
//检查adBanner对象是否包围在链接标签中,如果是这样,那么当点击链接时,将调用newLocation()函数.  
    rotate(); 

 
function newLocation() { 
    var adURL = new Array("negrino.com","sun.com","microsoft.com"); 
    document.location.href = "http://www." + adURL[thisAd];//将当前文档窗口设置为文本字符串
http://www">http://www.加上adURL的的值                return false;//告诉浏览器不要再加载这个href,否则会加载URL两次 

 
function rotate() { 
    var adImages = new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif"); 
 
    thisAd++; 
    if (thisAd == adImages.length) { 
        thisAd = 0; 
    } 
    document.getElementById("adBanner").src = adImages[thisAd]; 
 
    setTimeout(rotate, 3 * 1000); 

注意:adURL数组中的成员数量必须与adImages数组相同,这个脚本才能正常工作
          建一个images文件夹,然后存入banner1.gif,banner2.gif,banner3.gif三张gif格式图片
 
(二)随机开始循环显示图像
如果有很多图片需要显示,可能不希望在每次加载页面时都从同样的图像开始显示,下面HTML和js组合可以实现随机开始
[html]
 
 
    Rotating Random Banner 
     
 
 
   

 
        Ad Banner 
   


次の js スクリプト (script02.js) は、ランダムな画像から開始して画像を表示できます
[javascript]
window.onload = selectPic; ( "images/reading1.gif","images/reading2.gif","images/reading3.gif");
var thisAd = 0;

functionchoosePic() {
thisAd = Math.floor((Math.random) ( ) * adImages.length));
document.getElementById("adBanner").src = adImages[thisAd];
}

functionrotate() {
thisAd++; adImages .Length) {t thisad = 0;
document.GetelementByid ("Adbanner")。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。