JavaScript Uninterrupted picture Scrolling code

Source: Internet
Author: User
Tags eval setinterval time interval

JavaScript Uninterrupted picture Scrolling code

Speed (ms)
var Speed = 10;
Per move (px)
var space = 5;
Width per page
var pagewidth = 132;
Overall shift (PX)
var fill = 0;
Whether to move automatically, true moves, false does not move
var movelock = false;
Move Time Object
var movetimeobj;
Flip the variable, when the comp is less than 0 to flip on the reverse for the next flip
var Comp = 0;
Move objects up and down
var autoplayobj = null;
Assign all elements in the Div List1 to the Div list2
Getobj ("List2"). InnerHTML = Getobj ("List1"). InnerHTML;
Move left
Getobj (' Isl_cont '). scrollleft = fill;
Bind the mouse to the Div isl_cont to move the event at the top of the Div, the event is cleared to play automatically when the mouse moves to the DIV picture time will be canceled automatically
Getobj ("Isl_cont"). onmouseover = function () {clearinterval (autoplayobj);}
To the div isl_cont bind the mouse to move the top of the div time, the event is bound to play automatically, when the mouse moves the div picture time will start automatic time interval automatically play
Getobj ("Isl_cont"). onmouseout = function () {autoplay ();}
First time come in default binding to AutoPlay
AutoPlay ();
/*
Gets the specified HTML object
*/
function Getobj (objname) {
Determine if there is a valid element tag in the current page, document.getElementById compatible with Firefox
if (document.getElementById)
{
Return eval (' document.getElementById (' +objname+ ') ')
}
Else
{
Return eval (' document.all. ') +objname)
}
}
/*
Automatic scrolling
*/
function AutoPlay () {
Clears the previously bound interval time scrolling
Clearinterval (Autoplayobj);
Rebind interval scrolling, setinterval () method is binding at a specified time, Clearinterval () method is to clear the specified time bound object
Autoplayobj = SetInterval (' Isl_godown (); Isl_stopdown (); ', 5000);
}
/*
Start over.
*/
function Isl_goup () {
If you are currently playing AutoPlay, the following code will not be executed
if (Movelock)
Return
Clears the previously bound interval time scrolling
Clearinterval (Autoplayobj);
Movelock = true;
Automatically moves to the left at a specified time
Movetimeobj = SetInterval (' Isl_scrup (); ', Speed);
}
/*
Turn it off.
*/
function Isl_stopup () {
Clears the previously bound interval time scrolling
Clearinterval (Movetimeobj);
To determine whether the current view of the DIV to do the margin is the first product picture, not equal to 0 is not the first, the other is equal to the first picture
if (getobj (' Isl_cont '). ScrollLeft% pagewidth-fill!= 0)
{
Div left margin move
Comp = Fill-(Getobj (' Isl_cont '). ScrollLeft% pagewidth);
Start moving
COMPSCR ();
}else
{
Movelock = false;
}
Auto Play
AutoPlay ();
}
/*
Turn up action
*/
function Isl_scrup () {
If the current picture's large div left margin is less than 0 then its margin equals its own margin plus the width of the click button on the left
if (getobj (' Isl_cont '). ScrollLeft <= 0)
{
Getobj (' Isl_cont '). ScrollLeft = Getobj (' Isl_cont '). ScrollLeft + getobj (' List1 '). offsetwidth;
}
Move to the left.
Getobj (' Isl_cont '). ScrollLeft = space;
}
/*
Turn down
*/
function Isl_godown () {
Clears the previously bound interval time scrolling
Clearinterval (Movetimeobj);
If you are currently playing AutoPlay, the following code will not be executed
if (Movelock)
Return
Clear Auto Play
Clearinterval (Autoplayobj);
Movelock = true;
Method of turning down
Isl_scrdown ();
Automatically moves to the right at a specified time
Movetimeobj = SetInterval (' Isl_scrdown () ', Speed);
}
/*
Down Turn stop
*/
function Isl_stopdown () {
Clears the previously bound interval time scrolling
Clearinterval (Movetimeobj);
If the current picture's large div left margin is less than 0 then its margin equals its own margin plus the width of the click button on the left
if (getobj (' Isl_cont '). ScrollLeft% pagewidth-fill!= 0)
{
Comp = pagewidth-getobj (' Isl_cont '). ScrollLeft% pagewidth + fill;
COMPSCR ();
}else
{
Movelock = false;
}
Start Auto Play
AutoPlay ();
}
/*
Turn down action
*/
function Isl_scrdown () {
if (getobj (' Isl_cont '). ScrollLeft >= getobj (' List1 '). ScrollWidth)
{
Getobj (' Isl_cont '). ScrollLeft = Getobj (' Isl_cont '). Scrollleft-getobj (' List1 '). ScrollWidth;
}
Getobj (' Isl_cont '). ScrollLeft + = space;
}
/*
Left-right mobile control processing
*/
function Compscr () {
var num;
if (Comp = 0)
{
Movelock = false;
Return
}
Go over
if (Comp < 0)
{
if (Comp <-space)
{
Comp + = space;
num = space;
}else
{
num =-comp;
Comp = 0;
}
Getobj (' Isl_cont '). scrollleft = num;
SetTimeout (' Compscr () ', Speed);
}else//Turn down
{
if (Comp > Space)
{
Comp-= space;
num = space;
}else
{
num = Comp;
Comp = 0;
}
Getobj (' Isl_cont '). scrollleft + = num;
SetTimeout (' Compscr () ', Speed);
}
}

<style type= "Text/css" >
. Rollbox
{
width:704px;
Overflow:hidden;
padding:12px 0 5px 6px;
}
. Rollbox. Leftbotton
{
height:52px;
width:19px;
Background:url (jt.gif) no-repeat 11px 0;
Overflow:hidden;
Float:left;
Display:inline;
margin:25px 0 0 0;
Cursor:pointer;
Background-color:blue;
Color:white;
}
. Rollbox. Rightbotton
{
height:52px;
width:20px;
Background:url (jt.gif) no-repeat-8px 0;
Overflow:hidden;
Float:left;
Display:inline;
margin:25px 0 0 0;
Cursor:pointer;
Background-color:blue;
Color:white;
}
. Rollbox. Cont
{
width:663px;
Overflow:hidden;
Float:left;
}
. Rollbox. Scrcont
{
width:10000000px;
}
. Rollbox. Cont. pic
{
width:132px;
Float:left;
Text-align:center;
}
. Rollbox. Cont. pic img
{
padding:4px;
Background: #fff;
border:1px solid #ccc;
Display:block;
margin:0 Auto;
}
. Rollbox. Cont. pic p
{
line-height:26px;
Color: #505050;
}
. Rollbox. Cont A:link, Rollbox. Cont a:visited
{
Color: #626466;
Text-decoration:none;
}
. Rollbox. Cont a:hover
{
Color: #f00;
Text-decoration:underline;
}
. Rollbox #List1,. Rollbox #List2
{
Float:left;
}
</style>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.