1

我正在尝试使用 Javascript 为已经在使用 PHP 加载页面时随机选择的图像设置时间间隔。显然我无法使用 PHP 设置时间间隔。因此，图像是使用 PHP 随机选取的，但是一旦随机选取并加载页面，我希望 Javascript 接管并以 20 秒的时间间隔生成一个新的随机选取的图像。

我可能会放弃整个 PHP 想法并完全使用 Javascript，但我现在很想看看我是否可以让它工作。

下面是我的PHP代码：

    <?php

 $img_rand = array(
  1 => array(
     'url' => 'www.tautic.com/', 
    'img' => '1.jpg', 
    'wth' => '472',        
    'hgt' => '100',      
  'ttl' => 'Tautic',    
    'alt' => 'Tautic'  
   ),                              
   2 => array(
     'url' => 'www.designspark.com/', 
    'img' => '2.jpg', 
    'wth' => '472',        
    'hgt' => '100',        
  'ttl' => 'Design Spark',    
    'alt' => 'Design Spark'  
  ),
  3 => array(
     'url' => 'www.involutionstudios.net/',
    'img' => '3.jpg',
    'wth' => '472',        
    'hgt' => '100',        
  'ttl' => 'Involution Studios - Web Design',   
    'alt' => 'Involution Studios - Web Design'  
   ),
    4 => array(
     'url' => 'www.explorestem.co.uk/', 
    'img' => '4.jpg', 
    'wth' => '472',     
    'hgt' => '100',        
  'ttl' => 'Explore Stem',    
    'alt' => 'Explore Stem' 

   ),
   ); 

   $img = array_rand($img_rand); 
   echo('      
   <div class="random-img">    
   <a href="http://'.$img_rand[$img]['url'].'" title="'.$img_rand[$img]['ttl'].'"                  
   target="_blank">
    <img src="sponsorimg/'.$img_rand[$img]['img'].'" width="'.$img_rand[$img]['wth'].'"          
   height="'.$img_rand[$img]['hgt'].'" alt="'.$img_rand[$img]['alt'].'" /> 
  </a>
  </div>
  ');

   ?>

提前致谢。

4

3 回答 3

1

在 PHP 中使用数组的问题是只有 PHP 可以访问它，即 JavaScript 不知道要加载什么 url。因此，如果您打算保留 php，请使用下面的选项 1，否则废弃 php 并使用选项 2：

选项1

您必须在主视图上使用 ajax，并保持 php 分开。在 php 页面上，不输出图像，而是将图像信息输出为 JSON 对象，例如

$img = array_rand($img_rand);
header('Content-type: application/json');
echo json_encode($img);

然后在显示所有内容的页面上，使用 javascript（我使用 jQuery，因为它使 ajax 更容易）加载图像：

<div class="random-img"></div>
<script type="text/javascript>
imgLoop = function() {
    $.get('randomimage.php', function(img) {
        var el = '<a href="http://'+img.url+'" title="'+img.ttl+'" target="_blank">';
        el += '<img src="sponsorimg/'+img.img+'" width="'+img.wth+'" height="'+img.hgt+'" alt="'+img.alt+'" /></a>';
        $('.random-img').empty().append(el);
    });
};
setInterval(imgLoop, 20000);
</script>

选项2（更好的imo）

除非您试图阻止您的用户在尝试查看您的源代码时看到图像数组，否则选项 1 中完全不需要 ajax/php。您可以完全废弃 php，只需将图像存储为对象数组，例如

images = [
    {
        'url': 'www.tautic.com/', 
        'img': '1.jpg', 
        'wth': '472',        
        'hgt': '100',      
        'ttl': 'Tautic',    
        'alt': 'Tautic'
    },
    {
        'url': 'www.designspark.com/', 
        'img': '2.jpg', 
        'wth':'472',        
        'hgt':'100',        
        'ttl':'Design Spark',    
        'alt':'Design Spark'
    }
    //And so on..
];

然后对于间隔，只需使用：

<div class="random-img"></div>
<script type="text/javascript>
imgLoop = function() {
    var img = images[Math.floor(Math.random() * images.length)];
    var el = '<a href="http://'+img.url+'" title="'+img.ttl+'" target="_blank">';
    el += '<img src="sponsorimg/'+img.img+'" width="'+img.wth+'" height="'+img.hgt+'" alt="'+img.alt+'" /></a>';
    $('.random-img').empty().append(el);
};
setInterval(imgLoop, 20000);
</script>

让我知道这是否有意义或者您有任何问题:)

于 2013-08-07T11:06:21.283 回答
0

如果您想要一个完整的 javascript 解决方案，那么您必须将数组保留在客户端上。

将 HTML / PHP 文件中的动态字段保留为空白并从 javascript 加载它们。

<div class="random-img">
    <a target='_blank' title='' href='' >
        <img id='imageToLoad' src='' height='' width='' alt='' />
    </a>
</div>

我已经为事件绑定添加了 JQuery，但如果需要，可以将其更改为纯 javascript。

这里监控图像的加载事件。加载或错误事件超时 20 秒后加载下一个随机图像。使用setTimeout具有优势，setInterval因为只有在加载前一个图像后才会调用超时。

loadImage函数被显式调用一次以第一次加载图像。

