在我的网站滑块上显示随机照片

-1

我在我的网站上有滑块，我想在里面显示随机照片。我的HTML代码如下：在我的网站滑块上显示随机照片

<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
    <div class="phone" style="display:none;"> 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"> 
     <img src="<?= $basePath ?>images/iphone7_sl.png" 
      style="width:130px; height:250px; margin-left:auto; 
        margin-right:auto;" alt=""> 
    </a> 
    <div class="caption"> 
     <a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb"> 
      iPhone <strong>7</strong> 
     </a> 
    </div> 
    </div> 
</li>

我有大约20列表项和我的jQuery脚本是：

$(document).ready(function() { 
    display = 6; 
    var divs = $('.phone').get().sort(function(){ 
    return Math.round(Math.random())-0.5; 
    }).slice(0,6); 
    $(divs).show(); 
});

但是这个脚本不起作用。哪里有问题？

来源

2017-10-18 J.Doe

*隐而不宣”工作*？ – Liam

你可以简单地重新安排自己的元素在for循环：

for (var i = 0; i < $('.phone').length; i++) { 
    j = Math.floor(Math.random() * $('.phone').length); 
    $('.phone').eq(i).before($('.phone').eq(j)); 
}

来源

2017-10-18 08:47:05 Zenoo

您的脚本不工作，你可以在这个片段中看到

$(document).ready(function() { 
 
    display = 6; 
 
    var divs = $('.phone').get().sort(function(){ 
 
    return Math.round(Math.random())-0.5; 
 
    }).slice(0,6); 
 
    $(divs).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li>

来源

2017-10-18 08:48:36 DreamWave

它的作品，但当我使用这段代码，在我的滑块是空的地方。它显示6张reandom照片，但里面有空的地方。如何避免这种情况？ –

这是另一个问题和另一个问题。但是，您在李的内部隐藏/显示div。滑块显示李的 - 如果你删除它的内容，它仍然存在。您需要删除（）li并重置滑块，以便仅计算剩余元素的所需内容。 – DreamWave

在我的网站滑块上显示随机照片

回答

相关问题