推荐一款焦点图jQuery插件 SlidesJs

2017年9月11日 MK JQuery 1 阅读 3222次

给大家推荐一款比较好用的 Jquery Slide 插件 slidesjs，本人一直在使用的哦。

这个插件支持两种slide效果，一个是滑动，还有一个是渐隐渐出，而且它还支持自适应屏幕 自动播放，播放暂停， callback等，功能还是比较齐全，大家可以在此基础上扩展很多效果。

目前该插件已经更新至 3.0，支持jQuery 1.8.2 以上。 http://slidesjs.com/

下面介绍一下它的使用方法。

基本的HTML。

	
	
	
	
	



	1

一、设置宽度和高度幻灯片。

$(function(){
    $("#slides").slidesjs({
    width:940,
    height:528
    });
});

二、设置在幻灯片中的第一张幻灯片。

$(function(){
    $("#slides").slidesjs({
    	start:3
    });
});

三、前后按钮设置。

$(function(){
    $("#slides").slidesjs({
    navigation:
    {
    	active:true,
        //[boolean] 生成下一个和以前的按钮。
        //可以设置为false，并使用自己的按钮。
        //用户定义的按钮，必须具备以下条件：
        //上一个按钮：class="slidesjs-previous slidesjs-navigation"
        //下一个按钮：class="slidesjs-next slidesjs-navigation"
        effect:"slide"
        //可以是"slide" 或者 "fade".
    }
    });
});

四、分页设置。

$(function(){
    $("#slides").slidesjs({
    pagination:
 	{
 	active,true,
    //[boolean] 创建分页项
    //不能使用自己的分页

    effect:"slide"
    //[string] 可以是 "slide" 或者 "fade".
    }
    });
});

五、播放和停止按钮设置。

$(function(){
	$("#slides").slidesjs({
    play:
 	{
 	active:true,
    //[boolean] 生成的播放和停止按钮.
    //不能使用自己的按键。
    effect:"slide",
    //[string] 可以是 "slide" 或者 "fade".
    interval:5000,
    //[number] 每张幻灯片上花费的时间以毫秒为单位。
    auto:false,
    //[boolean] 加载开始播放幻灯片。
    swap:true,
    //[boolean] 显示/隐藏停止和播放按钮
    pauseOnHover:false,
    //[boolean] 鼠标经过暂停正在播放的幻灯片。
    restartDelay:2500
    //[number] 重新启动延迟无效幻灯片。
    }
  });
});

六、效果设置。

$(function(){
  	$("#slides").slidesjs({
    effect:
	{
    slide:
    {
    //滑动效果设置.
    speed:200
    //[number] 速度以毫秒为单位的幻灯片动画。
    },
    fade:
	{
    speed:300,
    //[number] 速度以毫秒为单位的幻灯片动画。
    crossfade:true
    //[boolean] 交叉过度效果.
    }
    }
});
});

七、回调函数的使用。

$(function(){
	$("#slides").slidesjs({
   	callback:
 	{
    loaded:function(number){
        //第一次加载幻灯片时
        //Use your browser console to view log
        console.log('SlidesJS:Loaded with slide #' + number);
        //Show start slide in log
        $('#slidesjs-log.slidesjs-slide-number').text(number);
   	},
    start:function(number){
        //幻灯片开始切换时
        //Use your browser console to view log
        console.log('SlidesJS:Start Animation on slide #' + number);
    },
    complete:function(number){
        //幻灯片切换完成时
        //Use your browser console to view log
        console.log('SlidesJS:Animation Complete. Current slide is #' + number);
        //Change slide number on animation complete
        $('#slidesjs-log.slidesjs-slide-number').text(number);
      }
    }
  });
});

jquery, js, slidesjs

PHP的可变变量名使用方法详解 span之间的空隙的原因和解决办法