Home > Developer > JavaScript
Use Javascript to implement seamless image scrolling and javascript seamless
The seamless js rolling effect can be seen on almost any web page. Some may be the use of plug-ins. In fact, it is relatively simple to use the original javascript.
It mainly uses js location knowledge.
1. innerHTML: set or obtain the html Tag of an element.
2. scrollLeft: set or obtain the distance between the left edge of the object and the leftmost end of the currently visible content in the window.
3. offsetWidth: set or obtain the width of the specified tag.
4. setInterval (): Set the method to start regularly
5. clearInterval (); clear the timer
:
Quick Start: demo
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> javascript scroll creation </title>
</Head>
<Body>
<Style>
/* Conment */
*{
Margin: 0;
Padding: 0;
}
Img {max-width: 100% ;}
. Container {
Max-width: 620px;
Margin: 0 auto;
Padding-top: 50px;
}
. Text-center {text-align: center ;}
. List-inline li {
Display: inline-block;
}
. Hide {display: none ;}
Hr {
Margin: 20px 0;
}
. Tag {
Background-color: # ccc;
Padding: 5px 0;
}
. Tag li {
Padding: 0 10px;
Border-left: 1px solid # fff;
Cursor: pointer;
}
. Tag li: first-child {
Border-left: transparent;
}
. Tag li. active {
Background-color: # ddd;
}
. Scroll {
Position: relative;
Padding: 10px;
Margin-bottom: 20px;
Background-color: # ddd;
}
. Wrap {
Overflow: hidden;
}
. Content {
Min-width: 3000px;
Height: 200px;
}
. Content ul {
Float: left;
}
. Content ul li {
Display: inline-block;
Max-width: 200px;
}
# Prev, # next {
Width: 50px;
Height: 50px;
Margin-top:-25px;
Background-color: # ccc;
Line-height: 50px;
Text-align: center;
Cursor: pointer;
}
# Prev {
Position: absolute;
Left: 0;
Top: 50%;
Border-radius: 0 25px 25px 0;
}
# Next {
Position: absolute;
Right: 0;
Top: 50%;
Border-radius: 25px 0 0 25px;
}
</Style>
<Div class = "container">
<H1 class = "text-center"> image scrolling <Hr>
<Div class = "scroll">
<Div class = "wrap" id = "wrap">
<Div id = "content" class = "content">
<Ul id = "list1">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Ul id = "list2">
</Ul>
</Div>
</Div>
<Div id = "prev">
Prev
</Div>
<Div id = "next">
Next
</Div>
</Div>
</Div>
<Script>
Var wrap = document. getElementById ('wrapp ');
Var list1 = document. getElementById ('list1 ');
Var list2 = document. getElementById ('list2 ');
Var prev = document. getElementById ('prev ');
Var next = document. getElementById ('Next ');
// Create a copy content list
List2.innerHTML = list1.innerHTML;
// Scroll to the Left Loop
Function scroll (){
If (wrap. scrollLeft> = list2.offsetWidth ){
Wrap. scrollLeft = 0;
}
Else {
Wrap. scrollLeft ++;
}
}
Timer = setInterval (scroll, 1 );
// Use clearInterval ()
Wrap. onmouseover = function (){
ClearInterval (timer );
}
Wrap. onmouseout = function (){
Timer = setInterval (scroll, 1 );
}
// Acceleration to the left
Function scroll_l (){
If (wrap. scrollLeft> = list2.offsetWidth ){
Wrap. scrollLeft = 0;
}
Else {
Wrap. scrollLeft ++;
}
}
// Scroll to the right
Function scroll_r (){
If (wrap. scrollLeft <= 0 ){
Wrap. scrollLeft + = list2.offsetWidth;
}
Else {
Wrap. scrollLeft --;
}
}
Prev. onclick = function (){
ClearInterval (timer );
Change (0)
}
Next. onclick = function (){
ClearInterval (timer );
Change (1)
}
Function change (r ){
If (r = 0 ){
Timer = setInterval (scroll_l, 60 );
Wrap. onmouseout = function (){
Timer = setInterval (scroll_l, 60 );
}
}
If (r = 1 ){
Timer = setInterval (scroll_r, 60 );
Wrap. onmouseout = function (){
Timer = setInterval (scroll_r, 60 );
}
}
}
</Script>
</Body>
Very simple and practical code. You can simply beautify your project based on your project needs.
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
