ภาพเคลื่อนไหว CSS ภายใน div รัศมีเส้นขอบ

ฉันกำลังพยายามทำให้รูปภาพเคลื่อนไหวภายในรัศมีเส้นขอบ div อื่น ฉันพบสคริปต์ที่นี่ซึ่งหมุนภาพอัตโนมัติ แต่ฉันต้องการให้ภาพวางอยู่ภายในรัศมีเส้นขอบเช่นภาพหน้าจอนี้ - http://i.imgur.com/fsLlTku.jpg

นี่คือรหัสทั้งหมดของฉัน

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>

ซีเอสเอส:

.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);

กรุณาช่วย.


jquery css css-animations
person user3152357    schedule 12.01.2014    source แหล่งที่มา

คำตอบ (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