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

Posted 2020-09-25 曲幽

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
}