JQuery SlideShow plug-in-SlidesJS

SlideShow is also called a slide effect in China.

Keywords: js SlideShow, jquery SlideShow

SlidesJS

Official Website: http://www.slidesjs.com/

Description: SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1 +) with features like touch and CSS3 transitions.

Paste the following code (of course, there are areas to be improved ):

Effect:

Html:

Reference:

<Script src = "http://code.jquery.com/jquery-latest.min.js" type = "text/ecmascript"> </script>
<Script src = "js/jquery. slides. js" type = "text/ecmascript"> </script>

Less: (Note: This section of less is slightly modified by the effect originally written in css, Do not spray)

#slides{position: relative;background: #000}.slidesjs-slide{    img{width: 100%;height: 100%;}}.slidesjs-navigation{position: absolute;top:32%;width:39px;height:67px;z-index:11;}.slidesjs-previous{left:0;background:url(../images/prenext.png) 0 0 no-repeat;}.slidesjs-next{right:0;background:url(../images/prenext.png) -42px 0 no-repeat;}.slidesjs-pagination{position:absolute;bottom:6%;right:6%;    width:126px;height:22px;z-index:11;}.slidesjs-pagination-item{    a{        display: block;width: 26px;height: 26px;float: left;margin-left:4px;border-radius:12px;        background: #222;line-height: 26px;text-align: center;color: #ffffff;z-index:11;        &:hover{text-decoration: none;background: #ff0000;}    }}

JS:

<script type="text/ecmascript">  $(function(){    $("#slides").slidesjs({      width:940,      height:529,      //start: 3,        navigation:{active: true,effect: "slide"},        pagination:{active: true,effect: "fade"},      effect:{          slide:{speed: 500},          fade:{speed: 300,crossfade: true}        },        play: {          active: false,          effect: "slide",          interval: 3000,          auto: true,          swap: false,          pauseOnHover: true,          restartDelay: 2500        }    });  });</script>