myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片。
官方网址:http://keleyi.com/jq/myslider/
参考:http://plugins.jquery.com/myslider/
例子代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>myslider</title><base target="_blank" /> 5 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script> 6 <link href="http://keleyi.com/jq/myslider/css/jquery.myslider.0.1.2.css" type="text/css" rel="Stylesheet" /> 7 <script type="text/javascript" src="http://keleyi.com/jq/myslider/js/jquery.myslider.0.1.2.js"></script> 8 </head> 9 <body> 10 11 <div style="width:300px;margin:10px auto;"><h2>myslider 0.1.2 demo</h2></div> 12 <div id="myslider_keleyi_com" class="keleyimyslider" style="margin:0px auto;"> 13 <ul> 14 <li>Myslider is a jquery plugin.</li> 15 <li>Very simple to use.</li> 16 <li><a href="http://keleyi.com/jq/myslider/"><img src="http://keleyi.com/jq/myslider/img/myslider.jpg" alt="myslider" /></a></li> 17 <li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li> 18 <li>It make content scroll.</li> 19 <li><a href="http://keleyi.com/keleyi/">Keleyi Menu Home</a></li> 20 <li><a href="http://plugins.jquery.com/myslider/">jquery plugin</a></li> 21 <li><a href="http://keleyi.com/jq/myslider/">myslider</a></li> 22 <li>http://keleyi.com/jq/myslider/</li> 23 <li>This is a myslider demo.</li> 24 </ul> 25 </div> 26 <script type="text/javascript"> 27 $("#myslider_keleyi_com").myslider({ "width": "500px" 28 , "height": "200px" 29 , "millisec": "3000" 30 , "fontSize": "30px" 31 , "direction": "down" 32 }); 33 </script> 34 <div><a href="http://keleyi.com">home</a> <a href="http://keleyi.com/jq/myslider/demo1/">demo 0.1.0</a> <a href="http://keleyi.com/jq/myslider/demo/2.htm">demo 0.1.1</a></div> 35 36 </body> 37 </html>