<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<title> background image do carousel + Automatic Carousel </title>
<style type= "Text/css" >
*, Body {
margin:0px;
padding:0px;
}
#container {
margin-left:200px;
Background-color:darkgrey;
Text-align:center;
width:980px;
}
#top {
width:980px;
height:65px;
/**/
Background-image:url ("Img/topbg.png");
Background-size:auto;
Background-position:center;
/**/
}
#bottom {
width:980px;
height:65px;
Background-image:url ("Img/bottombg.png");
Background-size:auto;
Background-position:center;
/**/
}
#banner {
width:980px;
height:330px;
Background-image:url ("img/1.jpg");
/*background-position:left;*/
/*background-repeat:no-repeat;*/
position:relative;
-webkit-transition:all 1.8s linear;
}
#banner-left {
Background-image:url ("Img/images/btn_03.png");
width:60px;
height:60px;
Position:absolute;
margin-top:130px;
opacity:0;
-webkit-transition:all 0.8s linear;
}
#banner-right {
Background-image:url ("Img/images/btn_01.png");
width:60px;
height:60px;
Position:absolute;
right:0px;
margin-top:130px;
opacity:0;
-webkit-transition:all 0.8s linear;
}
#banner: hover > #banner-right, #banner: hover > #banner-left {
opacity:0.8;
/*background-image:url (".. /img/images/btn_02.png "); * *
}
</style>
<body>
<div id= "Container" >
<div id= "Top" ></div>
<div id= "banner" >
<div id= "Banner-left" onclick= "Oclick (This)" ></div>
<div id= "Banner-right" onclick= "Oclick (This)" ></div>
</div>
<div id= "Bottom" ></div>
</div>
<script type= "Text/javascript" >
var num = 1, tm=0;
var Obanner = document.getElementById ("banner")
var Time1 = new Date ();
var p=0;
function Oclick (Athis) {
TM = 1;
Obanner.style.backgroundposition= "490px";
Clearinterval (B); Clear Automatic carousel when clicked
if (Athis.id.substr (7, 1) = = "R") {
num++;
p++;
}
else {
p--;
num--;
}
Limit the carousel limit to avoid cross-border
if (num > 8) {
num = 1;
}
if (num < 1) {
num = 5
}
obanner.style.backgroundposition=p*980+ "px";//move 980 each time, background repetition of the manufacturing-driven visual effects
oBanner.style.backgroundImage = "url (' img/" + num + ". jpg ')";
}
Call function periodically, replace back
var b= setinterval (oatuo,2000);
var num1=num;
function Oatuo () {
num1++;
if (Num1 > 8) {
NUM1 = 1;
}
oBanner.style.backgroundImage = "url (' img/" + num1 + ". jpg ')";
}
</script>
</body>
Use background image to make carousel (hand-to-integrate)