jquery简单图像幻灯片教程

3

这lookslike东西，你有兴趣

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

2012-08-22 08:07:15 Schokea

4

这里是我的迈克尔·索里亚诺的教程适应。见下文或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>

来源

2013-04-03 23:43:15 Justin

+0

你可以请张贴你的jsfiddle吗？我试了一下，图片就离开了页面。 – Si8

+1

已添加。您可能只需要将您的LI元素更新为'float：left;' – Justin

49

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

Summaring的例子，这是你需要做的幻灯片什么：

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 =活动属性将与以下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>

如果你想用的幻灯片，我建议你看看上面的链接走得更远（看动画oppacity变化 - 例如2N），或在其它更复杂的幻灯片教程。

来源

2013-05-21 22:15:47 zurfyx

+1

我认为编程人员有一定的进展，我们开始了解如何使用上/下层技术编写简单的淡出节目，但最终我们意识到我们想要的是将图片从左向右移动（反之亦然）。 – TARKUS

+0

这是最简单直接的例子！感谢您的帮助人 – NiCU

16

我不知道为什么你还没有标上这些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" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
</ul>

。
如果你保持这个简单的易于保持resposive 最好访问：DEMO

。
如果你想要一些特殊的过渡效果（仍然有响应） - 检查了这一点DEMO WITH SPECIAL FX

来源

2013-08-28 16:43:00

jquery简单图像幻灯片教程

回答

相关问题