simpleBanner
simple jquery slide banner for ie8+
and can also for ie7 with basic usage
Options
| key | type | default value | description |
|---|---|---|---|
| dots | string | null | set dot class or do not show dot |
| speed | number | 500 | feadIn or slide animate speed |
| autoPlay | bool | true | auto play all the imgs |
| autoPlayDuration | number | 5000 | auto play duration |
| eventType | string | click | click/mouseenter event to trigger play |
| animation | string | change | change/fade/slide animations |
| onSwitch | function | $.noop | event hook after switch |
| resizeHeight | number | 0 | 0/1/2 ; 0 for do nothing |
set resizeHeight to 1 : use maxheight for the container's height
set resizeHeight to 2 : reszie the container's height with content
instance method
| method | description |
|---|---|
| play | play the given index pic |
| prev | show prev pic |
| next | show next pic |
| pause | stop autoplay |
| unpause | continue autoplay |
CSS
html looks like
<div class="wrapper-1"> <div class="example-1"> <ul> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul> </div> </div> or
<div class="wrapper-1"> <div class="example-1"> <ul> <li> <img src="" alt=""> <div class="text"></div> </li> <li> <img src="" alt=""> <div class="text"></div> </li> </ul> </div> </div> css
/*style for container*/ .wrapper-1{ width: 600px; margin: 100px auto 400px; } /*style for img in case of low download speed*/ .example-1{ overflow: hidden; width: 100%; position: relative; } .example-1 ul{ overflow: hidden; margin: 0; zoom: 1; } .example-1 ul li{ float: left; height: 100%; display: none; } .example-1 ul li:first-child{ display: block; } .example-1 ul li img{ width: 100%; height: 100%; } /*style for dots*/ .dots-1{ position: absolute; bottom: 10px; right: 10px; margin: 0; padding: 0; text-align: center; } .dots-1 li{ display: inline-block; *display: inline; *zoom: 1; width: 15px; height: 15px; margin: 0 5px; background: #963; cursor: pointer; } .dots-1 li:hover,.dots-1 li.active{ background: #000; } it is useful to set ul li display:none in case of flash
$('.banner .banner-imgs').simpleBanner( { autoPlayDuration:8000, dots:'dots-1', eventType:'mouseenter', animation:'slide' }); see index.html for more
