자바스크립트 논스톱 그림 스크롤 및 clickable_image 특수 효과

css:

复代码 代码如下:

html代码

复主代码 代码다운로드:

판매품1

판매품2

판매품3

판매품4

판매품5

판매품6

판매품7

>>>>>>

JS代码

复system代码 代码如下:

//속도 ​(밀리초)
var 속도 ​​= 10;
//매번 이동(px)
var Space = 5; 각 페이지 넘김
var PageWidth = 132;//전체 이동(px)
var fill = 0
//자동으로 이동할지 여부, 이동하려면 true, 이동하지 않으려면 false
var MoveLock = false;//시간 객체 이동
var MoveTimeObj;
//변수를 뒤집고, comp가 0보다 작으면 위로 뒤집히고, 그렇지 않으면 아래로 뒤집힙니다.
var Comp = 0;//객체 위아래로 이동
var AutoPlayObj = null
//div List1의 모든 요소를 ​​div list2에 할당
GetObj("List2").innerHTML = GetObj ("List1").innerHTML;
//왼쪽으로 이동
GetObj('ISL_Cont').scrollLeft = fill;
//마우스가 div 위로 이동할 때 div ISL_Cont를 이벤트에 바인딩합니다. 이벤트가 지워지면 자동으로 재생됩니다.
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj) }
// 마우스가 div 상단에서 멀어지는 시간에 div ISL_Cont를 바인딩합니다. 이벤트는 자동 재생으로 바인딩됩니다. 마우스가 div 이미지에서 멀어지면 일정 간격으로 자동 재생이 시작됩니다.
GetObj(" ISL_Cont").onmouseout = function(){ AutoPlay();}
// 처음의 기본 바인딩은 자동 재생입니다
AutoPlay();
/*
지정된 html 객체 가져오기
*/
function GetObj(objName){
//현재 판단 페이지에 유효한 요소 태그가 있는지 여부 document.getElementById는 Firefox와 호환됩니다
if(document.getElementById)
{
return eval('document.getElementById("' objName '")')
}
else
{
return eval('document.all.' objName)
}
}
/*
자동 스크롤
*/
function AutoPlay(){
//이전에 바인딩된 간격 롤링 지우기
clearInterval(AutoPlayObj)
//인터벌 롤링을 리바인드합니다. setInterval() 메서드는 지정된 시간에 실행되도록 바인딩되어 있으며,clearInterval() 메서드는 지정된 시간 바인딩 개체를 지우는 것입니다.
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown(); ',5000);
}
/*
켜기 시작
*/
function ISL_GoUp(){
//현재 자동으로 재생 중인 경우 다음 코드는 실행되지 않습니다.
if(MoveLock)
return;
//이전 바인딩된 간격을 지웁니다. Scroll
clearInterval(AutoPlayObj)
MoveLock = true; 지정된 시간 내
MoveTimeObj = setInterval('ISL_ScrUp();',Speed)
}
/*
스크롤 중지
*/
function ISL_StopUp(){
//이전 바인딩된 간격 스크롤 지우기
clearInterval(MoveTimeObj)
//현재 표시된 이미지의 div측 가변 거리가 첫 번째 제품 이미지인지 확인합니다. 그렇지 않으면 첫 번째 이미지와 같습니다.
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0)
{
//div 왼쪽 여백 이동
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
//이동 시작
CompScr()
}else
{
MoveLock = false;
}
//자동 재생
AutoPlay();
}
/*
업 액션
*/
function ISL_ScrUp(){
// 현재 이미지의 큰 div의 왼쪽 여백이 0보다 작으면 해당 여백은 자체 여백에 왼쪽에 있는 클릭 버튼의 너비를 더한 값과 같습니다.
if(GetObj('ISL_Cont').scrollLeft < ;= 0)
{
GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft GetObj('List1').offsetWidth
}
//왼쪽으로 이동
GetObj('ISL_Cont').scrollLeft -= Space ;
}
/*
아래로 스크롤
*/
function ISL_GoDown(){
//이전 항목 지우기 바운드 간격 스크롤
clearInterval(MoveTimeObj)
//현재 자동으로 재생 중인 경우 다음 코드는 실행되지 않습니다.
if(MoveLock)
return
//자동 재생 지우기
clearInterval(AutoPlayObj);
MoveLock = true;
//스크롤 다운 방법
ISL_ScrDown()
//지정된 시간에 맞춰 자동으로 오른쪽으로 이동
MoveTimeObj = setInterval ('ISL_ScrDown()',Speed)
}
/*
아래로 스크롤 중지
*/
function ISL_StopDown() {
//이전에 바인딩된 스크롤 간격 지우기
clearInterval(MoveTimeObj);
//현재 그림의 큰 div의 왼쪽 여백이 0보다 작으면 해당 여백은 자체 여백에 왼쪽 클릭한 버튼의 너비를 더한 값과 같습니다.
if(GetObj('ISL_Cont').scrollLeft % PageWidth - 채우기 != 0 )
{
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth fill; >}else
{
MoveLock = false;
}
//자동 재생 시작
AutoPlay();
/*
아래로 스크롤 작업
*/
함수 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
}
/*
좌우 이동 제어 처리
*/
function CompScr(){
var num
if(Comp == 0)
{
MoveLock = false
return; ;
}
//뒤집기
if(Comp < 0)
{
if(Comp < -Space)
{
Comp = Space; >num = Space;
}else
{
num = -Comp;
Comp = 0
}
GetObj('ISL_Cont').scrollLeft -= num; >setTimeout('CompScr()',Speed);
}else //꺼짐
{
if(Comp > Space)
{
Comp - = Space
num = 공백
}else
{
num = Comp
Comp = 0;
GetObj('ISL_Cont').scrollLeft = num;
setTimeout('CompScr()',Speed);
}
}