破解/重写Javascript

Hacking/Overriding Javascript

本文关键字:Javascript 重写 破解      更新时间:2023-09-26

我只熟悉HTML和CSS,我每天都在使用它们。!ImportantCSS覆盖是我必须做的事情,以便为使用第三方CRM系统的客户定制网站,但现在我被要求看看我是否可以覆盖Javascript图像滑块的功能;也就是说,如果我可以强制它让图像向外旋转,而不是在页面刷新时只显示一个随机变为其他图像的单个图像。我对Javascript不够熟悉,不知道如何做到这一点;我已经多次使用这种相同的图像滑块,所以我知道需要更改什么设置,但我不知道如何像使用CSS那样强制覆盖,或者是否可以在同一页面上添加另一个。

这是网页上已经有的javascript代码片段。

<script type="text/javascript">
  $(document).ready(function () {
    var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
    $('#carousel').slick({
      infinite: true,
      autoplay: false,
      autoplaySpeed: 10000,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true
    }).slickGoTo(randSlick);
  });
</script>

我需要将"自动播放"更改为true,这样它就会自动播放,而不是什么都不做,我想将"自动显示速度"更改为更合理的值,比如3000。

我无法访问这部分代码(因此,我总是要做CSS!重要的重写;我不能直接编辑现有的代码,我必须以一种狡猾的方式添加我自己的代码),所以我希望有一种简单的方法来做到这一点如果这太冗长或令人困惑,我深表歉意;我已经很容易地自学了HTML和CSS,但事实证明Javascript完全是另一种动物,我只是在这一点上挣扎。

为了避免显而易见的问题:

  1. 您将无法使用HTML/CSS修改JavaScript代码,只能通过JavaScript进行修改
  2. 您在脚本中看到的是JQuery,一个JavaScript扩展库:请参阅:JQuery API

我建议您制作自己的脚本,通过unslick函数重置$("#carousel")的值,这里有明确的说明:请参阅:SlickJS

$("#carousel").slick('unslick');

之后,您可以立即将$("#carousel")与自己的参数绑定,如:

<script type="text/javascript">
  $(document).ready(function () {
    var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
    $('#carousel').slick({
      infinite: true,
      autoplay: true,
      autoplaySpeed: 3000,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true
    }).slickGoTo(randSlick);
  });
</script>

确保您的JavaScript文件在SlickJS导入后被调用。

有什么问题吗?在下面的评论中询问:-)

在您的页面中,您可以解构现有的slick对象,并使用自己的设置重新创建它。

<script type="text/javascript">
  $(document).ready(function () {
     $('#carousel').slick('unslick'); // Destroy existing slick object
    // Start a new one with the options you want
    $('#carousel').slick({
      autoplay: true,
      autoplaySpeed: 3000
    });
  });
</script>