获取随机图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
  *{
    padding: 0;
    margin: 0;
  }
  .imgbox img{
    margin-left: 10px;
    margin-top: 10px;
    width: 200px;
    height: 100px;
  }
</head>
</style>
<script src="jquery-2.1.0.js"></script>
<body>

  <div class="imgbox">
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
  </div>

<script>
//随机取图片
function randomErronImage(imgs){
  /*参数imgs代表你要显示的图片标签*/
  /*随机出图路径写成n 顺序出图路径写成index*/
  var index=0;
  for (var i = 0; i < imgs.length; i++) {
    var n=Math.floor(Math.random()*5);
    index++;
    if(index>4){
      index=0
    }
  $(imgs).eq(i).attr("src","img/"+index+".jpg"); //图片赋值
  //$(imgs).eq(i).attr("onerror","this.src='img/"+index+".jpg'") //在图片加载不出来的时候 显示默认图片
  }
}
randomErronImage($(".imgbox img"))

</script>
</body>
</html

posted @ 2018-09-07 17:34  冷落清秋  阅读(831)  评论(0编辑  收藏  举报