我在使用 SlidesJS。图片轮播在桌面端运行良好,但我现在想为移动设备加载不同的图片集。我查看了 SlidesJS 论坛和官网,但没有找到任何提示,我还看了 SO 上的各种问题,但都无效。因为 SlidesJS 提供了默认代码如下:
Javascript
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#gallery-slides').slidesjs({
width: 800,
height: 450,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
HTML
<div id="gallery-slides">
<img src="images/nearby_page_concept.jpg" >
<img src="images/location_gif2-min.gif" >
<img src="images/smart_search_page.jpg" >
<img src="images/privacy_control_concept.jpg" >
<img src="images/messaging_page_concept.jpg" >
<img src="images/user_search_page_concept.jpg" >
</div>
CSS
#gallery-slides {
display: none
}
#gallery-slides .slidesjs-navigation {
margin-top:5px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image: url(../images/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(../images/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#gallery-slides a:link,
#gallery-slides a:visited {
color: #333
}
#gallery-slides a:hover,
#gallery-slides a:active {
color: #9e2020
}
.gallery-navbar {
overflow: hidden
}
#gallery-slides {
display: none
}
.containerslides {
margin: 0 auto
}
我尝试了不同的方法来让滑块在移动设备上更换图片,例如
将class名称赋予给<img src="xyz.jpg">
,并使用CSS中的媒体查询声明不同的图像
在HTML中尝试if else语句的使用
如果我能够更改图像,则还需要更改SlidesJS JS部分的默认高度和宽度。
请指导我如何为图像滑块更改不同屏幕尺寸的不同图像。
请注意,当我没有展示它时,我不想加载所有不同分辨率的图像。这会影响网站的性能。