Backend DevelopmentPHP TutorialJavaScript method to achieve scroll bar effect, javascript scrolling_PHP tutorialJavaScript method to achieve scroll bar effect, javascript scrolling_PHP tutorial
JavaScript method to achieve scroll bar effect, javascript scrolling
This article describes the example of JavaScript method to achieve scroll bar effect. Share it with everyone for your reference. The details are as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 ul{
position: absolute;
left: 0px;
top: 0px;
}
#div1 ul li img {
width: 187px;
height: 125px;
}
#div1 ul li{
float: left;
width: 187px;
height: 125px;
list-style: none;
}
#div1{
width: 748px;
height: 125px;
position: relative;
background-color: chartreuse;
overflow: hidden;
float: left;
}
#body{
width: 948px;
height: 125px;
margin: 100px auto;
}
#body #leftDiv{
float: left;
width: 100px;
height: 100px;
}
#body #rightDiv{
float: left;
width: 100px;
height: 100px;
}
#body #leftDiv button{
background-image: url("image/left.PNG");
width: 100px;
height: 100px;
}
#body #leftDiv button img{
width: 100px;
height: 100px;
}
#body #rightDiv button img{
width: 100px;
height: 100px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var oLeft=document.getElementById('leftDiv');
var oright=document.getElementById('rightDiv');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
var speed=-2;
function move(){
if (oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
var timer=setInterval(move,30);
oLeft.onclick=function(){
speed=-2;
};
oright.onclick= function () {
speed=2;
};
oUl.onmouseover=function(){
clearInterval(timer);
};
oUl.onmouseout=function(){
timer=setInterval(move,30);
};
}
</script>
</head>
<body>
<div id="body">
<div id="leftDiv"><button><img src="/static/imghwm/default1.png" data-src="image/left.PNG" class="lazy"/ alt="JavaScript method to achieve scroll bar effect, javascript scrolling_PHP tutorial" ></button></div>
<div id="div1">
<ul>
<li><img src="/static/imghwm/default1.png" data-src="image/1.JPG" class="lazy"/ alt="JavaScript method to achieve scroll bar effect, javascript scrolling_PHP tutorial" ></li>
<li><img src="/static/imghwm/default1.png" data-src="image/2.JPG" class="lazy"/ alt="JavaScript method to achieve scroll bar effect, javascript scrolling_PHP tutorial" ></li>
<li><img src="/static/imghwm/default1.png" data-src="image/3.JPG" class="lazy"/ alt="JavaScript method to achieve scroll bar effect, javascript scrolling_PHP tutorial" ></li>
<li><img src="/static/imghwm/default1.png" data-src="image/4.JPG" class="lazy"/ alt="JavaScript method to achieve scroll bar effect, javascript scrolling_PHP tutorial" ></li>
</ul>
</div>
<div id="rightDiv"><button><img src="/static/imghwm/default1.png" data-src="image/right.PNG" class="lazy"/ alt="JavaScript method to achieve scroll bar effect, javascript scrolling_PHP tutorial" ></button></div>
</div>
</body>
</html>
I hope this article will be helpful to everyone’s JavaScript programming design.
What is the full form of PHP?Apr 28, 2025 pm 04:58 PMThe article discusses PHP, detailing its full form, main uses in web development, comparison with Python and Java, and its ease of learning for beginners.
How does PHP handle form data?Apr 28, 2025 pm 04:57 PMPHP handles form data using $\_POST and $\_GET superglobals, with security ensured through validation, sanitization, and secure database interactions.
What is the difference between PHP and ASP.NET?Apr 28, 2025 pm 04:56 PMThe article compares PHP and ASP.NET, focusing on their suitability for large-scale web applications, performance differences, and security features. Both are viable for large projects, but PHP is open-source and platform-independent, while ASP.NET,
Is PHP a case-sensitive language?Apr 28, 2025 pm 04:55 PMPHP's case sensitivity varies: functions are insensitive, while variables and classes are sensitive. Best practices include consistent naming and using case-insensitive functions for comparisons.
How do you redirect a page in PHP?Apr 28, 2025 pm 04:54 PMThe article discusses various methods for page redirection in PHP, focusing on the header() function and addressing common issues like "headers already sent" errors.
Explain type hinting in PHPApr 28, 2025 pm 04:52 PMArticle discusses type hinting in PHP, a feature for specifying expected data types in functions. Main issue is improving code quality and readability through type enforcement.
What is PDO in PHP?Apr 28, 2025 pm 04:51 PMThe article discusses PHP Data Objects (PDO), an extension for database access in PHP. It highlights PDO's role in enhancing security through prepared statements and its benefits over MySQLi, including database abstraction and better error handling.
How to create API in PHP?Apr 28, 2025 pm 04:50 PMArticle discusses creating and securing PHP APIs, detailing steps from endpoint definition to performance optimization using frameworks like Laravel and best security practices.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Zend Studio 13.0.1
Powerful PHP integrated development environment
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 English version
Recommended: Win version, supports code prompts!