$(document).ready(function () {
    $('#imageToLoad').on('load', function(e){
       var imageElem = this;
        setTimeout(function(){
            loadImage(imageElem);
        }, 20 * 1000);
    }).on('error',function(e){
       var imageElem = this;
        setTimeout(function(){
            loadImage(imageElem);
        }, 20 * 1000);
    });

    function loadImage(imageElem){
        imageElem = imageElem || $('#imageToLoad').get(0);
        var rndImage = imageArr[Math.floor(Math.random() * imageArr.length)];
        imageElem.src = rndImage.img;
        imageElem.height = rndImage.hgt;
        imageElem.width = rndImage.wth;
        imageElem.alt = rndImage.alt;
        imageElem.parentNode.href = rndImage.url;
        imageElem.parentNode.title = rndImage.ttl;
    }

    var imageArr = [{
        'url' : 'www.tautic.com/', 
        'img' : '1.jpg', 
        'wth' : '472',        
        'hgt' : '100',      
        'ttl' : 'Tautic',    
        'alt' : 'Tautic'
    },{
        'url' : 'www.designspark.com/', 
        'img' : '2.jpg', 
        'wth' : '472',        
        'hgt' : '100',        
        'ttl' : 'Design Spark',    
        'alt' : 'Design Spark'
    },{
        'url' : 'www.involutionstudios.net/',
        'img' : '3.jpg',
        'wth' : '472',        
        'hgt' : '100',        
        'ttl' : 'Involution Studios - Web Design',   
        'alt' : 'Involution Studios - Web Design'
    },{
        'url' : 'www.explorestem.co.uk/', 
        'img' : '4.jpg', 
        'wth' : '472',     
        'hgt' : '100',        
        'ttl' : 'Explore Stem',    
        'alt' : 'Explore Stem'
    }];

    loadImage();
});

工作示例

于 2013-08-07T12:21:20.113 回答
0

好的，我尝试了各种方法，但似乎无法让它无缝工作。我现在可以使用它，但是对于我实际需要的东西，我期望它完全是矫枉过正。

因此，以下代码使用 PHP 在页面加载时选择一个随机图像，然后使用 jQuery/Javascript/CSS 以 5s 间隔随机显示另一个图像，并且所有图像都可以链接等。

PHP -

<?php

$img_rand = array(
   1 => array(
         'url' => 'www.tautic.com/', 
        'img' => '1.jpg', 
        'wth' => '472',        
        'hgt' => '100',      
      'ttl' => 'Tautic',    
        'alt' => 'Tautic'  
),                              
   2 => array(
         'url' => 'www.designspark.com/', 
        'img' => '2.jpg', 
        'wth' => '472',        
        'hgt' => '100',        
      'ttl' => 'Design Spark',    
        'alt' => 'Design Spark'  
),
   3 => array(
         'url' => 'www.involutionstudios.net/',
        'img' => '3.jpg',
        'wth' => '472',        
        'hgt' => '100',        
      'ttl' => 'Involution Studios - Web Design',   
        'alt' => 'Involution Studios - Web Design'  
),
   4 => array(
         'url' => 'www.explorestem.co.uk/', 
        'img' => '4.jpg', 
        'wth' => '472',     
        'hgt' => '100',        
      'ttl' => 'Explore Stem',    
        'alt' => 'Explore Stem' 

),
); 

$img = array_rand($img_rand); 
echo('

   <a href="http://'.$img_rand[$img]['url'].'" title="'.$img_rand[$img]['ttl'].'" target="_blank">
    <img src="sponsorimg/'.$img_rand[$img]['img'].'" width="'.$img_rand[$img]['wth'].'" height="'.$img_rand[$img]['hgt'].'" alt="'.$img_rand[$img]['alt'].'" /> 
   </a>

');

?>

Javascript

<script type="text/javascript">



function slideSwitch() {
    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');


     var $sibs  = $active.siblings();
     var rndNum = Math.floor(Math.random() * $sibs.length );
     var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

HTML

<div class="random-img">
<div id="slideshow"> 



    <div class="active">
    <?php require($INC_DIR. "rah.php");?>
    </div>
    <div>
   <a href="http://www.tautic.com/" title="Tautic" target="_blank">
    <img src="sponsorimg/1.jpg" width="472" height="100" alt="Tautic" /> 
   </a>

    </div>
    <div>
   <a href="http://www.designspark.com/" title="Design Spark" target="_blank">
    <img src="sponsorimg/2.jpg" width="472" height="100" alt="Design Spark" /> 
   </a>
    </div>
    <div>
      <a href="http://www.involutionstudios.net/" title="Involution Studios - Web Design" target="_blank">
    <img src="sponsorimg/3.jpg" width="472" height="100" alt="Involution Studios - Web Design" /> 
   </a>

    </div>
    <div>
    <a href="http://www.explorestem.co.uk/" title="Explore Stem" target="_blank">
    <img src="sponsorimg/4.jpg" width="472" height="100" alt="Explore Stem" /> 
   </a>

    </div>

</div>
</div>

最后是 CSS

.random-img 
{
position: fixed ;
bottom:15px;
z-index:20;
width:470px;
height:100px;
right:2%;
overflow:hidden;
border:5px solid white;
border-radius:10px;


}


#slideshow {
    position:relative;
    height:350px;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow DIV.active {
    z-index:30;
}

#slideshow DIV.last-active {
    z-index:25;
}

如果有人有更好的方法在页面加载时显示带有唯一链接的随机图像并以特定时间间隔更改为随机图像，请告诉我:) 我很乐意将其最小化。

谢谢

于 2013-08-07T23:02:53.787 回答