CSS使100%宽度幻灯片中的中间图像始终位于中间
我正在尝试制作一个像这样的幻灯片 其中宽度为100%,并保持向左或向右无限滚动,但无论浏览器分辨率如何,图像始终位于中心。这就是我目前得到的 幻灯片图像的宽度为800px,最左边的图像的左边距为-25%。。。哪一种看起来像是1280px的屏幕大小。。。。但是当我调整窗口大小时,它看起来不像我想象的那样 这是我使用的幻灯片代码CSS使100%宽度幻灯片中的中间图像始终位于中间,css,slideshow,Css,Slideshow,我正在尝试制作一个像这样的幻灯片 其中宽度为100%,并保持向左或向右无限滚动,但无论浏览器分辨率如何,图像始终位于中心。这就是我目前得到的 幻灯片图像的宽度为800px,最左边的图像的左边距为-25%。。。哪一种看起来像是1280px的屏幕大小。。。。但是当我调整窗口大小时,它看起来不像我想象的那样 这是我使用的幻灯片代码 $(document).ready(function() { //move he last list item before the first item. T
$(document).ready(function() {
//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
//when user clicks the image for sliding right
$('#right_scroll img').click(function(){
//get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
var item_width = $('#carousel_ul li').outerWidth() + 10;
//calculae the new left indent of the unordered list
var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
//make the sliding effect using jquery's anumate function '
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
//get the first list item and put it after the last list item (that's how the infinite effects is made) '
$('#carousel_ul li:last').after($('#carousel_ul li:first'));
//and get the left indent to the default -210px
$('#carousel_ul').css({'left' : '-210px'});
});
});
//when user clicks the image for sliding left
$('#left_scroll img').click(function(){
var item_width = $('#carousel_ul li').outerWidth() + 10;
/* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
$('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){
/* when sliding to left we are moving the last item before the first list item */
$('#carousel_ul li:first').before($('#carousel_ul li:last'));
/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
$('#carousel_ul').css({'left' : '-210px'});
});
});});
有什么想法吗?谢谢你可以把这个CSS放在旋转木马上
left: 50%;
margin-left: -1200px;
只要确保它从左到右。唯一的问题是,如果有人的显示器宽度可能超过2000px,当幻灯片第一次开始时,他们会在左边有一点没有图像,但我认为很少有人会这样做。谢谢,很接近,但当你第一次单击左键或右键时,不会出现这种奇怪的小跳跃。。。在这之后,它似乎工作得很好。您还需要从js中删除左边的:-210px,这整行::$('carousel_ul').css({'left':'-210px'});似乎已经停止加载新的div,现在我删除了它。。。我还尝试将-210替换为%50,使其与css匹配。不,卢卡尔,你确定没有缓存吗?那没有任何意义。你能删除这行代码,让我知道,这样我就可以看一看了吗?是的,当然,我只是在搞乱一些东西,但是现在看看,我只是在没有那行代码的情况下更新了它