Oneself imitate the writing of JQ Plug-in wrote a circular scrolling list plug-in, support custom up, down, left, right four directions, support smooth scrolling or discontinuous scrolling two ways, are through the parameter setting. There are some repetitions in the JQ, and there is no better way to streamline it for the time being. However, the effect is still possible, as follows (the effect of the image upload is accelerated, the actual effect is much slower than this):
The HTML code is as follows:
<!doctype html>
CSS styles are as follows:
@charset "Utf-8";
/* Simple Reset * * * * body, UL, Li {margin:0;
padding:0;
Body {font:14px/24px Microsoft Yahei;
Color: #333;
} ul {List-style:none;} a {color: #333;
Outline:none;
Text-decoration:none;
} a:hover {color: #2986dd;} img {border:none}. clearfix:after {Visibility:hidden;
Display:block;
font-size:0;
Content: "";
Clear:both;
height:0;
} clear {Display:block;
Clear:both;
height:0;
font-size:0;
line-height:0;
Content: ".";
Overflow:hidden;
}. Wrap {width:900px;
padding-top:30px;
margin:0 Auto;
}. boxs {padding:15px;
margin:0 Auto 30px;
Background-color: #e4fbff;
}. box01 {width:870px}. box02 {float:left;
width:400px;
}. box03 {float:right;
width:400px; }. box04 {width:720px}///////////////* General required style * * PS: Some important styles in JS first written, the following ID container, UL and Li tag style is more important. autobox {P
osition:relative;
margin:0 Auto;
Overflow:hidden;
}. autobox ul {position:absolute;
List-style:none;
Z-index:2; }/* First to fourth columnTable/* PS: The left and right scrolling list needs CSS definition height, li tag can have margin value * * #autoScroll01, #autoScroll04 {width:auto;
height:174px;
#autoScroll01 ul Li, #autoScroll04 ul li {float:left;
width:128px;
height:168px;
padding:3px;
Margin:0 5px;
_display:inline;
#autoScroll01 Li A, #autoScroll04 li a {display:block;
padding:3px;
border:1px solid #dbdbdb;
box-shadow:0 0 3px Rgba (170, 223, 252, 0.5);
#autoScroll01 li A:hover, #autoScroll04 li a:hover {border-color: #71ddff;
box-shadow:0 0 3px Rgba (77, 185, 245,. 90);
#autoScroll01 li img, #autoScroll04 li img {display:block;
width:120px;
height:160px;
/* Second to Third list * * * * PS: Up and down scrolling list needs CSS definition width, Li label as far as possible do not set margin value/#autoScroll02, #autoScroll03 {width:100%;
Height:auto;
#autoScroll02 ul li {height:30px;
line-height:30px;
Overflow:hidden;
#autoScroll03 ul li {height:40px;
line-height:40px;
Overflow:hidden;
#autoScroll02 Li A, #autoScroll03 li a {display:block;
width:100%;
height:24px; Line-height:24px;
MARGIN:3PX 0;
Text-overflow:ellipsis;
White-space:nowrap;
Overflow:hidden; #autoScroll03 Li a {margin:8px 0;}
The
JS code is as follows:
/** * Name: Circular scrolling list **/(function (jQuery) {$.fn.autoscroll = function (o) {o = $.extend ({//set default parameter
Direction: ' Left ', Interval:null, Speed:null, Distance:null, Liwidth:null, Liheight:null, Shownum:null},o | |
{});
Return This.each (function () {//callback start var $ts = $ (this), $ul = $ts. Children ("ul"), $li = $ul. Children ("Li"),
Len = $li. length; if (o.direction = = ' Up ' | | | o.direction = ' down ') {//Set CSS $ts according to type. CSS ({"width": "100%", "height": O.shownum * O.L
Iheight});
$ul. css ({"width": "100%", "height": Len * o.liheight});
$li. css ({"Float": "None", "width": "100%", "height": o.liheight, "margin": 0, "padding": 0});
};
if (o.direction = = ' Left ' | | | o.direction = = ' right ') {//In fact, you can also write in CSS $ts. css ({"width": O.shownum * o.liwidth});
$ul. css ({"width": Len * o.liwidth});
$li. css ({"float": "Left"});
}; Switch (o.direction) {//is divided into four kinds of cases, the event call case ' LeFT ': sroleft ();
Break
Case ' right ': sroright ();
Break
Case ' up ': Sroup ();
Break
Case ' down ': Srodown ();
Break
};
function Sroleft () {//Left scrolls the event $ul. CSS ("Ieft", 0);
var left;
function leftmoving () {var dis =-o.distance, dif =-o.liwidth * (len-o.shownum);
left = parsefloat ($ul. css (' left '));
if (left <= dif) {$ul. css (' left ', 0);
left = 0;
$ul. Delay (O.interval);
};
var Ltdis = left + dis;
if (Ltdis <= dif) {Ltdis = dif;
};
$ul. Animate ({"Left": ltdis+ "px"}, O.speed);
};
$ul. Hover (///////stop and resume scrolling function () {clearinterval (fnleft) with mouse move up and down;
The function () {fnleft = SetInterval (function () {leftmoving ()}, O.interval);
}
);
Fnleft = setinterval (function () {leftmoving ()}, O.interval);
};
function Sroright () {//scroll to the right $ul. CSS ("OK", 0);
var right; function rightmoving () {var dis =-o.distance, dif =-o.liwidth * (len-o.shownum);
right = parsefloat ($ul. css (' right '));
if (right <= dif) {$ul. css (' right ', 0);
right = 0;
$ul. Delay (O.interval);
};
var Rtdis = right + dis;
if (Rtdis <= dif) {Rtdis = dif;
};
$ul. Animate ({"Right": rtdis+ "px"}, O.speed);
};
$ul. Hover (function () {clearinterval (fnright);
The function () {fnright = SetInterval (function () {rightmoving ()}, O.interval);
}
);
Fnright = setinterval (function () {rightmoving ()}, O.interval);
};
function Sroup () {//scroll up event $ul. CSS ("top", 0);
var top;
function upmoving () {var dis =-o.distance, dif =-o.liheight * (len-o.shownum);
top = parsefloat ($ul. CSS (' top '));
if (top <= dif) {$ul. css (' top ', 0);
top = 0;
$ul. Delay (O.interval);
};
var Tpdis = top + dis;
if (Tpdis <= dif) {Tpdis = dif;
}; $ul. AnimAte ({"Top": tpdis+ "px"}, O.speed);
};
$ul. Hover (function () {clearinterval (fnup);
The function () {fnup = SetInterval (function () {upmoving ()}, O.interval);
}
);
Fnup = setinterval (function () {upmoving ()}, O.interval);
};
function Srodown () {//scrolling down event $ul. CSS ("bottom", 0);
var bottom;
function downmoving () {var dis =-o.distance, dif =-o.liheight * (len-o.shownum);
Bottom = parsefloat ($ul. CSS ("bottom"));
if (bottom <= dif) {$ul. css ("bottom", 0);
bottom = 0;
$ul. Delay (O.interval);
};
var bmdis = bottom + dis;
if (Bmdis <= dif) {Bmdis = dif;
};
$ul. Animate ({"Bottom": bmdis+ "px"}, O.speed);
};
$ul. Hover (function () {clearinterval (Fndown);
The function () {Fndown = SetInterval (function () {downmoving ()}, O.interval);
}
);
Fndown = setinterval (function () {downmoving ()}, O.interval);
};
});
}; }) (JqueRY);
The
is compatible with the IE6+,JQ library 1.7+ is fine.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
