The examples in this article share the specific implementation code of the js carousel diagram for your reference. The specific content is as follows
CSS：
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;
}
body {
background: #eee;
}
#Bigbox {
width: 720px;
height: 420px;
border: 1px solid #333;
margin: 60px auto;
}
#Box {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
top: 10px;
left: 10px;
}
#Ul {
height: 400px;
position: absolute;
top: 0;
left: 0;
}
#Ul li {
width: 700px;
height: 400px;
float: left;
}
#Left {
width: 60px;
height: 50px;
border-radius: 30%;
background: rgba(96, 96, 96, .5);
position: absolute;
top: 50%;
left: 0;
margin-top: -25px;
color: #fff;
line-height: 50px;
text-align: center;
cursor: pointer;
font-size: 20px;
display: none;
}
#Right {
width: 60px;
height: 50px;
border-radius: 30%;
background: rgba(96, 96, 96, .5);
position: absolute;
top: 50%;
right: 0;
margin-top: -25px;
color: #fff;
line-height: 50px;
text-align: center;
cursor: pointer;
font-size: 20px;
display: none;
}
</style>
html：
<div >
<div >
<ul >
<li>
1<img src="img/" width="100%" height="100%">
</li>
<li>
2<img src="img/" width="100%" height="100%">
</li>
<li>
3<img src="img/" width="100%" height="100%">
</li>
<li>
4<img src="img/" width="100%" height="100%">
</li>
<li>
5<img src="img/" width="100%" height="100%">
</li>
<li>
6<img src="img/" width="100%" height="100%">
</li>
<li>
7<img src="img/" width="100%" height="100%">
</li>
<li>
8<img src="img/" width="100%" height="100%">
</li>
<li>
9<img src="img/" width="100%" height="100%">
</li>
<li>
10<img src="img/" width="100%" height="100%">
</li>
</ul>
<div onselectstart="return false">Left</div>
<div onselectstart="return false">right</div>
</div>
</div>
js：
<script>
= function() {
var n = 0;
var timer = null;
var timer1 = null;
var timer2 = null;
var timer3 = null;
var oDiv = ('Box')
var oUl = ('Ul')
var oLi = ('li')
//Get div width var oDivWidth = getStyle(oDiv, 'width').split('px')[0] //Copy oUl's innerHTML +=
//Set ul width = * oDivWidth + 'px'
//Get ul width var oUlWidth = getStyle(oUl, 'width').split('px')[0] //Encapsulate to get non-line style functions function getStyle(obj, sName) {
if () {
return [sName];
} else {
return getComputedStyle(obj, false)[sName];
}
}
//Execute the function clearInterval(timer3)
timer3 = setInterval(function() {
Run()
}, 2000)
//Encapsulate motion functions function Run() {
clearInterval(timer)
timer = setInterval(function() {
n -= 20;
= n + 'px'
if (n % oDivWidth == 0) {
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function() {
Run()
}, 2000)
}
if (n <= -oUlWidth / 2) {
= 0;
n = 0;
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function() {
Run()
}, 2000)
}
}, 30)
}
// Move in and stop scrolling = function() {
= 'block'
= 'block'
clearInterval(timer3)
clearInterval(timer2)
timer2 = setInterval(function() {
if (n % oDivWidth == 0) {
clearInterval(timer)
clearInterval(timer1)
}
}, 30)
}
//Mouse out and continue execution = function() {
= 'none'
= 'none'
clearInterval(timer3)
clearInterval(timer2)
clearInterval(timer1)
timer1 = setTimeout(function() {
Run()
}, 2000)
}
//left = function() {
//Clear all timers clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
timer = setInterval(function() {
n -= 50;
= n + 'px'
if (n % oDivWidth == 0) {
clearInterval(timer)
}
if (n <= -oUlWidth / 2) {
= 0;
n = 0;
}
}, 30)
}
//To the right = function() {
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
if (n == 0) {
n = -oUlWidth / 2
}
clearInterval(timer)
timer = setInterval(function() {
n += 50;
= n + 'px'
if (n % oDivWidth == 0) {
clearInterval(timer)
}
}, 30)
}
}
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.