Question

我想要的三个功能

单击下一步，图像应滑动到下一个
点击上一步，图片应该滑到上一张
在5秒内图像应自动滑动

我从这个地方找到了这个插件具有所有的功能，并且正如我想要的那样正常工作但是如何做图像自动滑动在这里有自动幻灯片的注释代码但是取消注释它不适用于我我不想更改插件，所以plz只在

(function (window) {

        Ladduslider = function () {

            //global vars
            this.curItem = 0;
            this.w = 652;
            this.h = 200;
            this.dur = 1000;
            this.wait = 3000;
            this.tot = 0;
            this.f = '';
            this.anim = false;


            //fadein fadeout functions
            this.init = function (dc, chld, f) {

                this.f = "." + f;

                if (dc === '') return;

                var child = $('.' + chld);
                //("#mc .ff")
                var numofdivs = $('#' + dc + ' .' + chld).length;
                var w = this.w;

                child.each(function (i) {
                    $(this).addClass(f + parseInt(i + 1));

                    //next piece of code for slide only
                    $(this).css({
                        "left": w + "px",
                        "display": "block"
                    });
                    //console.log(w);
                });
                this.tot = numofdivs;

                //display first
                this.curItem = 1;
                //$(".f" + curItem).css("display","block"); //for fade
                $("." + f + this.curItem).css("left", 0); //for slide

                //start anim
                //doWait();
            }

            this.doWait = function () {
                //setTimeout(doFade,wait); //for fadein and out
                setTimeout(this.doSlide, this.wait); //for slide
            }

            this.doFade = function () {
                $(this.f + this.curItem).fadeTo(dur, 0);
                this.curItem++;
                if (this.curItem > this.tot) this.curItem = 1;
                $(this.f + this.curItem).fadeTo(this.dur, 1, function () {
                    this.doWait();
                });
            }

            //slide
            this.doSlide = function () {
                if (this.anim) return;
                this.anim = true;
                $(this.f + this.curItem).animate({
                    left: "-=" + this.w
                }, this.dur);
                this.curItem++;
                if (this.curItem > this.tot) this.curItem = 1;
                $(this.f + this.curItem).css("left", this.w);
                var that = this;
                $(this.f + this.curItem).animate({
                    left: "-=" + this.w
                }, this.dur, function () {
                    //doWait(); //un-comment this for auto slide
                    that.anim = false;
                });
            }

            this.doSlideR = function () {
                if (this.anim) return;
                this.anim = true;
                $(this.f + this.curItem).animate({
                    left: "+=" + this.w
                }, this.dur);
                this.curItem -= 1;
                if (this.curItem < 1) this.curItem = this.tot;
                $(this.f + this.curItem).css("left", -this.w);
                var that = this;
                $(this.f + this.curItem).animate({
                    left: "+=" + this.w
                }, this.dur, function () {
                    //doWait();
                    that.anim = false;
                });
            }
        }

        if (!window.Ladduslider) window.Ladduslider = Ladduslider();
    })(window);


    $(document).ready(function () {
        ls = new Ladduslider();
        ls.init("mc", "ff", "q");
        $(".prev").bind("click", function () {
            ls.doSlideR();
        });
        $(".next").bind("click", function () {
            ls.doSlide();
        });

        ls1 = new Ladduslider();
        ls1.init("mc1", "ff1", "q1");
        $(".prev1").bind("click", function () {
            ls1.doSlideR();
        });
        $(".next1").bind("click", function () {
            ls1.doSlide();
        });

        ls2 = new Ladduslider();
        ls2.init("mc2", "ff2", "q2");
        $(".prev2").bind("click", function () {
            ls2.doSlideR();
        });
        $(".next2").bind("click", function () {
            ls2.doSlide();
        });

    });

这是html代码：我有三个div，但只有一个需要自动幻灯片动画，所以只提供div

<div>
<table cellspacing="0" cellpadding="0" border="0" height="280" width="710" style="margin-left:-22px;">
  <tr><td><div class="prev2"><img src="images/Shape-5-copy12.png" /></div></td>
      <td align="left" width="640"><div class="mc2" id="mc2"><div class="ff2" id="ff2"><div class="minH"><img src="images/01.jpg" /></div></div>
                                   <div class="ff2" id="ff2"><div class="minH"><img src="images/02.jpg" /></div></div>
                                   <div class="ff2" id="ff2"><div class="minH"><img src="images/03.png" /></div></div>                    
                                   <div class="ff2" id="ff2"><div class="minH"><img src="images/04.jpg" /></div></div></div></td>
      <td><div class="next2"><img src="images/Shape-5-copy1.png" class="imgscroller" /></div></td></tr>
  </table></div>

如何做图像自动滑动

0 个答案: