实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
<meta charset="utf-8">
5
<title>jQuery幻灯片插件ResponsiveSlides.js演示-缩略图_手册网</title>
6
<link rel="stylesheet" href="/api/jq/5733e333c6203/css/responsiveslides.css">
7
<link rel="stylesheet" href="/api/jq/5733e333c6203/themes/themes.css">
8
<style>
9
.wrap { position: relative; width: 900px; margin: 0 auto;}
10
#slider-pager { position: absolute; bottom: 15px; z-index: 10; width: 100%; margin: 0; padding: 0; text-align: center; list-style-type: none;}
11
#slider-pager li { display: inline-block; margin-left: 15px; border: 2px solid #999; *display: inline; *zoom: 1;}
12
#slider-pager .rslides_here { border: 2px solid #fff;}
13
#slider-pager img { display: block; border: 0;}
14
</style>
15
</head>
16
<body>
17
<h1>缩略图</h1>
18
<div class="wrap">
19
    <ul class="rslides" id="sucaihuo">
20
        <li><a href="#" ><img src="/api/jq/5733e333c6203/images/1.jpg" alt=""></a></li>
21
        <li><a href="#" ><img src="/api/jq/5733e333c6203/images/2.jpg" alt=""></a></li>
22
        <li><a href="#" ><img src="/api/jq/5733e333c6203/images/3.jpg" alt=""></a></li>
23
    </ul>
24
    <ul id="slider-pager">
25
        <li><a href="#"><img src="/api/jq/5733e333c6203/images/1_thumb.jpg" alt=""></a></li>
26
        <li><a href="#"><img src="/api/jq/5733e333c6203/images/2_thumb.jpg" alt=""></a></li>
27
        <li><a href="#"><img src="/api/jq/5733e333c6203/images/3_thumb.jpg" alt=""></a></li>
28
    </ul>
29
</div>
30
<script src="/api/jq/5733e333c6203/js/jquery-1.11.3.min.js"></script>
31
<script src="/api/jq/5733e333c6203/js/responsiveslides.min.js"></script>
32
<script>
33
$(function() {
34
    $('#sucaihuo').responsiveSlides({
35
        manualControls: '#slider-pager'
36
    });
37
});
38
</script>
39
</body>
40
</html>