实例代码“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" alt="">
18
        <img data-src="/api/jq/5733e32bf23bb/img/2.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/2@2x.jpg" alt="">
19
        <img data-src="/api/jq/5733e32bf23bb/img/3.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/3@2x.jpg" alt="">
20
        <img data-src="/api/jq/5733e32bf23bb/img/4.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/4@2x.jpg" alt="">
21
    </div>
22
</div>
23
<script src="/api/jq/5733e32bf23bb/js/ideal-image-slider.min.js"></script>
24
<script>
25
new IdealImageSlider.Slider({
26
    selector: '#slider',
27
    effect: 'fade'
28
});
29
</script>
30
</body>
31
</html>