<div class="wrap scrollleft" style="height: 475px;">
<ul>
<li><img id="msgSpan" src="views/images1/lunbosan.png" alt="fsdf"
height="85.5px" width="100%"></li>
<li><img id="msgSpan2" src="views/images1/lunbosan.png" alt="fsdfs"
height="85.5px" width="100%"></li>
<li><img id="msgSpan3" src="views/images1/lunbosan.png" alt="fsd"
height="85.5px" width="100%"></li>
<li><img id="msgSpan4" src="views/images1/lunbosan.png" alt="fdsfds"
height="85.5px" width="100%"></li>
</ul>
</div>
<script>
$.fn.imgscroll = function (o) {
var defaults = {
speed: 20,
amount: 1,
width: 1,
dir: "up"
};
o = $.extend(defaults, o);
return this.each(function () {
var _li = $("li", this);
_li.parent().parent().css({
overflow: "hidden",
position: "relative"
});
_li.parent().css({
margin: "0",
padding: "0",
overflow: "hidden",
position: "relative",
"list-style": "none"
});
_li.css({
position: "relative",
overflow: "hidden"
});
if (o.dir == "left") _li.css({
float: "left"
});
var _li_size = 0;
for (var i = 0; i < _li.size(); i++)
_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);
if (o.dir == "left") _li.parent().css({
width: (_li_size * 3) + "px"
});
_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
_li = $("li", this);
var _li_scroll = 0;
function goto() {
_li_scroll += o.width;
if (_li_scroll > _li_size) {
_li_scroll = 0;
_li.parent().css(o.dir == "left" ? {
left: -_li_scroll
} : {
top: -_li_scroll
});
_li_scroll += o.width;
}
_li.parent().animate(o.dir == "left" ? {
left: -_li_scroll
} : {
top: -_li_scroll
}, o.amount);
}
var move = setInterval(function () {
goto();
}, o.speed);
_li.parent().hover(function () {
clearInterval(move);
}, function () {
clearInterval(move);
move = setInterval(function () {
goto();
}, o.speed);
});
});
};
$(document).ready(function () {
$(".scrollleft").imgscroll({
speed: 20,
amount: 1,
width: 1,
dir: "up"
});
});
console.log("文字轮播")
</script>