เอฟเฟกต์ของภาพหมุนแสดงอยู่ในภาพด้านล่าง ภาพสามารถหมุนได้ด้วยตัวเอง คลิกปุ่มซ้ายและขวาเพื่อหมุนหน้าและหมุนเมาส์เหนือรูปภาพหรือชื่อเรื่องเพื่อหยุดภาพหมุน
การเรนเดอร์คือ:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ภาพหมุนพร้อมลูกศรซ้ายและขวา</title>
<style type="text/css">
-
.rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px solid red;}
.rollBox .LeftBotton{height:40px;width:21px;พื้นหลัง:url(images/sl.png) ไม่ทำซ้ำ 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: ตัวชี้;}
.rollBox .RightBotton{height:40px;width:21px;พื้นหลัง:url(images/sr.png) ไม่ทำซ้ำ 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: ตัวชี้;}
.rollBox .ต่อ{ความกว้าง:726px;ล้น:ซ่อน;ลอย:ซ้าย;}
.rollBox .ScrCont{ความกว้าง:10000000px;}
.rollBox .Cont .pic{width:242px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:9px;พื้นหลัง:#fff;border:1px solid #ccc;display:block;margin:0 auto;width:190px;height:190px;}
.rollBox .Cont .pic div{line-height:20px;color:#505050;margin:15px 0px;}
.rollBox .Cont .pic div ขยาย {display:block;}
.rollBox .ต่อ a:link,.rollBox .ต่อ:visited{color:#626466;text- decoration:none;}
.rollBox .ต่อ:โฮเวอร์{สี:#f00;ข้อความตกแต่ง:ขีดเส้นใต้;}
.rollBox #List1,.rollBox #List2{float:left;}
-
</สไตล์>
</หัว>
<ร่างกาย>
<div>
<div onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
<div id="ISL_Cont">
<div>
<div id="รายการ1">
<!-- รายการรูปภาพเริ่มต้น -->
<div>
<a href="/" target="_blank"><img src="images/1.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">เอฟเฟกต์พิเศษโค้ดไซต์เจ๋งๆ 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/2.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">เอฟเฟกต์พิเศษโค้ดไซต์เจ๋งๆ 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/3.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">เอฟเฟกต์พิเศษโค้ดไซต์เจ๋งๆ 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/4.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">เอฟเฟกต์พิเศษโค้ดไซต์เจ๋งๆ 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/5.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">เอฟเฟกต์พิเศษโค้ดไซต์เจ๋งๆ 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/6.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">เอฟเฟกต์พิเศษโค้ดไซต์เจ๋งๆ 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/7.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">เอฟเฟกต์พิเศษโค้ดไซต์เจ๋งๆ 1</a></span>
<span>45446547</span>
</div>
</div>
<div>
<a href="/" target="_blank"><img src="images/8.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">เอฟเฟกต์พิเศษโค้ดไซต์เจ๋งๆ 1</a></span>
<span>45446547</span>
</div>
</div>
<!-- สิ้นสุดรายการรูปภาพ -->
</div>
<div id="List2"></div>
</div>
</div>
<div onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
</div>
</ร่างกาย>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//รายการเลื่อนรูปภาพ VeVB.COm
var ความเร็ว = 1; //ความเร็ว (มิลลิวินาที)
var Space = 5; // ย้ายแต่ละครั้ง (px)
var PageWidth = 726; // ความกว้างของหน้า
var เติม = 0; // การเปลี่ยนแปลงโดยรวม
var MoveLock = เท็จ;
var MoveTimeObj;
var คอมพ์ = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = เติม;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){เล่นอัตโนมัติ();}
เล่นอัตโนมัติ();
ฟังก์ชั่น GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
ฟังก์ชั่น AutoPlay () {// เลื่อนอัตโนมัติ
clearInterval(เล่นอัตโนมัติObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); // ช่วงเวลา
-
ฟังก์ชั่น ISL_GoUp(){/ //เริ่มเปิดเครื่อง
ถ้า (MoveLock) กลับมา;
clearInterval(เล่นอัตโนมัติObj);
MoveLock = จริง;
MoveTimeObj = setInterval('ISL_ScrUp();',ความเร็ว);
-
ฟังก์ชั่น ISL_StopUp(){ //หยุดเปิดเครื่อง
ชัดเจนช่วง(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - เติม != 0){
คอมพ์ = เติม - (GetObj('ISL_Cont').scrollLeft % PageWidth);
คอมพ์สคร();
}อื่น{
MoveLock = เท็จ;
-
เล่นอัตโนมัติ();
-
ฟังก์ชั่น ISL_ScrUp () {// ดำเนินการขึ้น
if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
GetObj('ISL_Cont').scrollLeft -= ช่องว่าง ;
-
ฟังก์ชั่น ISL_GoDown(){ //ปิดเครื่อง
ชัดเจนช่วง(MoveTimeObj);
ถ้า (MoveLock) กลับมา;
clearInterval(เล่นอัตโนมัติObj);
MoveLock = จริง;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',ความเร็ว);
-
ฟังก์ชั่น ISL_StopDown(){/ //หยุดปิดเครื่อง
ชัดเจนช่วง(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - เติม != 0 ){
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + เติม;
คอมพ์สคร();
}อื่น{
MoveLock = เท็จ;
-
เล่นอัตโนมัติ();
-
ฟังก์ชั่น 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 += ช่องว่าง ;
-
ฟังก์ชั่น CompScr(){
วาร์นัม;
ถ้า (คอมพ์ == 0) {MoveLock = false; กลับ;}
if(Comp < 0){/ //เปิดขึ้น
ถ้า (คอมพ์ < -Space){
คอมพ์ += ช่องว่าง;
หมายเลข = ช่องว่าง;
}อื่น{
หมายเลข = -คอมพ์;
คอมพ์ = 0;
-
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()',ความเร็ว);
}else{ //ปิดเครื่อง
ถ้า (คอมพ์ > ช่องว่าง){
คอมพ์ -= ช่องว่าง;
หมายเลข = ช่องว่าง;
}อื่น{
หมายเลข = คอมพ์;
คอมพ์ = 0;
-
GetObj('ISL_Cont').scrollLeft += num;
setTimeout('CompScr()',ความเร็ว);
-
-
-
</สคริปต์>
</html>