jQuery插件实现横向平铺自适应幻灯片效果

在web2.0拥有一个全屏幻灯片效果,那对网站来说,很是大气啊,下面分享一个jQuery插件实现横向平铺自适应幻灯片效果

很赞 全屏的 jquery实现的 应该是你要找到

html 结构代码

<div class="fullSlide">
  <div class="bd">
    <ul>
      <li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href=""></a></li>
      <li _src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href=""></a></li>
      <li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href=""></a></li>
      <li _src="url(images/4.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href=""></a></li>
      <li _src="url(images/5.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href=""></a></li>
    </ul>
  </div>
  <div class="hd">
    <ul>
    </ul>
  </div>

引入jquery库 一般自己选择百度提供的

导入jquery插件

<script type="text/javascript" src="js/superslide.2.1.js"></script>  
<script type="text/javascript">
jQuery(".fullSlide").hover(function() {
    jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function() {
    jQuery(this).find(".prev,.next").fadeOut()
});
jQuery(".fullSlide").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul",
    effect: "fold",
    autoPlay: true,
    autoPage: true,
    trigger: "click",
    startFun: function(i) {
        var curLi = jQuery(".fullSlide .bd li").eq(i);
        if ( !! curLi.attr("_src")) {
            curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
        }
    }
});
</script>

代码有点长 各位看官 自己慢慢琢磨吧