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

本文介绍了如何利用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值