日期:2014-05-16 浏览次数:20406 次
<!doctype html> <html> <head> <meta charset="gbk"/> <title>Demo - 使用基本的 Switchable</title> <script src="http://docs.kissyui.com/kissy/build/kissy.js"></script> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/kissy.css" /> <style> #J_Slide { position: relative; width: 470px; height: 150px; border: 1px solid #B6D1E6; overflow: hidden; } #J_Slide .ks-switchable-nav { position: absolute; bottom: 5px; right: 5px; z-index: 99; } #J_Slide .ks-switchable-nav li { float: left; width: 16px; height: 16px; line-height: 16px; margin-left: 3px; background-color: #FCF2CF; border: 1px solid #F47500; color: #D94B01; text-align: center; cursor: pointer; list-style: none; } #J_Slide .ks-switchable-nav li.ks-active { width: 18px; height: 18px; line-height: 18px; margin-top: -1px; color: #FFF; background-color: #FFB442; font-weight: bold; } #J_Slide .ks-switchable-content { margin: 0; padding: 0; } #J_Slide .ks-switchable-content li { height: 150px; width: 470px; overflow: hidden; margin: 0; } #J_Slide .ks-switchable-nav li, #J_Slide .ks-switchable-trigger-content { position: relative; } #J_Slide .ks-switchable-trigger-mask { position: absolute; right: 0; width: 18px; height: 18px; background-color: #FF9415; visibility: hidden } #J_Slide .ks-active .ks-switchable-trigger-mask { visibility: visible } .list li { margin-left: 10px; margin-top: 5px; margin-bottom: 5px; list-style-type: circle; } </style> </head> <body> <div class="demo"> <div id="J_Slide" class="loading"> <ol class="ks-switchable-content"> <li><a href="#" target="_blank"><img alt="" src="http://www.baidu.com/img/baidu_sylogo1.gif"/></a></li> <li class="hidden"><a target="_blank" href="#"><img alt="" width="470" height="150" border="0" src="http://www.baidu.com/img/baidu_sylogo1.gif"/></a></li> <li class="hidden"><a target="_blank" href="#"><img alt="" width="470" height="150" border="0" src="http://www.baidu.com/img/baidu_sylogo1.gif"/></a></li> <li class="hidden"><a href="#" target="_blank"><img alt="" src="http://www.baidu.com/img/baidu_sylogo1.gif"/></a></li> </ol> </div> <script> KISSY.use("switchable", function (S, Switchable) { var s = new Switchable.Slide('#J_Slide', { effect : 'scrolly', easing : 'easeOutStrong', countdown : true, countdownFromStyle : 'width:18px' }); }); </script> </div> </body> </html>