实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
<meta charset="utf-8">
5
<title>JS幻灯片Ideal Image Slider演示-带标题描述</title>
6
<link rel="stylesheet" href="/api/jq/5733e32bf23bb/css/ideal-image-slider.css">
7
<link rel="stylesheet" href="/api/jq/5733e32bf23bb/themes/default/default.css">
8
<style>
9
.sucaihuo { width: 900px; margin: 0 auto;}
10
#slider { border-radius: 5px;}
11
</style>
12
</head>
13
<body>
14
<h1>带标题描述</h1>
15
<div class="sucaihuo">
16
    <div id="slider">
17
        <img src="/api/jq/5733e32bf23bb/img/1.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/1@2x.jpg" title="标题标题" alt="文字说明文字说明文字说明">
18
        <img data-src="/api/jq/5733e32bf23bb/img/2.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/2@2x.jpg"  title="Ideal Image Slider" alt="——纯 JavaScript 幻灯片">
19
        <img data-src="/api/jq/5733e32bf23bb/img/3.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/3@2x.jpg" title="标题标题标题3">
20
        <img data-src="/api/jq/5733e32bf23bb/img/4.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/4@2x.jpg" alt="文字说明文字说明文字说明4">
21
    </div>
22
</div>
23
<script src="/api/jq/5733e32bf23bb/js/ideal-image-slider.min.js"></script>
24
<script src="/api/jq/5733e32bf23bb/extensions/captions/iis-captions.js"></script>
25
<script>
26
var slider = new IdealImageSlider.Slider('#slider');
27
slider.addCaptions();
28
slider.start();
29
</script>
30
</body>
31
</html>