プログレスバーの円の周りの画像

Question

進捗バーの円を追加しました。プログレスバーの周りにイメージを追加する必要がありますが、正しく行うことはできません。画像の背景を追加しましたが、リストのために作成する必要があるため、良い解決策ではありません。 プログレスバーの周りに正しく画像を追加するにはどうすればよいですか？

私はこのコードをした（イムはこのようにしよう）。これは一例です

をこのhttp://www.jqueryscript.net/loading/Dynamic-Circular-Progress-Bar-with-jQuery-CSS3.html

を使用しています：

.progress-bar div span { 
    position: absolute; 
    color:transparent; 
    line-height: 175px; 
    height: 175px; 
    width: 175px; 
    left: 12.5px; 
    top: 12.5px; 
    text-align: center; 
    border-radius: 50%; 
background:url(user.png)no-repeat; 
} 

Answer 1

あなたが行うことができますこれはjqueryで

まず、配列を含む変数を作成しますが、必要に応じて名前を付けることができます。

var images = [ 
'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg', 
'https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg', 
'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg' 

は、その後、あなたがimages変数から取ることを各.progress-bar div spanのために、あなたの写真へのURLでCSS要素background-imageを追加することを言います。

var i=0 
$('.progress-bar div span').each(function() { 
    $(this).css('background-image', 'url('+images[i]+')'); 
    i = (i + 1) % images.length; 
}); 

お手数ですが教えてください。

EDIT

次の例では、あなたにそれがどのように動作するかについての一般的なアイデアを与えるだろう。

var images = [ 
 
    'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg', 
 
    'https://www.nycgo.com/images/uploads/homepage/Empire-State-Building-Observatory-Tom-Perry-2618.jpg', 
 
    'https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg' 
 
]; 
 

 
var i = 0; 
 
$('.progress-bar div span').each(function() { 
 
    $(this).css('background-image', 'url(' + images[i] + ')'); 
 
    i = (i + 1) % images.length; 
 
})

.progress-bar div span { 
 
    background-size: cover; 
 
    display: block; 
 
    width: 500px; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="progress-bar"> 
 
    <div> 
 
     <span> Testing </span> 
 
    </div> 
 
    </div> 
 
    <div class="progress-bar"> 
 
    <div> 
 
     <span> Testing </span> 
 
    </div> 
 
    </div> 
 
    <div class="progress-bar"> 
 
    <div> 
 
     <span> Testing </span> 
 
    </div> 
 
    </div> 
 
</div>

EDIT 2：

これは円を有する他の例である：

https://codepen.io/anon/pen/qXLozZ

Answer 2

最後に、私は解決策を見つけた イムを使用

https://github.com/kottenator/jquery-circle-progress

イムは、この<span class="schoolclass-pro-bar-img"></span>を使用してイムは<span>タグ

<div ID="circle1"> 
<span class="schoolclass-pro-bar-img"></span> 
</div>