demo.html 1.65 KB
<div id="slide" class="page out" data-title="幻灯片插件">
	<div id="slide-header"></div>
	<div id="slide-a"></div>
</div>
<script>
require(["NavHeader", "ColumnBreak", "Slide"], function(NavHeader, ColumnBreak, Slide) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "slide-header",
			option: {
				title:"幻灯片插件", 
				smallTitle:"slide"
			}
		}).render();
	}
	new Slide({
		el: "slide-a",
		option: {
			height : 180,
			autoplay : 3,
			items : [
				{path : "/mobilemode/mobile/demo/plugin/Slide/resource/slider01.png", desc : "图片一", url : "/mobilemode/mobile/demo/plugin/NavPanel/demo.html"},
				{path : "/mobilemode/mobile/demo/plugin/Slide/resource/slider02.png", desc : "图片二", url : "http://weaver.com.cn/mobile/ecology/index.html", dataAjax : false},
				{path : "/mobilemode/mobile/demo/plugin/Slide/resource/slider03.png", desc : "图片三"}
			],
			callback : {
				click : function(data){
					console.log(data);
				}
			}
		}
	}).render().then(function(){
		if (!hasClsPicker) return;
		_u.vetically("#slide-a");
		clsPicker.golalSetting({
			container: "#slide-a",
			type: "Slide"
		});
		new clsPicker({
			selector: ".wev-swipe-container",
			text: ".wev-swipe-container",
			skew: [10, 0],
			lineYSkew: 90,
			position: "bottom right"
		});
		new clsPicker({
			selector: ".wev-swipe-wrap",
			text: ".wev-swipe-wrap",
			skew: [10, 8],
			lineYSkew: 40,
			position: "bottom right"
		});
		new clsPicker({
			selector: ".wev-slide-point",
			text: ".wev-slide-point",
			skew: [2, 4],
			lineYSkew: 60,
			position: "bottom left"
		});
	});
});
</script>