Question

我写了一个滑块，但它是静态的。当我添加新图像时，我必须手动操作代码。

如何更灵活地编写此脚本？

这是我的完整项目 - ＆gt; codepen.io/FreeMaNn/pen/ZagweX

我的脚本是这样的：

＆＃13;

$("#slider-s-pic .slider-button-1").mouseenter(function () {
            $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 0) + "px" });
        });

        $("#slider-s-pic .slider-button-2").mouseenter(function () {
            $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 1) + "px" });
        });

        $("#slider-s-pic .slider-button-3").mouseenter(function () {
            $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 2) + "px" }); 
        });

        $("#slider-s-pic .slider-button-4").mouseenter(function () {
            $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 3) + "px" });
        });

        $("#slider-s-pic .slider-button-5").mouseenter(function () {
            $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 4) + "px" });
        });

＆＃13;

Answer 1

目前，您正在为每个单独的元素执行相同的操作，为了巩固这一点，您只需使用它即可。

不是专门针对按钮，而是以父对象为目标，然后使用jQuerys .find（）方法相对于实际元素定位slider-inner元素。这意味着您不必为每个按钮编写函数

$("#slider-s-pic).mouseenter(function () {
        $(this).find(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 1) + "px" });
    });

Answer 2

感谢@ Mohamed-Yousef提供此解决方案

$("#slider-s-pic a[class^='slider-button-']").mouseenter(function () {
    var GetIndex = $(this).closest('li').index();
    $(".slider-inner ul").animate({ 
       marginLeft: "-" + (liWidth * GetIndex) + "px" 
     }); });

a[class^='slider-button-'] - 选择以slider button-

开头的所有课程

^ - 以*开头 - 包含$ - 以

结尾

var GetIndex = $(this).closest('li').index(); - 获取li索引..不要使用$(this).index()它每次都会返回0 ..所以你需要使用{{1} }

使用Jquery制作灵活的滑块

2 个答案: