教程网3月28日整理
<!DOCTYPE html>
<html lang="zh">
<head>
<title> Y.Slider 基于YUI3的轮播幻灯 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
body.yui-skin-sam .yui-separate-console{_position:absolute; }
.tell{display:block;padding:16px 10px;margin:5px 0 15px;background:#f4f4f4;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.tell strong{display:block;padding-bottom:10px;}
.tell p{font-size:14px;}
.sbtn.selected{background-position:0 -105px;}
/*--Align--*/
.valign-middle{margin:0 auto;width:600px;border:5px solid #ddd;}
.sliderbox{position:relative;float:left;}
.sb-window{width:600px;height:375px;position:relative;overflow:hidden;}
.img-roll{position:absolute;top:0;}
.img-roll img{float:left;}
/*--Paging Styles--*/
.sb-paging{position:absolute;bottom:20px;right:-7px;width:178px;height:47px;z-index:100;text-align:center;line-height:40px;background:url() no-repeat;}
.sb-paging a {padding: 5px;text-decoration: none;color: #fff;outline:none;}
.sb-paging a.active {font-weight: bold; background: #920000;border: 1px solid #610000;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius: 3px;}
</style>
</head>
<body class="yui-skin-sam">
<div id="doc" class="demo">
<div id="hd">
<div class="page-title">
<h1>Y.Slider 基于YUI3的自动轮播幻灯组件</h1>
</div>
</div>
<div id="bd">
<div class="tell">
<p><b>+</b> YUI3的组件网上已经开始开始膨胀增长，因由YUI3的各种优势，借势做了这个自动轮播幻灯组件组件。当前组件仅对图片操作，如需要每一帧图片对应解说文字，可以在大图旁放置标签去实现你想要的文字展示效果。</p>
</div>
<div class="tell">
<h2><strong>第一个：简单初始化Y.Slider（鼠标点击Number切换）</strong></h2>
<div class="valign-middle clearfix">
<!-- {{ Slider -->
<div class="sliderbox" id="demo1">
<div class="sb-window">
<div class="img-roll">
<a href="" title=""><img src="" alt="" title=""/></a>
<a href="" title=""><img src="" alt="" title=""/></a>
<a href="" title=""><img src="" alt="" title=""/></a>
<a href="" title=""><img src="" alt="" title=""/></a>
</div>
</div>
<div class="sb-paging">
<a href="#" rel="1" class="active">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
<!-- }} Slider -->
</div>
</div>
<div class="tell">
<h2><strong>定制多功能的轮播幻灯</strong></h2>
<div class="valign-middle clearfix">
<!-- {{ Slider -->
<div class="sliderbox" id="demo2">
<div class="sb-window">
<div class="img-roll">
<a href="" title=""><img src="" alt="" title=""/></a>
<a href="" title=""><img src="" alt="" title=""/></a>
<a href="" title=""><img src="" alt="" title=""/></a>
<a href="" title=""><img src="" alt="" title=""/></a>
</div>
</div>
<div class="sb-paging">
<a href="#" rel="1" class="active">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
<p><span></span><br/>
<button type="submit" class="sbtn" id="pre">上一张</button><button type="submit" class="sbtn" id="next">下一张</button><button type="submit" class="sbtn" id="stop">停止</button><button type="submit" id="goto" class="sbtn">第4帧</button></p>
</div>
<!-- }} Slider -->
</div>
</div>
<!-- {{ Back -->
<div class="backto">
<a href="" class="back"></a>
</div>
<!-- }} Back -->
</div>
<div id="ft">
<p>Copyright © 2010 <a href="" title="microidc">不名一格</a></p>
<p>Please send bug reports to idd.chiang[At]gmail.com</p>
</div>
</div>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
YUI({
//Combo JS
combine:false,
//base:'http://cm.yimg.com/i/yui/3.0.0/build/',
root:"",
comboBase:"/combo?f=",
charset:'utf-8',
timeout:1000,
loadOptional:true,
filter: {
'searchExp': "&i",
'replaceStr': ",i"
},
modules:{
'slider':{
fullpath:'http://www.microidc.com/demo/yui3-slider/slider.js',
type:'js'
}
}
}).use('node','anim','slider',function(Y) {
//第一个幻灯
new Y.Slider('demo1');
//第二个幻灯
var Demo2 = new Y.Slider('demo2',{eventype:'mouseover',effect:'fade',animtype:'easeOutStrong'});
Y.on('click',function(){Demo2.next()},Y.one('#next'));
Y.on('click',function(){Demo2.pre()},Y.one('#pre'));
Y.on('click',function(e){
var el = e.target;
if(el.hasClass('selected')){
el.removeClass('selected');
el.set('innerHTML','停止')
Demo2.start();
}else{
el.addClass('selected');
el.set('innerHTML','播放');
Demo2.stop();
}
},Y.one('#stop'));
//设置跳转
Y.on('click',function(){
Demo2.view(3)
},Y.one('#goto'));
});
</script>
</body>
</html>
Javascript教程
相关文章
精彩导读
热门资讯
关注我们
