Effect: Move the mouse into the picture and stop scrolling, and the mouse out automatically scrolls
Can adjust scrolling to the left or right direction
The code copy is as follows:
<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>
The code copy is as follows:
<body>
<a href="javascript:;">Walk left</a>
<a href="javascript:;">Walk to the right</a>
<div id="div1">
<ul>
<li>
<img src="img/Seamless Scroll/1.jpg" />
</li>
<li>
<img src="img/Seamless Scroll/2.jpg" />
</li>
<li>
<img src="img/Seamless Scroll/3.jpg" />
</li>
<li>
<img src="img/Seamless Scroll/4.jpg" />
</li>
</ul>
</div>
</body>
The above is a simple layout, and the following is the main Javascript code
The code copy is as follows:
<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>
Let me briefly explain the idea:
First, set ul. There are 8 pictures in total oUl.innerHTML += oUl.innerHTML;
Calculate the width of ul to the actual width of li*8
Hide the extra content later
Note: oUl.offsetLeft is definitely negative
So don't miss the negative sign when making a judgment
The code copy is as follows:
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = '0';
}
This section means that the picture is scrolling halfway, and quickly pull the picture back. Because the program executes too quickly, it is almost impossible to see seamless scrolling.
Finally, use the variable speed to control the scrolling in the left and right directions.
The above code only implements the most basic functions, and friends can continue to improve them on this basis.