BoxScroll 常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单,下面的Marquee形成环,这个到了尽头得往回跑,看看注释就知道了。 代码如下:HTML<!doctype html&g ...
BoxScroll
常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单,下面的Marquee形成环,这个到了尽头得往回跑,看看注释就知道了。
代码如下:
HTML
<!doctype html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="" name="keywords" /><meta content="" name="description" /><meta name="author" content="codetker" /><head><title>简易图片轮播插件</title><link href="style/reset.css" rel="stylesheet" type="text/css"><link href="style/style.css" rel="stylesheet" type="text/css"><script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="js/jquery.codetker.boxScroll.js"></script></head><body> <div class="wrap"> <div class="scrollBox"> <div class="picOuterBox boxStyle"> <div class="arrow arrowLeft">ToLeft</div> <div class="arrow arrowRight">ToRight</div> <ul class="picInnerBox boxStyle"> <li> <a href="" title=""> <img src='/images/loading.gif' data-original="images/test.jpg" > </a> </li> <li> <a href="" title=""> <img src='/images/loading.gif' data-original="images/test.jpg" > </a> </li> <li> <a href="" title=""> <img src='/images/loading.gif' data-original="images/test.jpg" > </a> </li> <li> <a href="" title=""> <img src='/images/loading.gif' data-original="images/test.jpg" > </a> </li> <li> <a href="" title=""> <img src='/images/loading.gif' data-original="images/test.jpg" > </a> </li> </ul> </div> <div class="picControl"> <ul> <li class="liSelected">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div><script type="text/javascript"> $(document).ready(function(){ $(".scrollBox").boxScroll(); });</script></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:jQuery插件开发之boxScroll与marquee
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。