dongyan1974 2010-09-04 08:33
浏览 74
已采纳

更改单击以跳过图库到滑动照片库？

i just bought a joomla template from template monster. there is photo gallery on home page which skips to photos by clicking onto them.

what i need is a self sliding photo gallery you know what i mean automatically skipping photos in preset interval. http://www.mirelmuhendislik.com/home-tr/index.php this is the homepage.

i tried to do it by

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

but it didnt work. i dunno why it didnt work is it because of javascript embedding options of joomla or is it because my javascript code?? and how can i solve this problem? i'd be glad to see some suggestions please help :/

  • 写回答

4条回答 默认 最新

  • doudui6756 2010-09-04 08:59
    关注

    In this scenario you can use .bind() and .trigger() 

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

$('#slider').bind('slide', function() {
   //write your slide methods
});

    Edit : Code & Demo Page : 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);
});
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 phython读取excel表格报错 ^7个 SyntaxError: invalid syntax 语句报错
  • ¥20 @microsoft/fetch-event-source 流式响应问题
  • ¥15 ogg dd trandata 报错
  • ¥15 高缺失率数据如何选择填充方式
  • ¥50 potsgresql15备份问题
  • ¥15 Mac系统vs code使用phpstudy如何配置debug来调试php
  • ¥15 目前主流的音乐软件，像网易云音乐，QQ音乐他们的前端和后台部分是用的什么技术实现的?求解！
  • ¥60 pb数据库修改与连接
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗？
  • ¥15 拟通过pc下指令到安卓系统，如果追求响应速度，尽可能无延迟，是不是用安卓模拟器会优于实体的安卓手机？如果是，可以快多少毫秒？