实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>JS幻灯片Ideal Image Slider演示-回调函数</title>
<link rel="stylesheet" href="/api/jq/5733e32bf23bb/css/ideal-image-slider.css">
<link rel="stylesheet" href="/api/jq/5733e32bf23bb/themes/default/default.css">
<style>
.sucaihuo { width: 900px; margin: 0 auto;}
#slider { border-radius: 5px;}
#result { margin-top: 20px; font-size: 14px; text-align: center; color: #f50;}
</style>
</head>
<body>
<h1>回调函数</h1>
<div class="sucaihuo">
	<div id="slider">
		<img src="/api/jq/5733e32bf23bb/img/1.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/1@2x.jpg" title="标题标题" alt="文字说明文字说明文字说明">
		<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 幻灯片">
		<img data-src="/api/jq/5733e32bf23bb/img/3.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/3@2x.jpg" title="标题标题3" alt="文字说明文字说明文字说明3">
		<img data-src="/api/jq/5733e32bf23bb/img/4.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/4@2x.jpg" title="标题标题4" alt="文字说明文字说明文字说明4">
	</div>
</div>
<div id="result">&nbsp;</div>
<script src="/api/jq/5733e32bf23bb/js/ideal-image-slider.min.js"></script>
<script>
var result = document.getElementById('result');
var slider = new IdealImageSlider.Slider({
	selector: '#slider',
	onInit: function(){
		result.innerHTML = '初始化完成';
	    console.log('初始化完成');
	},
	onStart: function(){
		result.innerHTML = '开始';
	    console.log('开始');
	},
	onStop: function(){
		result.innerHTML = '停止';
	    console.log('停止');
	},
	onDestroy: function(){
		result.innerHTML = '销毁';
	    console.log('销毁');
	},
	beforeChange: function(){
		result.innerHTML = '开始切换';
	    console.log('开始切换');
	},
	afterChange: function(){
		result.innerHTML = '切换完成';
	    console.log('切换完成');
	}
});
slider.start();
</script>
</body>
</html>

AخA
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>JS幻灯片Ideal Image Slider演示-回调函数</title>
<link rel="stylesheet" href="/api/jq/5733e32bf23bb/css/ideal-image-slider.css">
<link rel="stylesheet" href="/api/jq/5733e32bf23bb/themes/default/default.css">
<style>
.sucaihuo { width: 900px; margin: 0 auto;}
#slider { border-radius: 5px;}
#result { margin-top: 20px; font-size: 14px; text-align: center; color: #f50;}
</style>
</head>
<body>
<h1>回调函数</h1>
<div class="sucaihuo">
    <div id="slider">
        <img src="/api/jq/5733e32bf23bb/img/1.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/1@2x.jpg" title="标题标题" alt="文字说明文字说明文字说明">
        <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 幻灯片">
        <img data-src="/api/jq/5733e32bf23bb/img/3.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/3@2x.jpg" title="标题标题3" alt="文字说明文字说明文字说明3">
        <img data-src="/api/jq/5733e32bf23bb/img/4.jpg" data-src-2x="/api/jq/5733e32bf23bb/img/4@2x.jpg" title="标题标题4" alt="文字说明文字说明文字说明4">
    </div>