如何在滑块中使用比较浏览器窗口大小的函数将图像交换到另一个图像

how swap an image to another in a slider with a function that compare the browser window's size?

本文关键字：图像 函数 窗口大小 浏览器 交换 另一个 比较      更新时间：2023-09-26

我有这样的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小提琴

 $(".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>

不能为变量指定宽度window。因为它是一个保留词。尝试使用其他变量名称。

代码的另一个问题是您使用了错误的选择器。 :nth-child可用于选择子元素，而不是第 n 个编号元素。您需要对第二个元素使用 $(".slide img:nth(1)")。

正确示例：

<script>
    $(window).width(function(){
        var windowWidth = $(this).width();
        if(windowWidth < 650) {
            $(".slide img:nth(1)").attr("src","img/Slide-Wella-Landing-Collezioni-2015-Mobile-Web-01.jpg");
            $(".slide img:nth(2)").attr("src","img/Slide-Wella-Landing-Collezioni-2015-Mobile-Web-02.jpg");
            $(".slide img:nth(3)").attr("src","img/Slide-Wella-Landing-Collezioni-2015-Mobile-Web-03.jpg");
            $(".slide img:nth(4)").attr("src","img/Slide-Wella-Landing-Collezioni-2015-Mobile-Web-04.jpg");
        }
        if(windowWidth >= 650) {
            $(".slide img:nth(1)").attr("src","img/Slide-01 web.png");
            $(".slide img:nth(2)").attr("src","img/Slide-02-web.png");
            $(".slide img:nth(3)").attr("src","img/Slide-03-web.png");
            $(".slide img:nth(4)").attr("src","img/Slide-04-web.png");
        }
    });
</script>

演示：jsFiddle

相关文章：