jQuery SlideShow插件 – SlidesJS

SlideShow在国内又常被称作幻灯片效果。

谷歌关键词：js SlideShow，jquery SlideShow

SlidesJS

官网：http://www.slidesjs.com/

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

下面贴下代码（当然还有待改进的地方）：

效果：

html:

引用：

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

<div id="slides">
  <a href="http://www.sina.com/" target="_blank"><img src="images/slide1.jpg" /></a>
  <a href="http://www.163.com/" target="_blank"><img src="images/slide2.jpg" /></a>
  <a href="http://www.sohu.com/" target="_blank"><img src="images/slide3.jpg" /></a>
  <a href="http://www.baidu.com/" target="_blank"><img src="images/slide4.jpg" /></a>
</div>

Less:(说明：这段less是原本用css写的效果稍作修改的，勿喷)

#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;}
    }
}

<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>

jQuery SlideShow插件 – SlidesJS,古老的榕树,5-wow.com