JS 원활한 스크롤 효과는 거의 모든 웹 페이지에서 볼 수 있습니다. 일부는 플러그인 일 수 있지만 실제로 원래 JavaScript를 사용하는 것은 비교적 간단합니다.
가장 중요한 것은 JS 위치 지식을 사용하는 것입니다.
1. innerhtml : 요소의 HTML 태그를 설정하거나 가져옵니다.
2. Scrollleft : 객체의 왼쪽 경계와 창에서 현재 보이는 컨텐츠의 왼쪽 끝 사이에서 거리를 설정하거나 얻습니다.
3. offsetWidth : 지정된 레이블의 너비를 설정하거나 가져옵니다.
4. SetInterVal () : 정기적으로 시작하도록 메소드를 설정합니다
5. ClearInterval (); 타이머를 지우십시오
생식 이미지 :
몰래 : 데모
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> JavaScript 스크롤 프로덕션 </title>
</head>
<body>
<스타일>
/*Conment*/
*{
여백 : 0;
패딩 : 0;
}
img {최대 폭 : 100%;}
.컨테이너{
최대 width : 620px;
여백 : 0 Auto;
패딩 탑 : 50px;
}
.Text-Center {Text-Align : Center;}
.list-inline li {
디스플레이 : 인라인 블록;
}
.hide {display : none;}
hr {
여백 : 20px 0;
}
.꼬리표{
배경색 : #CCC;
패딩 : 5px 0;
}
.tag li {
패딩 : 0 10px;
왼쪽 경계 : 1px 고체 #fff;
커서 : 포인터;
}
.tag li : 일 자녀 {
왼쪽 경계 : 투명;
}
.tag li.Active {
배경색 : #ddd;
}
.스크롤{
위치 : 상대;
패딩 : 10px;
마진 바닥 : 20px;
배경색 : #ddd;
}
.포장하다{
오버플로 : 숨겨진;
}
.콘텐츠{
최소값 : 3000px;
높이 : 200px;
}
.Content ul {
플로트 : 왼쪽;
}
.Content ul li {
디스플레이 : 인라인 블록;
최대 width : 200px;
}
#prev,#next {
너비 : 50px;
높이 : 50px;
마진 -탑 : -25px;
배경색 : #CCC;
라인 높이 : 50px;
텍스트 정렬 : 센터;
커서 : 포인터;
}
#prev {
위치 : 절대;
왼쪽 : 0;
상단 : 50%;
Border-Radius : 0 25px 25px 0;
}
#다음{
위치 : 절대;
오른쪽 : 0;
상단 : 50%;
Border-Radius : 25px 0 0 25px;
}
</스타일>
<div>
<H1> 그림 스크롤 생산 </h1>
<HR>
<div>
<div id = "랩">
<div id = "content">
<ul id = "list1">
<li> <img src = "freelance.gif"> </li>
<li> <img src = "button.gif"> </li>
<li> <img src = "load.gif"> </li>
<li> <img src = "Straw.gif"> </li>
</ul>
<ul id = "list2">
</ul>
</div>
</div>
<div id = "prev">
이전
</div>
<div id = "next">
다음
</div>
</div>
</div>
<cript>
var wrap = document.getElementById ( '랩');
var list1 = document.getElementById ( 'list1');
var list2 = document.getElementById ( 'list2');
var prev = document.getElementById ( 'prev');
var next = document.getElementById ( 'next');
// 컨텐츠 목록의 사본을 만듭니다
list2.innerhtml = list1.innerhtml;
// 왼쪽으로 변경됩니다
함수 스크롤 () {
if (wrap.scrollleft> = list2.offsetWidth) {
랩 .scrollleft = 0;
}
또 다른{
랩 .scrollleft ++;
}
}
타이머 = setInterval (스크롤, 1);
// 마우스 숙박을 위해 ClearInterVal ()을 사용하십시오
랩.onmouseover = function () {
ClearInterval (타이머);
}
랩.onmouseout = function () {
타이머 = setInterval (스크롤, 1);
}
// 왼쪽으로 가속합니다
함수 scroll_l () {
if (wrap.scrollleft> = list2.offsetWidth) {
랩 .scrollleft = 0;
}
또 다른{
랩 .scrollleft ++;
}
}
// 오른쪽으로 스크롤합니다
함수 scroll_r () {
if (wrap.scrollleft <= 0) {
랩 .scrollleft+= list2.offsetWidth;
}
또 다른{
랩 .scrollleft--;
}
}
prev.onclick = function () {
ClearInterval (타이머);
변경 (0)
}
다음.onclick = function () {
ClearInterval (타이머);
변경 (1)
}
함수 변경 (r) {
if (r == 0) {
타이머 = setInterval (scroll_l, 60);
랩.onmouseout = function () {
타이머 = setInterval (scroll_l, 60);
}
}
if (r == 1) {
타이머 = setInterval (scroll_r, 60);
랩.onmouseout = function () {
타이머 = setInterval (scroll_r, 60);
}
}
}
</스크립트>
</body>
매우 간결하고 실용적인 코드, 프로젝트 요구에 따라 아름답게하십시오.