我有这样的 html:
<body>
<ul class="slider">
<li class="slide"><img src="img/Slide-01 web.png" alt="Slide 1" /></li>
<li class="slide"><img src="img/Slide-02-web.jpg" alt="Slide 2" /></li>
<li class="slide"><img src="img/Slide-03-web.jpg" alt="Slide 3" /></li>
<li class="slide"><img src="img/Slide-04-web.jpg" alt="Slide 4" /></li>
</ul>
我必须设置一个非常简单的函数，就像这样，但肯定这是错误的:
<script>
$(window).width(function(){
var window = $(this).width();
if(window < 650) {
$(".slide img:nth-child(1)").attr("src","img/Slide-Wella-Landing-Collezioni-2015-Mobile-Web-01.jpg");
$(".slide img:nth-child(2)").attr("src","img/Slide-Wella-Landing-Collezioni-2015-Mobile-Web-02.jpg");
$(".slide img:nth-child(3)").attr("src","img/Slide-Wella-Landing-Collezioni-2015-Mobile-Web-03.jpg");
$(".slide img:nth-child(4)").attr("src","img/Slide-Wella-Landing-Collezioni-2015-Mobile-Web-04.jpg");
}
if(window >= 650) {
$(".slide img:nth-child(1)").attr("src","img/Slide-01 web.png");
$(".slide img:nth-child(2)").attr("src","img/Slide-02-web.png");
$(".slide img:nth-child(3)").attr("src","img/Slide-03-web.png");
$(".slide img:nth-child(4)").attr("src","img/Slide-04-web.png");
}
});
</script>
我该如何解决？
最佳答案
您正在以错误的方式分配您的 nth-child 像这样尝试更改正文的 width 以查看更改。像这样使用 nth-child Fiddle
$(".slide:nth-child(1) img").attr("src","http://placekitten.com/300/305");
$(window).width(function(){
var win = $('body').width();
if(win < 650) {
$(".slide:nth-child(1) img").attr("src","http://placekitten.com/300/305");
$(".slide img:nth-child(2)").attr("src","http://placekitten.com/300/306");
$(".slide img:nth-child(3)").attr("src","http://placekitten.com/300/307");
$(".slide img:nth-child(4)").attr("src","http://placekitten.com/300/308");
}
if(win >= 650) {
$(".slide:nth-child(1) img").attr("src","http://placekitten.com/300/309");
$(".slide img:nth-child(2)").attr("src","http://placekitten.com/300/310");
$(".slide img:nth-child(3)").attr("src","http://placekitten.com/300/311");
$(".slide img:nth-child(4)").attr("src","http://placekitten.com/300/312");
}
});body{
width:600px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<ul class="slider">
<li class="slide"><img src="http://placekitten.com/300/301" alt="Slide 1" /></li>
<li class="slide"><img src="http://placekitten.com/300/302" alt="Slide 2" /></li>
<li class="slide"><img src="http://placekitten.com/300/303" alt="Slide 3" /></li>
<li class="slide"><img src="http://placekitten.com/300/304" alt="Slide 4" /></li>
</ul>
</body>关于javascript - 如何使用比较浏览器窗口大小的功能在 slider 中将图像交换到另一个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27999230/