如何封装单页面多个无缝滚动的jquery代码?

新手上路,请多包涵

各位大神,本人新手。有一问题想请教一下大家:如下:

先来看下效果图:
图片描述

滚动要求:

滚动一横则停止大概1秒吧,然后继续,循环。鼠标移过去则停止。移开则继续。

要实现无缝滚动的话地方有:

1:供应产品的产品列表

2:求购产品的产品列表。

========================================
目前以上功能在单个产品列表下已实现。也是网上找的代码,自行修改class的。

但是有多个地方需要用到这个滚动。(再复制一个就出错了,数据全滚动到一起来了。)

如果调用不同class 代码太多了,所以要如何封装一下呢?

====================================================
DOM结构图如下载
图片描述

.pdt-scroll-box1
.pdt-scroll-box2 这两个div是滚动层。
.pdt-content-box 是每横的产品信息层。
.pdt-table-box 是每个红色按钮tab的层。

===============================================

以下是无缝滚动的jquery代码

//--供求列表滚动动画暂停插件
(function(){var e=jQuery,f="jQuery.pause",d=1,b=e.fn.animate,a={};function c(){return new Date().getTime()}e.fn.animate=function(k,h,j,i){var g=e.speed(h,j,i);g.complete=g.old;return this.each(function(){if(!this[f]){this[f]=d++}var l=e.extend({},g);b.apply(e(this),[k,e.extend({},l)]);a[this[f]]={run:true,prop:k,opt:l,start:c(),done:0}})};e.fn.pause=function(){return this.each(function(){if(!this[f]){this[f]=d++}var g=a[this[f]];if(g&&g.run){g.done+=c()-g.start;if(g.done>g.opt.duration){delete a[this[f]]}else{e(this).stop();g.run=false}}})};e.fn.resume=function(){return this.each(function(){if(!this[f]){this[f]=d++}var g=a[this[f]];if(g&&!g.run){g.opt.duration-=g.done;g.done=0;g.run=true;g.start=c();b.apply(e(this),[g.prop,e.extend({},g.opt)])}})}})();

//控制代码
$(function () {
    var scrtime;
    var $ul = $(".pdt-scroll-box1 .pdt-scroll-box2");
    var liFirstHeight = $ul.find("div:first").height();//第一个li的高度
    $ul.css({ top: "-" + liFirstHeight - 0 + "px" });//利用css的top属性将第一个li隐藏在列表上方     0是li的padding值

    $(".pdt-scroll-box1").hover(function () {
        $ul.pause();//暂停动画
        clearInterval(scrtime);
    }, function () {
        $ul.resume();//恢复播放动画    
        scrtime = setInterval(function scrolllist() {
            //动画形式展现第一个li
            $ul.animate({ top: 0 + "px" }, 1500, function () {
                //动画完成时
                $ul.find("div:last").prependTo($ul);//将ul的最后一个剪切li插入为ul的第一个li
                liFirstHeight = $ul.find("div:first").height();//刚插入的li的高度
                $ul.css({ top: "-" + liFirstHeight - 0 + "px" });//利用css的top属性将刚插入的li隐藏在列表上方  0是li的padding值                    
            });
        }, 3300);

    }).trigger("mouseleave");//通过trigger("mouseleave")函数来触发hover事件的第2个函数

});

所以总结下来,应该就是:

**控制代码这块,如何封装一下?然后哪个地方要用就用不同class?
或者其它实现方法,自动生成class?**

阅读 1.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进