Jq seamless rolling effect plug-in (the upgraded enhanced version earlier) and jq upgrade and Transformation
Scroll plug-in
Supports upper, lower, left, and right, fade in and out, scroll time settings, animation time settings, and whether or not to stop the mouse setting
Default configuration parameters can be modified
$ (". Content "). easysroll ({// Default Configuration Parameter direction: "left", // left (left) right (right) top (up) bottom (down) default left numberr: "1", // The default number of scrolling times is 1 delays: "1000", // The default time required to complete an animation is 1000 or equal to 1 second scrolling: "1000 ", // The default interval between each animation is 1000 or equal to 1 second fadein: false, // whether to support fade in or fade out; default value: false enterStop: true // specifies whether to pause scroll during mouse movement. The default value is true })
<! DOCTYPE html>
(Function ($) {$. fn. easysroll = function (options) {var parameter = {direction: "left", numberr: "1", delays: "1000", scrolling: "1000", fadein: false, enterStop: true}; var ops = $. extend (parameter, options); var $ this = $ (this); var _ this = this; var _ time = null; var obj = _ this. find ("[type = 'box']"); var items = obj. find ("li"); var itemsleg = items. length; var itemsW = items. outerWidth (true); var itemsH = items. outerHeight (true); var _ direction = ops. direction; var _ numberr = ops. numberr; var _ delays = ops. delays; var _ scrolling = ops. scrolling; var _ fadein = ops. fadein; var _ enterStop = ops. enterStop; if (_ direction = "top" | _ direction = "bottom" extends items.css ({"float": "none"}); obj. width (itemsW * itemsleg); if (_ direction = "bottom") Export obj.css ("margin-top",-_ numberr * itemsH );}} else if (_ direction = "left" | _ direction = "right" has multiple items.css ({"float": "left"}); obj. width (itemsW * itemsleg); if (_ direction = "right") Export obj.css ("margin-left",-_ numberr * itemsW );}} else {alert ("the rolling direction you configured is incorrect, please reconfigure"); return true;} function scroll () {if (_ direction = "left") {obj. animate ({"margin-left":-_ numberr * itemsW}, Number (_ delays), function () {for (var I = 0; I <_ numberr; I ++) {obj. find ("li" ).eq(0).appendto(obj1_1_1_obj.css ({"margin-left": 0}) if (_ fadein) {obj. find ("li "). eq (0 ). animate ({"opacity": 0}, Number (_ delays); obj. find ("li" 2.16.eq(itemsleg-12.16.css ({"opacity": 1}) ;}} else if (_ direction = "right") {obj. animate ({"margin-left": 0}, Number (_ delays), function () {for (var I = 0; I <_ numberr; I ++) {obj. find ("li" ).eq(itemsleg-1).prependto(obj?##obj.css ("margin-left",-_ numberr * itemsW); if (_ fadein) {obj. find ("li "). eq (0 ). animate ({"opacity": 1}, Number (_ delays); obj. find ("li" 2.16.eq(itemsleg-12.16.css ({"opacity": 0}) ;}} else if (_ direction = "top") {obj. animate ({"margin-top":-_ numberr * itemsH}, Number (_ delays), function () {for (var I = 0; I <_ numberr; I ++) {obj. find ("li" ).eq(0).appendto(obj1_1_1_obj.css ({"margin-top": 0}); if (_ fadein) {obj. find ("li "). eq (0 ). animate ({"opacity": 0}, Number (_ delays); obj. find ("li" 2.16.eq(itemsleg-12.16.css ({"opacity": 1}) ;}} else if (_ direction = "bottom") {obj. animate ({"margin-top": 0}, Number (_ delays), function () {for (var I = 0; I <_ numberr; I ++) {obj. find ("li" ).eq(itemsleg-1).prependto(obj?#}obj.css ("margin-top",-_ numberr * itemsH); if (_ fadein) {obj. find ("li "). eq (0 ). animate ({"opacity": 1}, Number (_ delays); obj. find ("li" 2.16.eq(itemsleg-12.16.css ({"opacity": 0}) ;}}}$ this. hover (function () {if (_ enterStop) {clearInterval (_ time) ;}, function () {_ time = setInterval (scroll, _ scrolling );}). trigger ('mouseleave ') ;}} (jQuery );
Address + demo: http://www.divjs.cn/front/javascript/157.html
Dark Horse front-end network: http://www.divjs.cn/