Animasi CSS di dalam div radius batas

Saya mencoba menganimasikan gambar di dalam radius batas div lainnya. Saya telah menemukan skrip di sini yang memutar gambar secara otomatis tetapi saya ingin gambar ditempatkan di dalam radius batas misalnya seperti tangkapan layar ini - http://i.imgur.com/fsLlTku.jpg

Ini semua kode saya

http://jsfiddle.net/isherwood/8wkaT

HTML:

<div class="foodimg">
    <img src="http://i.imgur.com/litX96U.jpg" class="foodround" />
    <img src="http://i.imgur.com/Z3Rcoad.jpg" class="foodround" />
    <img src="http://i.imgur.com/WtVOxWa.jpg" class="foodround" />
    <img src="http://i.imgur.com/idv5HXP.jpg" class="foodround" />
</div>

CSS:

.foodimg {
    border-radius: 200px;
    width: 320px;
    height: 320px;
    position: absolute;
    left: 100px;
}

JS:

var $imgs = $(".foodimg").find("img"),
    i = 0;

function changeImage() {
    var next = (++i % $imgs.length);
    $($imgs.get(next - 1)).fadeOut(500);
    $($imgs.get(next)).fadeIn(500);
}

var interval = setInterval(changeImage, 5000);

Tolong bantu.


jquery css css-animations
person user3152357    schedule 12.01.2014    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward 

.foodimg {
    ...
    overflow: hidden;
}
.foodimg img {
    max-height: 320px;
}

http://jsfiddle.net/isherwood/8wkaT/3

person isherwood    schedule 12.01.2014