jQurey轮播插件slides简单使用教程

动态演示地址：

http://www.zqunyan.com/zgproduction/slidesjs/index.html

简介就不多说了，网上有很多，复制粘贴没意义，会想到用这个插件就代表已经了解了这是个什么样的东东，这里主要记录下我在使用过程中的步骤和注意事项

html代码注意轮播的多个元素是同样的设置和样式，这样轮播的时候看起来也不至于忽大忽小的看着不协调，这里只是为方便演示和看懂，不做什么复杂特效误导群众

<div id="slides">

  <img src="1.jpg" />

  <img src="1.jpg" />

  <img src="1.jpg" />

  <img src="1.jpg" />

</div>

简单设置下样式，具体参数可以根据实际情况进行设定，不纠结

#slides{

    width:540px;

    height:350px;

    margin:0 auto;

}

#sildes img{

    width:540px;

    height:300px;

}

下面就是引入主题，把关键 js 文件引入进来，这个放头部和身体里应该都是可以的，我习惯基础文件放头部，操作代码放到身体需要轮播的位置

<script src="jquery.min.js"></script>

<script src="jquery.slides.min.js"></script>

下面是简单的操作代码，没做太多的参数设定，只是让他自己自动跑起来

<script>

$(function(){

    $("#slides").slidesjs({

      width:540,

      height:300,

      start: 1,

      play: {

          auto: true

      }

    });

  });

</script>

这样就能动起来了

效果大概是这样的

实际运行起来，图片已经开始轮播了，效果达到了。只是导航看起来还有点别扭，而且还被截断了，针对slides的导航部分，有一些内部的类是固定的，设定样式时针对特定部分进行设定就可以了，这里贴上我简单用到的针对左边上下页和右边标记图片的数字位置的样式

.slidesjs-navigation{

    margin-top:10px;

}

a.slidesjs-previous{

    float:left;

    margin-left:20px;

    text-decoration:none;

}

a.slidesjs-next{

    float:left;

    margin-left:20px;

    text-decoration:none;

}

.slidesjs-pagination{

    float:right;

    margin-top:10px;

}

.slidesjs-pagination li{

    float:left;

    margin-left:5px;

    list-style:none;

}

.slidesjs-pagination li a{

    text-decoration:none;

}

.slidesjs-pagination li a.active{

    color:red;

}

再次运行

这样看着就舒服些了，左右的文字部分需要的朋友也可以通过背景background-image样式换成好看的图片，这里就不作演示了

分析上面的样式可以看出左边的文字部分用到的类是 .slidesjs-navigation和 .slidesjs-previous .slidesjs-next

右边的导航用到的类是 .slidesjs-pagination 然后里面是通过列表标签控制的 li

更多的控制还有超链接 a 的样式设定等等

好了，以上就是简单的引用，后续如果发现有什么新的注意事项再补充啦……

动态演示地址：

http://www.zqunyan.com/zgproduction/slidesjs/index.html

巴特西

jQurey轮播插件slides简单使用教程

最新文章

热门文章