아이디어:
일련의 그림은 롤링을위한 롤링 바를 제어하고 현재이 사진 세트를 복사하여 원래 그림 그룹에 추가하면 이제 두 개의 사진 세트가 있습니다. 롤링 바는 이제 그림의 마지막 그림이 맨 위에 롤링되었다고 상상할 수 있습니다 이번에는 원활한 스크롤을 느낄 수 있습니다.
다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> />
<title> js 사진 롤링 왼쪽 </title>
<스타일 유형 = "텍스트/CSS">
img {
국경 : 없음;
}
</스타일>
</head>
<body>
<div id = "demo"style = "오버플로 : 숨겨진; 너비 : 500px;">
<테이블 테두리 = 0 ALIGN = 중심 셀 패딩 = 1 CellSpacing = 1 CellSpace = 0>
<tr>
<td id = "demo1"value = "top"bgcolor = "ffffff">
<!- 특별한주의를 기울여 다음 그림의 총 너비는 위의 데모의 폭이 500px 인 경우 위의 데모의 너비보다 커야합니다. 그렇지 않으면 몇 가지 문제가 있습니다! ->
<테이블 cellspacing = "0"cellPadding = "0">
<tr align = "Center">
<td> <a href = "#"target = "_lank"> <img src = "images/1.jpg"> </a> </td>
<td> <a href = "#"target = "_lank"> <img src = "images/2.jpg"> </a> </td>
<td> <a href = "#"target = "_ blank"> <img src = "images/3.jpg"> </a> </td>
<td> <a href = "#"target = "_ blank"> <img src = "images/4.jpg"> </a> </td>
<td> <a href = "#"target = "_lank"> <img src = "images/5.jpg"> </a> </td>
</tr>
</테이블>
</td>
<td id = "demo2"value = "top">
</td>
</tr>
</테이블>
</div>
<div id = "msg"> </div>
<script type = "text/javaScript"src = "jquery.js"> </script>
<script type = "text/javaScript">
// 0 : 고정 속도
변수 = 30;
// 1 : 요소 데모 데모 데모 데모를 가져옵니다
var demo = $ ( "#demo");
var demo1 = $ ( "#demo1");
var demo2 = $ ( "#demo2");
// 2 : 복사 demo1-> demo2
var cont = $ ( "#demo1");
$ ( "#demo2").
// 3 : 시간을 실행하는 메소드를 만듭니다
기능 Hello () {
var left = $ ( "#demo");
if (왼쪽> = $ ( "#demo1"). width ()) {
왼쪽 = 0;
} 또 다른 {
왼쪽 ++;
}
$ ( "#demo").
settimeout ( "hello ()", 속도);
}
안녕하세요 ();
// demo.scrollleft () 이동;
</스크립트>
</body>
</html>