JavaScript学习日记5-处理图像2

最新推荐文章于 2024-05-27 01:12:55 发布

打八阿哥

最新推荐文章于 2024-05-27 01:12:55 发布

阅读量131

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_45457760/article/details/108204210

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

创建循环的广告条

    <head>
        <script src="js.js"></script>
        <style>
            img{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="centered">
            <img src="images/dog1.JPG" id="dog" alt="dog">
        </div>
    </body>

window.onload = rotate;

var theAD = 0;
var adImage = new Array("images/dog1.jpg","images/dog2.jpg","images/dog3.jpg","images/dog4.jpg",)

function rotate(){
    theAD++;
    if(theAD == adImage.length){
        theAD=0;
    }
    document.getElementById("dog").src = adImage[theAD];
    setTimeout(rotate,1000);//告诉脚本每隔多少时间执行一次，单位为毫秒
}

在循环广告中添加链接

<a href="dog1.html"><img src="images/dog1.JPG" id="dog" alt="dog"></a>

window.onload = initDogLink;

var theAD = 0;
var adURL = new Array("dog1.html","dog2.html","dog3.html","dog4.html");
var adImage = new Array("images/dog1.jpg","images/dog2.jpg","images/dog3.jpg","images/dog4.jpg");
//adURL必须与adImage的数组数量相同
function initDogLink(){
    if(document.getElementById("dog").parentNode.tagName == "A"){
        document.getElementById("dog").parentNode.onclick = newLocation;
    }
    rotate();
}
function newLocation(){
    document.location.href = "http://www." + adURL[theAD];
    return false;
}
function rotate(){
    theAD++;
    if(theAD == adImage.length){
        theAD=0;
    }
    document.getElementById("dog").src = adImage[theAD];
    setTimeout(rotate,1000);
}

建立循环式幻灯片

每次显示一个图像，让用户可以控制显示图像的进度

<a href="dog1.html"><img src="images/dog1.JPG" id="dog" alt="dog"></a>
<h3><a href="previous.html" id="prevLink">&lt;&lt;previous</a>&nbsp;&nbsp;<a href="next.html" id="nextLink">next&gt;&gt;</a></h3>

window.onload = initDogLink;

var thePic = 0;
var adImage = new Array("images/dog1.jpg","images/dog2.jpg","images/dog3.jpg","images/dog4.jpg");

function initDogLink(){
    document.getElementById("prevLink").onclick = processPrevious;
    document.getElementById("nextLink").onclick = processNext;
}
function processPrevious(){
    if(thePic == 0){//此时显示的图片是adImage[0],thePic为0
        thePic = adImage.length;
    }
    thePic--;
    document.getElementById("dog").src = adImage[thePic];
    return false;
}
function processNext(){
    thePic++;
    if(thePic == adImage.length){
        thePic = 0;
    }
    document.getElementById("dog").src = adImage[thePic];
    return false;
}

显示随机图像

<img src="images/dog1.JPG" id="dog" alt="dog">

window.onload = choosePic;
var Pic = new Array("images/dog1.jpg","images/dog2.jpg","images/dog3.jpg","images/dog4.jpg");
function choosePic(){
    var randomNum = Math.floor(Math.random()*Pic.length);
    document.getElementById("dog").src = Pic[randomNum];
}

随机开始循环显示图像

<img src="images/dog1.JPG" id="dog" alt="dog">

window.onload = choosePic;
var randomNum = 0;
var Pic = new Array("images/dog1.jpg","images/dog2.jpg","images/dog3.jpg","images/dog4.jpg");
function choosePic(){
    var randomNum = Math.floor(Math.random()*Pic.length);
    document.getElementById("dog").src = Pic[randomNum];
    rotate();
}
function rotate(){
    randomNum++;
    if(randomNum == Pic.length){
        randomNum=0;
    }
    document.getElementById("dog").src = Pic[randomNum];
    setTimeout(rotate,1000);
}

“学习太痛苦了”

打八阿哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习日记5-处理图像2

创建循环的广告条 <head> <script src="js.js"></script> <style> img{ width: 200px; height: 200px; } </style> </head> <body>
复制链接

扫一扫

专栏目录