Method One:
<!--gray Background code to replace the picture--
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<div>
<div>
/img/110.jpg"width=" 970 "height=" 280 "id=" img "/>
</div>
</div>
<script type= "Text/javascript" >
var curindex=0;
var arr=new Array ();
Arr[0]= ". /img/111.jpg";
Arr[1]= ". /img/112.jpg";
Arr[2]= ". /img/110.jpg";
SetInterval (function () {
var Img=document.getelementbyid ("img");
if (curindex==arr.length-1) {
curindex=0;
} else {
Curindex+=1;
}
Img.src=arr[curindex];
}, 3000);
</script>
</body>
Method Two:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
*{
padding:0px;
margin:0px;
}
#banner {
width:100%;
Overflow:hidden;
White-space:nowrap;
position:relative;
}
#banner #inside {
width:9600px;
position:relative;
left:50%;
Margin-left: -960px;
Transition:all 1s ease;
}
#banner img{
width:1920px;
}
#bannerNum {
padding:0px;
List-style:none;
Overflow:hidden;
width:160px;
Position:absolute;
bottom:30px;
right:50px;
}
#bannerNum li{
width:30px;
height:30px;
Background-color:white;
Text-align:center;
line-height:30px;
margin:0px 5px;
Float:left;
Cursor:pointer;
}
</style>
<script>
var num = 1;
var inside;
Window.onload = function () {
Inside = document.getElementById ("Inside");
var interval = setinterval (function () {
inside.style.transition = "all 1s ease";
num++;
Switch (num) {
Case 1:
Inside.style.transition = "None";
Inside.style.marginLeft = ( -960) + "px";
Break
Case 2:
Inside.style.marginLeft = ( -960-1920) + "px";
Break
Case 3:
Inside.style.marginLeft = ( -960-1920*2) + "px";
Break
Case 4:
Inside.style.marginLeft = ( -960-1920*3) + "px";
Break
Case 5:
Inside.style.marginLeft = ( -960-1920*4) + "px";
num = 0;
Break
Default
Break
}
},2000);
}
function Changebanner (NUM1) {
Inside.style.transition = "None";
Switch (NUM1) {
Case 1:
Inside.style.marginLeft = ( -960) + "px";
Break
Case 2:
Inside.style.marginLeft = ( -960-1920) + "px";
Break
Case 3:
Inside.style.marginLeft = ( -960-1920*2) + "px";
Break
Case 4:
Inside.style.marginLeft = ( -960-1920*3) + "px";
Break
Default
Break
}
num = num1-1;
}
</script>
<body>
<div id= "banner" >
<div id= "Inside" >
</div>
<ul id= "Bannernum" >
<li onclick= "Changebanner (1)" >1</li>
<li onclick= "Changebanner (2)" >2</li>
<li onclick= "Changebanner (3)" >3</li>
<li onclick= "Changebanner (4)" >4</li>
</ul>
</div>
</body>
JS Implementation Banner Diagram rotation