<div class="container"> <div class="row"> <div class="col-md-4 tb"> <ul class="box list-unstyled"> <li> <a href="#">新聞</a> </li> <li> <a href="#">體育</a> </li> <li> <a href="#">歌曲</a> </li> <li> <a href="#">文藝</a> </li> </ul> </div> <div class="col-md-8 lr"> <ul class="box1 list-unstyled list-inline"> <li> <a href="#">新聞</a> </li> <li> <a href="#">體育</a> </li> <li> <a href="#">歌曲</a> </li> <li> <a href="#">文藝</a> </li> </ul> </div> </div> </div>
<style> .tb { height: 30px; overflow: hidden; } .tb ul li { height: 30px; line-height: 30px; background: #999; text-align: center; font-size: 14px; } .lr { padding: 0; } .lr ul li { padding: 0; font-size: 14px; line-height: 30px; background: #999; text-align: center; } </style>
<script> ; (function($, window, docuemnt, undefined) { $.fn.autoScroll = function(config) { /*config*/ config = $.extend({}, $.fn.autoScroll.defaults, config); /*this*/ var $ele = this; $ele.css({ "font-size" : "0" }).parent().css({ "overflow" : "hidden" }); if (config.direction == 2) { $ele.width($ele.parent().width() * $ele.children().size()); $ele.children().width($ele.parent().width()); } /*function*/ function run() { $ele.children().eq(0).click( function() { console.info(this); var m_d = ""; var m_d_d = 0; switch (config.direction) { case 1: m_d = "marginTop"; m_d_d = $(this).height(); break; case 2: m_d = "marginLeft"; m_d_d = $(this).width(); break; default: m_d = "marginTop"; m_d_d = $(this).height(); break; } var animateConfig = $.parseJSON('{\"' + m_d + '\":\"-' + m_d_d + 'px\"}'); var cssConfig = $.parseJSON('{\"' + m_d + '\":0}'); $(this).stop().animate(animateConfig, config.speed, function() { var appendEle = $(this).css(cssConfig); $(this).remove(); $ele.append(appendEle); }); }).click(); } /*自動運行*/ var autoRun = setInterval(run, config.delay); /*hover*/ $ele.hover(function() { clearInterval(autoRun); }, function() { autoRun = setInterval(run, config.delay); }); }; $.fn.autoScroll.defaults = { "delay" : 5000, "speed" : 800, "direction" : 1//1向上,2向左 }; })(jQuery, window, document); $(function() { $(".box").autoScroll(); $(".box1").autoScroll({ "direction" : 2 }); }); </script>