用jquery实现两个li中的图片并列无缝向上滚动的代码 没有按钮控制,鼠标...

发布网友 发布时间：2022-04-28 16:41

我来回答

共1个回答

热心网友 时间：2022-04-22 19:00

下面的使用Jquery实现，使用的时候请引用Jquery.js，向上滚动看看js那里提示修改left为up即可。

<script>

$.fn.imgscroll = function(o){
var defaults = {
speed: 40,
amount: 0,
width: 1,
dir: "left"
};
o = $.extend(defaults, o);

return this.each(function(){
var _li = $("li", this);
_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
_li.css({position: "relative", overflow: "hidden"}); //li
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: 40,    //图片滚动速度
amount: 0,    //图片滚动过渡时间
width: 1,     //图片滚动步数
dir: "left"   // "left" 或 "up" 向左或向上滚动
});

});

</script>

<div class="scrollleft">
                        <ul>
                            <li>
                                <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                            </li>
                            <li>
                                <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                            </li>
                              <li>
                                <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                            </li>
                              <li>
                                <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                            </li>
                              <li>
                                <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                            </li>
                              <li>
                                <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                            </li>
                              <li>
                                <a href="#"><img src="images/img4.gif" width="188" height="106" /><div class="mingcheng">该产品名称</div></a>
                            </li>
                        </ul>
                    </div>

追问怎么一遍也没滚动到头 就闪现到第二遍了？也不是无缝啊

追答固定的宽度的大小，你所放的图片至少要大于当前的宽度，图片中有间距你只要改样式就行了