BoxScroll
常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单，下面的Marquee形成环，这个到了尽头得往回跑，看看注释就知道了。
图片轮播GitHub:https://github.com/codetker/myBoxScroll。具体演示:http://www.梦萦无双.xyz/myBoxScroll/demo/Default.html。
插件效果： 实现常见的盒子图片滚动效果（或称图片轮播） 可修改后附加缓动函数，实现多种效果，详情见缓动函数表 http://easings.net/zh-cn#easeInOutQuad Github https://github.com/codetker/TokenFamily
注：使用scroll-left或scroll-top的时候值只能是正数，内层必须宽度或者高度大于外层以实现scroll效果。使用margin时直接移动ul窗口来实现里面li的显示，可以在两端添加特殊效果(margin允许负值)。 html 结构(ZenCoding形式)
-div.divClass -div.toLeft -div.toRight -ul.ulClass -li.liClass*n
-ul.controlUl -li*n
其中div.toLeft，div.toRight,ul.controlUl可选 调用方法(详情见demo)(按需设置参数) A.divClass调用时style为1，采用scroll-left
$(".divClass").boxScroll({ 'liHover': 'liSelected', //设置控制滚动的类名 'child': 'li', //实际移动元素,默认为li元素 'style': 1, //默认为0,为margin-left，1则为scroll-left 'stepTime': 1, //每次运动经历的时间，单位s,默认为1s 'direction': 'right', //运动的方向，默认为right 'toLeft': '.arrowLeft', //向左运动按钮，默认为null 'toRight': '.arrowRight', //向右运动按钮，默认为null 'ControlUl': '.picControl ul', //控制运动按钮，默认为null 'circle': true, //是否自动滚动，默认true 'circleTime': 5 //自动滚动时间间隔，默认5s });B.ulClass调用时style为0，采用margin-left
$(".ulClass").boxScroll({ 'liHover': 'liSelected', //设置控制滚动的类名 'child': 'li', //实际移动元素,默认为li元素 'style': 0, //默认为0,为margin-left 'stepTime': 1, //每次运动经历的时间，单位s,默认为1s 'direction': 'right', //运动的方向，默认为right 'toLeft': '.arrowLeft', //向左运动按钮，默认为null 'toRight': '.arrowRight', //向右运动按钮，默认为null 'ControlUl': '.picControl ul', //控制运动按钮，默认为null 'circle': true, //是否自动滚动，默认true 'circleTime': 5 //自动滚动时间间隔，默认5s });C.div.Class or Ul.Class调用时style为1，采用fadeIn and FadeOut
$(".picInnerBox").boxScroll({ 'liHover': 'liSelected', //设置控制滚动的类名 'child': 'li', //实际变化元素,默认为li元素 'style': 2, //2为fadeIn and fadeOut 'direction': 'right', //滚动方向 'toLeft': '.arrowLeft', //向左运动按钮，默认为null,为了避免快速多次点击，设置点击间隔时间至少0.8s 'toRight': '.arrowRight', //向右运动按钮，默认为null,为了避免快速多次点击，设置点击间隔时间至少0.8s 'ControlUl': '.picControl ul', //控制运动按钮，默认为null 'circle': true, //是否自动变化，默认true 'circleTime': 5, //自动变化时间间隔，默认5s 'fadeInTime': 300, //fadeIn时间设置 'fadeOutTime': 400 //fadeOut时间设置 });运行demo 最简单的方法为改Default.html中jquery对应script元素的src为本地的jquery(离线)或CDN中的jquery(在线),然后双击Default.html即可或者配置myBoxScroll.jquery.json or package.json
PS: 为了使插件总大小较小、代码复用，将A,B,C三种情况集中在一起，封装为一个原型上的方法，内部依据style控制选择。 也可以改为多个方法在绑定到jquery原型上时用style判断对应执行，以减少多余变量和不必要的判断。
Demo代码如下:
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="../src/jquery-1.9.1.min.js"></script><script type="text/Javascript" src="../src/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/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </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() { /*$(".picOuterBox").boxScroll({ 'liHover':'liSelected', 'child': 'li', 'style': 1, 'stepTime': 1, 'direction': 'right', 'toLeft': '.arrowLeft', 'toRight': '.arrowRight', 'ControlUl': '.picControl ul', 'cicle': true, 'circleTime': 5 });*/ $(".picInnerBox").boxScroll({ 'liHover': 'liSelected', 'child': 'li', 'style': 0, 'stepTime': 1, 'direction': 'right', 'toLeft': '.arrowLeft', 'toRight': '.arrowRight', 'ControlUl': '.picControl ul', 'circle': true, 'circleTime': 5 }); /*$(".picInnerBox").boxScroll({ 'liHover': 'liSelected', 'child': 'li', 'style': 2, 'direction': 'right', 'toLeft': '.arrowLeft', 'toRight': '.arrowRight', 'ControlUl': '.picControl ul', 'circle': true, 'circleTime': 5, 'fadeInTime': 300, 'fadeOutTime': 400 });*/ });</script></body></html>View Code HTML
CSS
@charset "utf-8";/* CSS Document *//* to make it better to see *//* as whole */ body{ margin : 0 0; padding: 0 0; height : 100%; width : 100%; } .wrap{ font-family: "微软雅黑","宋体", Times, "Times New Roman", serif; font-size : 14px; margin : 0 0; padding : 0 0; height : 100%; width : 100%; overflow : hidden; }/* as whole end *//* innerBox */ .boxStyle{ width : 500px; height: 256px; } .scrollBox{ position: relative; width : 500px; margin : 0 auto; } .picInnerBox{ width : 10000px; overflow: hidden; } .picInnerBox li{ cursor: pointer; float : left; } .picOuterBox{ overflow:
新闻热点
疑难解答
