jquery插件——jquery.slides.min.js

最新推荐文章于 2025-08-06 12:08:41 发布

原创最新推荐文章于 2025-08-06 12:08:41 发布 · 5.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#插件

【前端】基础专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何利用jQuery插件jquery.slides.min.js创建图片更换效果。首先需要引入该插件库，接着定义CSS样式以美化展示。通过JS滑动事件，可以为多个div设置滑动功能。最后，展示使用div进行图片展示的方法。

实现图片更换效果：
1.引入插件库：

<script type="text/javascript" src="${base}/resources/shop/js/jquery.slides.min.js"></script>

2.css定义样式：

<style>
#slides {
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      display:none;
    }

    a.slidesjs-next {
      display:none;
    }

    a:hover.slidesjs-next {
      display:none;
    }

    a.slidesjs-previous {
      display:none;
    }

    a:hover.slidesjs-previous {
      display:none;
    }

    a.slidesjs-play {
      display:none;
    }

    a:hover.slidesjs-play {
      display:none;
    }

    a.slidesjs-stop {
      display:none;
    }

    a:hover.slidesjs-stop {
      display:none;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 10px;
      height: 10px;
      padding: 0px 3px;
      background: transparent url(${base}/resources/shop/images/dot.png) no-repeat center top;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 50% -9px;
    }

    .slidesjs-pagination li a:hover {
      background-position: 50% -9px;
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }
</style>

3.js滑动事件：
（当有多个div滑动可以定义多个slides）

script type="text/javascript">
    $(function() {
      $('#slides').slidesjs({
        width: 940,
        height: 380,
        play: {
          active: true,
          auto: true,
          interval: 4000,
          swap: true
        }
      });

      $('#slides1').slidesjs({
        width: 940,
        height: 380,
        play: {
          active: true,
          auto: true,
          interval: 4000,
          swap: true
        }
      });
</script>

4.div图片展示:

<div class="storeinfoimagediv" id="slides" >
     <a><img  src="${base}/resources/shop/images/meiwu1.jpg" class="storeinfoimage"/></a>
     <a><img  src="${base}/resources/shop/images/meiwu2.jpg" class="storeinfoimage"/></a>
</div>
<div class="storeinfoimagediv" id="slides1">
     <a><img  src="${base}/resources/shop/images/gaoding1.jpg" class="storeinfoimage"/></a>
     <a><img  src="${base}/resources/shop/images/gaoding2.jpg" class="storeinfoimage"/></a>
</div>