简洁清新的轻量级幻灯片- craftyslide

 

插件信息

官网：http://projects.craftedpixelz.co.uk/craftyslide/

Demo：http://projects.craftedpixelz.co.uk/craftyslide/

 

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" href="css/craftyslide.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

2、在head标签中加入以下js代码

<script>
   $("#slideshow").craftyslide();
</script>

3、在body标签中加入以下格式的html代码

<div id="slideshow">   
    <ul>       
        <li>
            <imgsrc="http://farm6.static.flickr.com/5270/5627221570_afdd85f16a_z.jpg" alt=""title="Light Trails">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5146/5627204218_b83b2d25d6_z.jpg" alt=""title="Bokeh">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5181/5626622843_783739c864_z.jpg" alt=""title="Blossoms">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5183/5627213996_915aa49939_z.jpg" alt=""title="Funky Painting">
        </li>
        <li>
            <imgsrc="http://farm6.static.flickr.com/5182/5626649425_fde8610329_z.jpg" alt=""title="Vintage Chandelier">
        </li>
    </ul>
</div>

 

 

参数配置

由于本插件轻量级，所以参数比较少

$("#slideshow").craftyslide({
  'width': 640,//幻灯片宽度
  'height': 400,//幻灯片高度
  'pagination': false,//是否显示导航按钮
  'fadetime': 500,//渐隐时间
  'delay': 5000//切换间隔
});

 

本插件原始的配置是，如果我们启用导航，就不能自动播放，如果不启用导航，则自动播放。这显然不符合我们的需求。我们是希望既能导航又能自动播放。但官方并未提供这样的功能。于是本站就修改了一下js文件，结果既可以导航也可以自动播放了。但是这里还有一个问题就是，由于没有做相应的处理，自动播放时，导航按钮会停在那儿不动，不会随着幻灯片的播放而激活。

解决办法：

 paginate() 加入图片切换功能

(function($) {
    $.fn.craftyslide = function(options) {
        var defaults = {
            "width": 600,
            "height": 300,
            "pagination": true,
            "fadetime": 350,
            "delay": 5000
        };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var $this = $(this);
            var $slides = $this.find("ul li");
            $slides.not(':first').hide();
            function paginate() {
                $this.append("<ol id='pagination' />");
                var i = 1;
                $slides.each(function() {
                    $(this).attr("id", "slide" + i);
                    $("#pagination").append("<li><a href='#slide" + i + "'>" + i + "</a></li>");
                    i++;
                });
                $("#pagination li a:first").addClass("active");
                
                /*实现图片切换功能Begin*/
                setInterval(function() {
                    $slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");
                    
                    //获取当前显示元素 id
                    var index=parseInt($slides.filter(":first-child").attr("id").substring(5))-1;
                    //console.log(index);
                    $("#pagination li a").removeClass("active").eq(index).addClass("active");

                    $slides.each(function() {
                        if ($slides.is(":visible")) {
                            $(".caption").css("bottom", "-37px");
                            $(this).find(".caption").delay(300).animate({
                                bottom: 0
                            },
                            300);
                        }
                    });
                    
                },
                options.delay);
                /*实现图片切换功能End*/
            }
            function captions() {
                $slides.each(function() {
                    $caption = $(this).find("img").attr("title");
                    if ($caption !== undefined) {
                        $(this).prepend("<p class='caption'>" + $caption + "</p>");
                    }
                    $slides.filter(":first").find(".caption").css("bottom", 0);
                });
            }
            function manual() {
                var $pagination = $("#pagination li a");
                $pagination.click(function(e) {
                    e.preventDefault();
                    var $current = $(this.hash);
                    if ($current.is(":hidden")) {
                        $slides.fadeOut(options.fadetime);
                        $current.fadeIn(options.fadetime);
                        $pagination.removeClass("active");
                        $(this).addClass("active");
                        $(".caption").css("bottom", "-37px");
                        $current.find(".caption").delay(300).animate({
                            bottom: 0
                        },
                        300);
                    }
                });
            }
            function auto() {
                setInterval(function() {
                    $slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");
                    $slides.each(function() {
                        if ($slides.is(":visible")) {
                            $(".caption").css("bottom", "-37px");
                            $(this).find(".caption").delay(300).animate({
                                bottom: 0
                            },
                            300);
                        }
                    });
                },
                options.delay);
            }
            $this.width(options.width);
            $this.find("ul, li img").width(options.width);
            $this.height(options.height);
            $this.find("ul, li").height(options.height);
            if (options.pagination === true) {
                paginate();
            } else {
                auto();
            }
            captions();
            manual();
        });
    };
})(jQuery);
            

 压缩js代码：

(function($){$.fn.craftyslide=function(options){var defaults={"width":600,"height":300,"pagination":true,"fadetime":350,"delay":5000};var options=$.extend(defaults,options);return this.each(function(){var $this=$(this);var $slides=$this.find("ul li");$slides.not(":first").hide();function paginate(){$this.append("<ol id='pagination' />");var i=1;$slides.each(function(){$(this).attr("id","slide"+i);$("#pagination").append("<li><a href='#slide"+i+"'>"+i+"</a></li>");i++});$("#pagination li a:first").addClass("active");setInterval(function(){$slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");var index=parseInt($slides.filter(":first-child").attr("id").substring(5))-1;$("#pagination li a").removeClass("active").eq(index).addClass("active");$slides.each(function(){if($slides.is(":visible")){$(".caption").css("bottom","-37px");$(this).find(".caption").delay(300).animate({bottom:0},300)}})},options.delay)}function captions(){$slides.each(function(){$caption=$(this).find("img").attr("title");if($caption!==undefined){$(this).prepend("<p class='caption'>"+$caption+"</p>")}$slides.filter(":first").find(".caption").css("bottom",0)})}function manual(){var $pagination=$("#pagination li a");$pagination.click(function(e){e.preventDefault();var $current=$(this.hash);if($current.is(":hidden")){$slides.fadeOut(options.fadetime);$current.fadeIn(options.fadetime);$pagination.removeClass("active");$(this).addClass("active");$(".caption").css("bottom","-37px");$current.find(".caption").delay(300).animate({bottom:0},300)}})}function auto(){setInterval(function(){$slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");$slides.each(function(){if($slides.is(":visible")){$(".caption").css("bottom","-37px");$(this).find(".caption").delay(300).animate({bottom:0},300)}})},options.delay)}$this.width(options.width);$this.find("ul, li img").width(options.width);$this.height(options.height);$this.find("ul, li").height(options.height);if(options.pagination===true){paginate()}else{auto()}captions();manual()})}})(jQuery);