jquery简单图像幻灯片教程[关闭]

Posted

技术标签:

【中文标题】jquery简单图像幻灯片教程[关闭]【英文标题】:jquery simple image slideshow tutorial [closed] 【发布时间】:2012-08-17 14:49:11 【问题描述】:

在哪里可以找到一个简单的jquery图像幻灯片教程,适合初学者从零开始(没有插件),没有左右导航按钮?

谢谢。

【问题讨论】:

【参考方案1】:

这是迄今为止我在网上找到的最简单的示例。 http://jonraasch.com/blog/a-simple-jquery-slideshow

总结这个例子,这就是你需要做的幻灯片:

HTML:

<div id="slideshow">
    <img src="img1.jpg" style="position:absolute;" class="active" />
    <img src="img2.jpg" style="position:absolute;" />
    <img src="img3.jpg" style="position:absolute;" />
</div>

绝对位置用于将每个图像放在另一个上。

CSS

<style type="text/css">
    .active
        z-index:99;
    
</style>

具有 class="active" 的图像将出现在其他图像之上,class=active 属性将随着以下 Jquery 代码而改变。

<script>
    function slideSwitch() 
        var $active = $('div#slideshow IMG.active');
        var $next = $active.next();    

        $next.addClass('active');

        $active.removeClass('active');
    

    $(function() 
        setInterval( "slideSwitch()", 5000 );
    );
</script>

如果您想进一步了解幻灯片,我建议您查看上面的链接(查看动画不透明度变化 - 2n 示例)或其他更复杂的幻灯片教程。

【讨论】:

我认为编码人员有一定的进展,我们开始弄清楚如何使用上/下层技术编写简单的淡入淡出,但最终我们意识到我们想要的实际上是将图片从左向右移动(反之亦然)。 这是最简单直接的例子!谢谢你的帮助【参考方案2】:

我不知道您为什么没有标记这些 gr8 答案...这是另一个选项,可以让您和其他访问者控制转换速度和暂停时间

JAVASCRIPT

$(function () 

    /* SET PARAMETERS */
    var change_img_time     = 5000; 
    var transition_speed    = 100;

    var simple_slideshow    = $("#exampleSlider"),
        listItems           = simple_slideshow.children('li'),
        listLen             = listItems.length,
        i                   = 0,

        changeList = function () 

            listItems.eq(i).fadeOut(transition_speed, function () 
                i += 1;
                if (i === listLen) 
                    i = 0;
                
                listItems.eq(i).fadeIn(transition_speed);
            );

        ;

    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);

);

HTML

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250"  /></li>
    <li><img src="http://placehold.it/500x250"  /></li>
    <li><img src="http://placehold.it/500x250"  /></li>
    <li><img src="http://placehold.it/500x250"  /></li>
</ul>

. 如果你保持这个简单,那么它很容易保持响应 最好访问:DEMO

. 如果您想要一些具有特殊过渡效果的东西(仍然响应) - 看看这个DEMO WITH SPECIAL FX

【讨论】:

喜欢这个简单而优雅的代码。谢谢! 谢谢你,很高兴你喜欢它;)【参考方案3】:

这是我对 Michael Soriano 教程的改编。见下文或JSBin。

$(function() 
  var theImage = $('ul#ss li img');
  var theWidth = theImage.width();
  //wrap into mother div
  $('ul#ss').wrap('<div id="mother" />');
  //assign height width and overflow hidden to mother
  $('#mother').css(
    width: function() 
      return theWidth;
    ,
    height: function() 
      return theImage.height();
    ,
    position: 'relative',
    overflow: 'hidden'
  );
  //get total of image sizes and set as width for ul 
  var totalWidth = theImage.length * theWidth;
  $('ul').css(
    width: function() 
      return totalWidth;
    
  );

  var ss_timer = setInterval(function() 
    ss_next();
  , 3000);

  function ss_next() 
    var a = $(".active");
    a.removeClass('active');

    if (a.hasClass('last')) 
      //last element -- loop
      a.parent('ul').animate(
        "margin-left": (0)
      , 1000);
      a.siblings(":first").addClass('active');
     else 
      a.parent('ul').animate(
        "margin-left": (-(a.index() + 1) * theWidth)
      , 1000);
      a.next().addClass('active');
    
  

  // Cancel slideshow and move next manually on click
  $('ul#ss li img').on('click', function() 
    clearInterval(ss_timer);
    ss_next();
  );

);
* 
  margin: 0;
  padding: 0;

#ss 
  list-style: none;

#ss li 
  float: left;

#ss img 
  width: 200px;
  height: 100px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="ss">
  <li class="active">
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg">
  </li>
  <li>
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg">
  </li>
  <li class="last">
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg">
  </li>
</ul>

【讨论】:

你能发布你的jsfiddle吗?我试过了,图像离开了页面。 已添加。您可能只需要将 LI 元素更新为 float:left;【参考方案4】:

这看起来像你会感兴趣的东西

http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/

【讨论】:

以上是关于jquery简单图像幻灯片教程[关闭]的主要内容,如果未能解决你的问题,请参考以下文章

在一个简单的 jquery 幻灯片放映中,我的班级到达图像的末尾,然后从 DOM 的边缘掉下来

css 超简单的jQuery背景图像随机幻灯片(使用CSS3进行转换,并通过HTML5`data`属性获取图像路径)。

创建第一个 jQuery 幻灯片插件,从 Javascript 转换

jquery 循环插件、嵌套幻灯片、'after' 选项或测试第一张和最后一张图像

有没有办法在 JavaScript 或 jQuery 的点击事件中调用特定的幻灯片图像

jQuery 幻灯片一次切换一个 div 而不是全部独立