EasySlides是一款支持4种类型的jQuery轮播图插件。该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择。
在线演示 下载
使用方法
在页面中引入jquery和jquery.easy_slides.js文件,以及样式文件jquery.easy_slides.css。
<link href="css/jquery.easy_slides.css" rel="stylesheet"> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.easy_slides.js"></script>
HTML结构
四种轮播图的HTML结构和初始化方法分别如下:
1、大图轮播模式:
<div class="slider slider_one_big_picture"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="next_button">NEXT</div> <div class="prev_button">PREV</div> <div class="nav_indicators"></div></div>
$('.slider_one_big_picture').EasySlides()
2、多图轮播模式
<div class="slider slider_one_big_2"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="nav_indicators"></div></div>
$('.slider_one_big_2').EasySlides({'autoplay': false,'stepbystep': true,'show': 5,'loop': true })
3、封面轮播模式
<div class="slider slider_circle_10"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="next_button"></div><div class="prev_button"></div></div>
$('.slider_circle_10').EasySlides({'autoplay': true,'show': 13 })
4、同时显示4幅图片模式
<div class="slider slider_four_in_line"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="next_button"></div><div class="prev_button"></div> </div>
$('.slider_four_in_line').EasySlides({'autoplay': true,'show': 9 })
5、圆形轮播模式
<div class="slider slider_clock"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="next_button"></div><div class="prev_button"></div> </div>
$('.slider_clock').EasySlides({'autoplay': true,'stepbystep': false,'show': 15 })
配置参数
该jQuery轮播图的可用配置参数有:
{'autoplay': false,'timeout': 3000,'show': 5,'vertical': false,'reverse': false,'touchevents': true,'delayaftershow': 300,'stepbystep': true,'startslide': 0,'loop': true,'distancetochange': 10,'beforeshow': function () {},'aftershow': function () {}, }