Javascript enables seamless scrolling of images
- 2020-05-07 19:15:28
- OfStack
Effect: mouse over the picture to stop scrolling, mouse over automatically scroll
You can adjust the scroll to the left or right
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
overflow: hidden;
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
background: red;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;
}
</style>
<body>
<a href="javascript:;"> Left. </a>
<a href="javascript:;"> Move right </a>
<div id="div1">
<ul>
<li>
<img src="img/ Seamless rolling /1.jpg" />
</li>
<li>
<img src="img/ Seamless rolling /2.jpg" />
</li>
<li>
<img src="img/ Seamless rolling /3.jpg" />
</li>
<li>
<img src="img/ Seamless rolling /4.jpg" />
</li>
</ul>
</div>
</body>
The above is a simple layout and the following is the main Javascript code
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var speed = 2;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
function move() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
var timer = setInterval(move, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
};
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
document.getElementsByTagName('a')[0].onclick = function() {
speed = -2;
};
document.getElementsByTagName('a')[1].onclick = function() {
speed = 2;
};
}
</script>
Here's the idea:
First, set the number of pictures 1 in ul to 8. oUl. innerHTML += oUl. innerHTML;
The width of ul in the calculation is the actual width of li *8
Then hide the extra content
Note: oUl.offsetLeft is definitely negative
So don't leave out the minus sign when you're judging
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
This means that the image is halfway through the scroll, and quickly pulls the image back, because the program is running so fast that it's almost impossible to see the seamless scroll
Finally, the variable speed is used to control left and right scrolling.
The above code only implements the most basic functions, and friends can continue to improve on this basis.