我已经创建了一种图像旋转效果,但想尝试找出如何在它的容器中心。
不确定这是否可能,因为溢出是隐藏的,但任何建议或解决办法将不胜感激。
function slide(){
var first = $('.slider_img').first();
first.animate({opacity: '0', width: '0px'}, function() {
first.appendTo('#slider').css({opacity: '1', width: 'auto'});
});
var slider_timeout = setTimeout(function(){slide()} , 3000);
}
slide();
#slider_container{
position:relative;
width:80%;
height:50px;
background-color:#fff;
box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);
overflow:hidden;
}
#slider{
/* center */
}
#slider img{
display:inline-block;
margin:0px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slider_container">
<div id="slider">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=1">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=2">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=3">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=4">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=5">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=6">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=7">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=8">
<img class="slider_img" src="https://via.placeholder.com/100x50?text=9">
</div>
</div>
