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


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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。