The effect of the carousel picture is shown in the figure below. The pictures can be rotated by themselves. Click the left and right buttons to turn the page and rotate. Hover the mouse over the picture or title to stop the carousel;
The rendering is:
Copy the code code as follows:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Picture carousel with left and right arrows</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;background:url(images/sl.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: pointer;}
.rollBox .RightBotton{height:40px;width:21px;background:url(images/sr.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor: pointer;}
.rollBox .Cont{width:726px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:242px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:9px;background:#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 span{display:block;}
.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>
</head>
<body>
<div>
<div onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
<div id="ISL_Cont">
<div>
<div id="List1">
<!-- Picture list begin -->
<div>
<a href="/" target="_blank"><img src="images/1.jpg" /></a>
<div>
<span><a href="//www.VeVB.COm/" target="_blank">Cool site code-special effects 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">Cool site code-special effects 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">Cool site code-special effects 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">Cool site code-special effects 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">Cool site code-special effects 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">Cool site code-special effects 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">Cool site code-special effects 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">Cool site code-special effects 1</a></span>
<span>45446547</span>
</div>
</div>
<!-- Picture list end -->
</div>
<div id="List2"></div>
</div>
</div>
<div onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
</div>
</body>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//Picture scrolling list VeVB.COm
var Speed = 1; //Speed (milliseconds)
var Space = 5; //Move each time (px)
var PageWidth = 726; //Page width
var fill = 0; //overall shift
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay(){ //Auto scroll
clearInterval(AutoPlayObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //Interval time
}
function ISL_GoUp(){ //Start turning up
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //Stop turning up
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrUp(){ //Up action
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(){ //Turn down
clearInterval(MoveTimeObj);
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //Stop turning down
clearInterval(MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrDown(){ //Scroll down action
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(){
varnum;
if(Comp == 0){MoveLock = false;return;}
if(Comp < 0){ //turn up
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);
}
}
//--><!]]>
</script>
</html>