边框半径div内的CSS动画

Question

我正在尝试为另一个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> 

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

请帮助。

Answer 1

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

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