html全屏轮播图插件,jQuery ui slider自适应全屏焦点图片轮播切换插件

特效描述：全屏焦点图片 轮播切换。jQuery ui slider自适应全屏焦点图片轮播切换插件

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

• 
• 
• 

---

• 
• 
• 

• 
• 
• 

• 
• 
• 

---

// start to run when document ready

$(function(){

$('#myslider0').juicyslider({

width: '100%',

height: 400,

mask : 'none',

autoplay: false,

shuffle: true,

});

$('#myslider1').juicyslider({

width: '100%',

height: 200,

});

$('#myslider2').juicyslider({

width: '100%',

height: 200,

mask: 'square',

show: {effect: 'drop', duration: 3000},

hide: {effect: 'drop', duration: 3000},

});

$('#myslider3').juicyslider({

width: '100%',

height: 200,

mask: 'strip',

show: {effect: 'puff', duration: 3000},

hide: {effect: 'puff', duration: 3000},

});

});