Home > Developer > JavaScript
The code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
*{
padding:0px;
margin:0px;
}
#banner {
width:100%;
Overflow:hidden;
White-space:nowrap;
}
#banner #inside {
width:9600px;
position:relative;
left:50%;
Margin-left: -960px;
Transition:all 1s ease;
}
#banner img{
width:1920px;
}
</style>
<script>
var num = 0;
Window.onload = function () {
var 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";
num = 0;
Break
Default
Break
}
},2000);
}
</script>
<body>
<div id= "banner" >
<div id= "Inside" >
</div>
</div>
</body>
Use native JavaScript to implement banner scrolling transitions in Web pages
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
