javascript - 加速 javascript 画廊

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭10 年前。

Improve this question

我有一个简单的 javascript 画廊，当我有超过 3 或 4 个图像时，它的执行速度很慢。不要混淆，我并不是说它会慢慢地进入下一个图像，我的意思是当进入下一个图像时它是锯齿状的并且不平滑。有没有办法让代码更加优化，更加流畅呢？或者也许 JavaScript 中有更好的更快的函数？我不知道要寻找什么，因为我最近才开始研究 javascript。

我已经将所有图片压缩到每张不到300kb。代码如下，包括 javascript 和 html

//javascript
<script>
function slideSwitch() {
    var r = Math.floor(Math.random() * 41) - 25;

    var active = $("div#slideshow img.active");
    active.siblings().css({'z-index': 97});
    active.next().css({
        'z-index': 98,
        '-moz-transform': 'rotate(0deg)',
        '-webkit-transform': 'rotate(0deg)',
        'transform': 'rotate(0deg)'
    });
    active.css({ 'z-index': 99 });
    if(active.hasClass('last')){
        active.siblings(":first").css({ 'z-index': 98,
        '-moz-transform': 'rotate(0deg)',
        '-webkit-transform': 'rotate(0deg)',
        'transform': 'rotate(0deg)' });
    }


    active.animate({ "left": (350+600) }, 250).css({
        '-moz-transform': 'rotate(' + r + 'deg)',
        '-webkit-transform': 'rotate(' + r + 'deg)',
        'transform': 'rotate(' + r + 'deg)'
    });

    setTimeout(function () {
        active.css({ 'z-index': 97 });
        active.removeClass('active');
        if (active.hasClass("last")) {
            active.siblings(":first").addClass('active');
        } else {
            active.next().addClass('active');
        }
        active.animate({ "left": 350 }, 150);
    }, 250);
}

$(function () {
    setInterval("slideSwitch()", 1000);
});

<!--HTML-->
<div id="slideshow">
    <img src="picture/img1.jpg" style="position:absolute;" class="active" />
    <img src="picture/img2.jpg" style="position:absolute;" />
    <img src="picture/img3.jpg" style="position:absolute;" />
    <img src="picture/img4.jpg" style="position:absolute;" />
    <img src="picture/img5.jpg" style="position:absolute;" />
    <img src="picture/img6.jpg" style="position:absolute;" />
    <img src="picture/img7.jpg" style="position:absolute;" />
    <img src="picture/img8.jpg" style="position:absolute;" />
    <img src="picture/img9.jpg" style="position:absolute;" />
    <img src="picture/img10.jpg" style="position:absolute;" />
    <img src="picture/img11.jpg" style="position:absolute;" />
    <img src="picture/img12.jpg" style="position:absolute;" class="last"/>
</div>

谢谢大家。

Answer 1

@两个人都要求我的选择器(在问题评论中):请注意，jquery 选择器引擎(sizzle)从右到左读取选择器。因此，在原始选择器 ("div#slideshow img.active") 中，它将查找所有具有 .active 类的元素，然后继续处理这些 >img 标签。然后继续寻找 id，它必须是一个 div。看看这个 jsperf 查看选择 div.foobar 与选择 .foobar 的性能差异。
我提供的选择器首先获取 id，这是在 jquery 中选择 DOM 元素的最快方法。然后它查找 id 的子元素，其中具有 .active 类。请注意，选择器为 $('.foobar', '#id') ，不是 $('.foobar, #id')看到不同。 jquery documentation 中有一些关于此的信息。 。