JSSDK组件图片左右切换效果-20131012
1、效果及功能说明
jssdk组件的页面左右切换效果
2、实现原理
是通过计算每次显示区域的为多少从而做出左右移动的效果
主要的方法
5是移动的数量 500是移动显示出来的距离有多少 fales是能不能重复移动
var carousel = new Carousel('#demo6', { effect: 'scrollx', easing: 'easeOutStrong', steps: 5, viewSize: [500], circular: false, prevBtnCls: 'prev', nextBtnCls: 'next', //autoplay:true,//是否自动切换 disableBtnCls: 'disable', lazyDataType: 'img-src' });
<!DOCTYPE HTML><html><head><style> .s-demo{overflow:hidden;text-overflow:ellipsis; width:550px; height: 200px;} .ks-switchable-nav{position:relative; top: 20px; left: 200px;}</style></head><body><div id="demo6" src="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" src="http://img02.taobaocdn.com/tps/i2/T1.XGaXalnXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" src="http://img04.taobaocdn.com/tps/i4/T1oEmXXmVoXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" src="http://img04.taobaocdn.com/tps/i4/T1oEmXXmVoXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" src="http://img03.taobaocdn.com/tps/i3/T1Hm1XXipvXXXXXXXX-110-135.png"/> <!-- 5-10 --> <img id='carousel_lazy1' alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <!-- 10-15 --> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> <img alt="JSSDK组件图片上下切换效果-20131012" data-ks-lazyload-custom="http://img02.taobaocdn.com/tps/i2/T1l_yXXiFyXXXXXXXX-110-135.png"/> </div> </div></div></body><script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script><script>KISSY.use("event,switchable,datalazyload,node", function(S, Event,Switchable) { var Carousel = Switchable.Carousel; S.ready(function(S) { //通过DOM元素新建旋转木马 var carousel = new Carousel('#demo6', { effect: 'scrollx', easing: 'easeOutStrong', steps: 5, viewSize: [500], circular: false, prevBtnCls: 'prev', nextBtnCls: 'next', //autoplay:true,//是否自动切换 disableBtnCls: 'disable', lazyDataType: 'img-src' }); carousel.on('itemSelected', function(ev) { alert('I am selected. src = ' + ev.item.src); }); window.carousel = carousel; });});</script>