你的位置:首页 > 软件开发 > Java > jQuery插件开发之boxScroll与marquee

jQuery插件开发之boxScroll与marquee

发布时间:2015-07-13 21:00:49
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 (#换成@)。

可能感兴趣文章

我的浏览记录