幻灯片使用Jquery,图像不适合窗口
Slideshow using Jquery, images do not fit window
我正在尝试使用 jquery 制作幻灯片,我是这段代码的新手,只熟悉 css 和 html(虽然我不确定如何在 css 中定位东西)。我想创建我的幻灯片并遵循此模板,但是我不知道如何更改它的各个方面,我尝试弄乱它,但没有运气。我的图像比创建的滑动窗口大得多,我想将图像适合窗口,因为现在只显示图像的一部分,看起来不是很好。
所以我想知道如何将完整的图像放入该幻灯片窗口(而不是部分)
这是我作为 html 的内容:
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="Images/DSC_0419 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_1019 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_2975.JPG" />
</div>
</div>
</div>
我的 CSS:
#slideshow #slideshowWindow {
width:1000px;
height:700px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:1000px;
height:700px;
float:left;
position:relative;
}
这是我的 Jquery 脚本:
<script type="text/javascript">
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 1000;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
</script>
试试...
#slideshow #slideshowWindow .slide img {
height: 100%;
width: 100%;
}
实际上,上面的CSS将拉伸图像...如果它们的大小成比例,这工作得很好......
但是,如果您可能要处理一些纵向图像和某些横向图像,请尝试仅设置高度或仅设置宽度;然后,在需要时将调整添加到中心。
相关文章:
- 背景图像顶部的滚动图像不移动
- javascript如果图像不存在don't加载它
- ResolveUrl没有'我似乎不适合当链接到具有动态虚拟目录的外部javascript文件时
- ajax加载()后,包含图表的图像不会重新绘制
- 如果图像标记是用javascript编写的,并且需要用户输入,那么图像不会随页面加载吗
- 导航菜单不适合移动浏览器
- 编辑图像字段javascript验证空白图像不插入
- 当我在操作属性中写入页面名称时,文件图像不会上传
- 本地存储功能中的图像不起作用
- 如何解决不适合的分页输出
- css:拖动图像不'不适用于Firefox
- Javascript返回内容/字符串;不适合UIWebView的给定宽度和高度
- 使用javascript中的if和else语句来显示图像(如果图像不存在,则显示其他图像)
- javascript with()函数获胜'我不适合歌剧、Chrome或Brave
- HTML 画布:缩放图像以适合而不拉伸
- 幻灯片使用Jquery,图像不适合窗口
- Juicyslider 中的第一个图像不适合宽度页面
- 我的网站背景滑块图像不适合移动设备
- 在两个图像之间切换不适合我
- CSS - max-height不适合打印图像