Question

如何从带有JavaScript或jQuery的示例id="myid"中获得随机图像？可能吗？谢谢

<div id="myid" class="myclass">    
  <span class="AvGbtn" style="background-image: url(/uploads/articles/768eec43.jpg); background-size: 100% 100%;" rel="nofollow"></span>
  <span class="AvGbtn" style="background-image: url(/uploads/articles/a79e6b78.jpg); background-size: 100% 100%;" rel="nofollow"></span>  
  <span class="AvGbtn" style="background-image: url(/uploads/articles/27570903.jpg); background-size: 100% 100%;" rel="nofollow"></span>     
</div>

Answer 1

我假设您需要访问多个span的style属性的url值，并希望随机选择其中一个url。

Schema::dropIfExists('users');

$(document).ready(function(){
  var spans = $('#myid span[style]');
  var arr = [];
  spans.each(function(i,d){
    var str = $(d).attr('style');
    var url = str.substring(str.indexOf('url')+4,str.indexOf(";")-1);
    arr.push(url);
  });
  
  var r = Math.floor(Math.random()*arr.length);
  
  console.log(arr[r]);
  
});

Answer 2

您可以通过以下方式进行操作。这将使用jquery选择随机图像。

$(function () {
  var images = [
    'image-01.jpg',
    'image-02.jpg',
    'image-03.jpg'
  ];
  $('.imageClass').css(
    { 
      'background-image': 'url(Styles/Default/Images/ImageLocation/' + 
        images[Math.floor(Math.random() * images.length)] + ')' 
    }
  );
});

Answer 3

var selector=$("#myid > span")
var imageURL=[]
for(var i=0;i<selector.length;i++)
{
var bg=$("#myid > span")[i].style["backgroundImage"];
var startIndex=bg.indexOf("(");
var EndIndex=bg.indexOf(")");
imageURL.push(bg.substring(startIndex+1,EndIndex));
}
var randomURL = imageURL[Math.floor(Math.random() * imageURL.length)];
console.log(randomURL)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myid" class="myclass">    
  <span class="AvGbtn" style="background-image: url(/uploads/articles/768eec43.jpg); background-size: 100% 100%;" rel="nofollow"></span>
  <span class="AvGbtn" style="background-image: url(/uploads/articles/a79e6b78.jpg); background-size: 100% 100%;" rel="nofollow"></span>  
  <span class="AvGbtn" style="background-image: url(/uploads/articles/27570903.jpg); background-size: 100% 100%;" rel="nofollow"></span>     
</div>

Answer 4

好吧，让我们尝试开始使用这种3层衬垫：

// get all elements with images with jQuery
var imgs = $(".AvGbtn");
// get a random number from 1 to 3
var rand = Math.floor(Math.random()*3);
// I put this in console but here you got the URL to random one from images, do as you like
console.log($(imgs[rand]).css('background-image'));

您需要指定其余的信息，一旦我们获得URL后该怎么办（我决定在控制台中编写它）。复习我在上面写的内容并加以使用将是您的最大利益。

以下是一些想法：

使它长X个图像，然后尝试修复逻辑，以便它与X一起使用带有图片的项目。
在div中的其他图片下方显示图片
以这种方式选择的10个URL的显示顺序。
使用URL做某事获得等。

P.S。不要忘了包括jQuery来使它起作用。

P.P.S。如果您愿意，可以使用我用此示例制作的JS小提琴演奏： https://jsfiddle.net/xpvt214o/978128/

Answer 5

这是为您准备的样本小提琴。

https://jsfiddle.net/voqfnzus/7/

JavaScript

var images = [
  "https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg?auto=compress&cs=tinysrgb&h=350", 
  "https://images.pexels.com/photos/207171/pexels-photo-207171.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  "https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
]

function showNextRandomImage() {
  var nextRandomImage = images[Math.floor(Math.random() * images.length)];
  $("#AvGbtn").css("background-image", "url(" + nextRandomImage + ")");
}

$("#btn").click(function() {
  showNextRandomImage();
});

$(document).ready(function() {
  showNextRandomImage();
});

HTML

<div id="myid" class="myclass">
  <span id="AvGbtn" style="" rel="nofollow"></span>
</div>

<button id="btn">
  Change
</button>

CSS

#AvGbtn {
  background-size: 100% 100%;
  display: block;
  margin: 12px;
  width: auto;
  height: 200px;
}

从此div获取随机背景图像

5 个答案: