<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>