jQuery实现前后按钮旋转轮播图效果

jQuery实现前后按钮旋转轮播图效果

一款基于jquery.carousel.js插件修改实现旋转轮播图效果(带前后按钮和索引按钮)。

使用方法
需要引入的JS文件

1
2
<script src="js/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>

CSS样式

1
<link type="text/css" rel="stylesheet" href="css/carousel.css">

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
<div class = "caroursel poster-main" data-setting = '{
  "width":1000,
  "height":470,
  "posterWidth":640,
  "posterHeight":470,
  "scale":0.8,
  "dealy":"3000",
  "algin":"middle"
}'
>
<ul class = "poster-list">
  <li class = "poster-item"><img src="image/a1.png" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/a2.png" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/a3.png" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/a4.png" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/a1.png" width = "100%" height="100%"></li>


<!--    <li class = "poster-item"><img src="image/a5.png" width = "100%" height="100%"></li>-->
</ul>

<ul class="btn-box">
  <li class="index-btn"></li>
  <li class="index-btn"></li>
  <li class="index-btn"></li>
  <li class="index-btn"></li>
  <li class="index-btn"></li>

  <!--<li class="index-btn"></li>-->
</ul>
<div class = "poster-btn poster-prev-btn"></div>
<div class = "poster-btn poster-next-btn"></div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论