jQuery左右切换按钮悬浮焦点图插件

jQuery左右切换按钮悬浮焦点图插件

这是一款jQuery左右切换焦点图插件,它的特点是左右切换按钮悬浮在图片右下角,点击切换按钮即可让图片进行左右平移地切换,效果着实是简单,但是个人觉得很实用。

使用方法
在页面引入以下ruzw.js文件

1
<script  src="js/ruzw.js"></script>

Html结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="slider-ctr">
  <figure class="slide"><img src="images/img5.jpeg" alt="Sky"/>
    <figcaption>
      <div class="title">Sky</div>
      <div class="author">Aleksandra</div>
    </figcaption>
  </figure>
  <figure class="slide"><img src="images/img1.jpeg" alt="River"/>
    <figcaption>
      <div class="title">River</div>
      <div class="author">Ales Krivec</div>
    </figcaption>
  </figure>
  <figure class="slide"><img src="images/img4.jpeg" alt="Rain"/>
    <figcaption>
      <div class="title">Rain</div>
      <div class="author">Wilson Lau</div>
    </figcaption>
  </figure>
  <figure class="slide text-on"><img src="images/img2.jpeg" alt="Ocean"/>
    <figcaption>
      <div class="title">Ocean</div>
      <div class="author">Rosan Harmens</div>
    </figcaption>
  </figure>
  <div class="slider-control">
    <div class="control prev disabled">
      <div class="icon ion-chevron-left"></div>
    </div>
    <div class="control next">
      <div class="icon ion-chevron-right"></div>
    </div>
  </div>
</div>

CSS样式
在页面引入以下ruzw.css样式文件

1
<link rel="stylesheet" href="css/ruzw.css">

文件信息:

    2

    发表评论