个人中心
gpt4 book ai didi

javascript - 图像幻灯片和复习

转载 作者：行者123 更新时间：2023-11-29 20:22:10 26 4
gpt4 key购买 nike

我想知道我如何才能拥有一个 JavaScript 图像旋转器/幻灯片，每次它显示每个图像(5 秒)时，它都会从上次显示时刷新。

此外，作为其他但不是必需的，我想知道是否可以在底部(有 12 张图像)有一个图像位置的下拉列表，每个图像都链接到适当的图像并刷新它每 3 分钟一次。

这是我目前所拥有的。我知道它已经过时了，但我无法通过 Google 找到更现代的东西...谢谢!

var interval = 5; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23004/1281263292.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23011/1281263293.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23013/1281263294.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23014/1281263294.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23020/1281263295.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23025/1281263296.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23022/1281263296.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23024/1281263296.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23033/1281263298.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23034/1281263298.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23040/1281263299.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}

最佳答案

这应该可以...在 Firefox 和其他一些软件中测试过。

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="utf-8" />
<title>Camera Slideshow</title>
<style>
#wrapper {
    width:   400px;
    overflow:hidden;
}
#slideshow {
    position:relative;
    width:   10000px;
    -webkit-transition: all linear 500ms;
    -moz-transition:    all linear 500ms;
    -o-transition:      all linear 500ms;
    transition:         all linear 500ms;
}
.slide {
    float:   left;
    padding: 24px;
}
.slide img {
    width:   352px;
}
</style>
</head>
<body id="cams" class="">
    <div id="content" class="">
        <div id="wrapper">
            <div id="slideshow" style="left:0;"></div>
        </div>
        <div id="list">
            <select id="locations"></select>
        </div>
    </div>
<script>
var Images = [
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23004/1281263292.jpg", name: "Kings Way / Sturt St" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg", name: "Punt Rd / Swan St" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23011/1281263293.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23013/1281263294.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23014/1281263294.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23020/1281263295.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23025/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23022/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23024/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23033/1281263298.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23034/1281263298.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23040/1281263299.jpg", name: "WGF / Montague St" }
];
Images.Current = 0;

var App = {
    run: function(){
        var instance = this;

        this.addSlides();

        setInterval(function(){
            instance.refresh();
            instance.rotate();
        }, 5000);

        document.getElementById("locations").onchange = function() {
            var loc = document.getElementById("locations").value;
            if (loc>-1) {
                Images.Current = (loc-1);
                instance.rotate();
            }
        };
    },

    addSlides: function() { //352 x 288
        var limit = Images.length;
        var html  = '';
        var list  = '<option value="-1">Choose a location</option>';

        for (var i=0; i<limit; i++) {
            html += "<div class='slide'>" +
                    "   <img class='img' alt='" + i + "' title='" + Images[i].name + "' src='" + Images[i].src + "' />" +
                    "</div>";
            list += "<option value='" + i + "'>" + Images[i].name + "</option>";
        }
        document.getElementById('slideshow').innerHTML += html;
        document.getElementById('locations').innerHTML += list;
    },

    refresh: function() {
        var img  = document.getElementsByClassName('img')[Images.Current];
        img.src = Images[Images.Current].src + '?' + (new Date()).getTime();
    },

    rotate: function() {
        Images.Current++;
        if (Images.Current == Images.length) { Images.Current = 0; }
        var xpos = (Images.Current==0) ? 0 : Images.Current * -400;
        document.getElementById('slideshow').setAttribute('style', 'left: ' + xpos + 'px;');
    }
};
App.run();
</script>
</body> 
</html>

一些事情...

  1. 我没有填写所有位置名字，但这应该很容易
  2. 图像文件名不重要，你可以使用任何东西，例如: http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg是相同的 http://livetraffic.vicroads.vic.gov.au/images/23008/hello.jpg
  3. 您可以进行许多优化，但出于时间和清晰度的原因，我没有费心去做。

关于javascript - 图像幻灯片和复习，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3434064/

26 4 0
文章推荐： java - Android Studio 中的新 Activity 无法启动
文章推荐： javascript - GWT JSON 跨站请求失败
文章推荐： android - Google Nearby Messages - 取消设备之间的初始链接
文章推荐： javascript - 从 GMail URL 获取唯一的电子邮件标识符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com