代码之家  ›  专栏  ›  技术社区  ›  Max Abrahamsson

正在将单击跳过照片库更改为滑动照片库?

  •  1
  • Max Abrahamsson  · 技术社区  · 16 年前

    我刚从模板怪物那里买了一个joomla模板。 主页上有一个图片库,通过点击可以跳转到照片。

    http://www.mirelmuhendislik.com/home-tr/index.php 这是主页。

    我试着靠自己来做

    function clicker() {
    document.getElementById('photo2').click();
    }
    setInterval("clicker()",5000);
    

    但没用。我不知道为什么它不工作是因为joomla的javascript嵌入选项还是因为我的javascript代码?? 我怎样才能解决这个问题呢? 我很高兴看到一些建议 请帮助:/

    4 回复  |  直到 16 年前
        1
  •  1
  •   user372551 user372551    16 年前

    在这种情况下,您可以使用 .bind() 和 .trigger()

    $(function() {
       setInterval(function() {
          $('#slider').trigger('slide');  //triggers 'slide'
       },2000);  //Performs sliding every 2 seconds
    });
    
    $('#slider').bind('slide', function() {
       //write your slide methods
    });
    

    编辑 http://jsbin.com/efoje4

    HTML格式

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Hello world !!</title>
      <style type="text/css">
        div {margin:0px auto;padding:0px; width:300px;height:200px; overflow:hidden; }
        ul { margin :0px; padding:0px; list-style:none; width:1200px;height:200px;}
        li{float : left;margin:0px padding:0px; width:300px;height:200px; }
        img { margin:0px padding:0px; width:300px;height:200px; }    
      </style>
    
    </head>
    <body>
      <div>
        <ul id="slider">
          <li>
              <img src="http://mystuffspace.com/graphic/adorable-puppies.jpg"/>
          </li>
          <li>
              <img src="http://2.bp.blogspot.com/_TP5pGCYHvfg/SyMRSFukqJI/AAAAAAAAA0Y/yIP62DYXOP8/s400/Puppies.jpg"/>
          </li>
          <li>
              <img src="http://temunot.files.wordpress.com/2008/11/4-cute-puppies-wallpaper-640x480.jpg" />
          </li>
          <li>
              <img src="http://mystuffspace.com/graphic/puppies-2.jpg" />
          </li>
        </ul>
      </div>
    </body>
    </html>
    

    JavaScript语言 :

    var margin  = 0, slider = $('#slider'), width = 300;
    
    $(document).ready(function() {
      setInterval(function() {
          slider.trigger('slide');
      },2000);
    });
    
     slider.bind('slide',function() {
      if(margin <= slider.width() *(-1) + width) {
          margin = 0;
      }else if(margin <= slider.width()) {
        margin -= width;  
      }
       slider.animate({marginLeft : margin},500);
    });
    
        2
  •  0
  •   Max Abrahamsson    16 年前
    <div class="extra_wrapper">
    <div id="gallery" class="content">
    <div class="slideshow-container">
    <div id="loading" class="loader"></div>
    <div id="slideshow" class="slideshow"></div>
    </div>
    </div>
    <div id="thumbs" class="navigation">
    <ul id="slider" class="thumbs noscript">
    <li> <a class="thumb" name="leaf" href="images/stories/big_pic1.png"> <img src="images/stories/gallery_pic1.jpg" /></a></li>
    <li> <a class="thumb" name="leaf" href="images/stories/big_pic2.png"> <img src="images/stories/gallery_pic2.jpg" /></a></li>
    <li> <a class="thumb" name="leaf" href="images/stories/big_pic3.png"> <img src="images/stories/gallery_pic3.jpg" /></a></li>
    <li> <a class="thumb" name="leaf" href="images/stories/big_pic4.png"> <img src="images/stories/gallery_pic4.jpg" /></a></li>
    <li class="last"> <a class="thumb" name="leaf" href="images/stories/big_pic5.png"> <img src="images/stories/gallery_pic5.jpg" /></a></li>
    </ul>
    </div>
    </div>
    

    http://mirelmuhendislik.com/home-tr/ 在这里 我想要下面的小照片保持静止

        3
  •  0
  •   Max Abrahamsson    16 年前

    在这个模板中,他们似乎使用了jquery gallerific库 也许我们可以在下面的设置中设置它自动滑动。

    var defaults = {
        delay:                     3000,
        numThumbs:                 20,
        preloadAhead:              40, // Set to -1 to preload all images
        enableTopPager:            false,
        enableBottomPager:         true,
        maxPagesToShow:            7,
        imageContainerSel:         '',
        captionContainerSel:       '',
        controlsContainerSel:      '',
        loadingContainerSel:       '',
        renderSSControls:          true,
        renderNavControls:         true,
        playLinkText:              'Play',
        pauseLinkText:             'Pause',
        prevLinkText:              'Previous',
        nextLinkText:              'Next',
        nextPageLinkText:          'Next &rsaquo;',
        prevPageLinkText:          '&lsaquo; Prev',
        enableHistory:             false,
        enableKeyboardNavigation:  true,
        autoStart:                 false,
        syncTransitions:           false,
        defaultTransitionDuration: 1000,
        onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
        onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
        onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
        onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
        onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
        onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
        onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
    };
    
        4
  •  0
  •   Max Abrahamsson    16 年前

    是的,有一个关于访问www.prefix网站的问题 好的,问题解决了 我刚刚编辑了jquery gallerific代码

    if(this.autoStart) {
    this.play();
    }
    

    具有

    this.play();
    

    你可能会问我为什么不把autoStart设置为1

    推荐文章