在我的網站滑塊上顯示隨機照片

-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

在我的網站滑塊上顯示隨機照片

回答

相關問題