< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< meta http-equiv= "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title> 无缝滚动向左滚动< /title>
< style>
* {
margin: 0 ;
padding: 0 ;
}
cursor: pointer;
width: 600px;
height: 200px;
border: 1px solid pink;
overflow: hidden;
display: flex;
margin: auto;
}
.scroll_content {
display: flex;
}
display: flex;
}
.item {
width: 200px;
height: 200px;
flex-shrink: 0 ;
}
.item img{
width: 100 %;
}
.item:nth-child( odd) {
background: skyblue;
}
.item:nth-child( even) {
background: yellow;
}
< /style>
< /head>
< body>
< ! -- 外层盒子 -->
< div id = "wrapper" >
< ! -- 滚动盒子 -->
< div id = "scroll_content" class = "scroll_content" >
< ! -- 列表1 -->
< div id = "list" >
< div class = "item" >
< img src = "../imgs/city1.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city2.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city3.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city4.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city5.png" alt = "" >
< /div>
< /div>
< ! -- 复制一份 -->
< div id = "list1" >
< /div>
< /div>
< /div>
< script>
window.onload = function ( ) {
var speed = 10 ;
var tab = document.getElementById( "wrapper" ) ;
var tab1 = document.getElementById( "list" ) ;
var tab2 = document.getElementById( "list1" ) ;
tab2.innerHTML = tab1.innerHTML;
function Marquee ( ) {
if ( tab2.offsetWidth - tab.scrollLeft <= 0 )
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft++;
}
}
var MyMar = setInterval( Marquee, speed) ;
tab.onmouseover = function ( ) { clearInterval( MyMar) } ;
tab.onmouseout = function ( ) { MyMar = setInterval( Marquee, speed) } ;
}
< /script>
< /body>
< /html>
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< meta http-equiv= "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title> 无缝滚动向右滚动< /title>
< style>
* {
margin: 0 ;
padding: 0 ;
}
cursor: pointer;
width: 600px;
height: 200px;
border: 1px solid pink;
overflow: hidden;
display: flex;
margin: auto;
}
.scroll_content {
display: flex;
}
display: flex;
}
.item {
width: 200px;
height: 200px;
flex-shrink: 0 ;
}
.item img{
width: 100 %;
}
.item:nth-child( odd) {
background: skyblue;
}
.item:nth-child( even) {
background: yellow;
}
background: red;
}
< /style>
< /head>
< body>
< ! -- 外层盒子 -->
< div id = "wrapper" >
< ! -- 滚动盒子 -->
< div id = "scroll_content" class = "scroll_content" >
< ! -- 列表1 -->
< div id = "list" >
< div class = "item" >
< img src = "../imgs/city1.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city2.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city3.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city4.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city5.png" alt = "" >
< /div>
< /div>
< ! -- 复制一份 -->
< div id = "list1" >
< /div>
< /div>
< /div>
< script>
window.onload = function ( ) {
var speed = 10 ;
var tab = document.getElementById( "wrapper" ) ;
var tab1 = document.getElementById( "list" ) ;
var tab2 = document.getElementById( "list1" ) ;
tab2.innerHTML = tab1.innerHTML;
function Marquee ( ) {
if ( tab.scrollLeft <= 0 ) {
tab.scrollLeft += tab2.offsetWidth
}
else {
tab.scrollLeft--;
}
console.log( tab.scrollLeft, tab2.offsetWidth) ;
}
var MyMar = setInterval( Marquee, speed) ;
tab.onmouseover = function ( ) { clearInterval( MyMar) } ;
tab.onmouseout = function ( ) { MyMar = setInterval( Marquee, speed) } ;
}
< /script>
< /body>
< /html>
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< meta http-equiv= "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title> 向上滚动< /title>
< style>
* {
margin: 0 ;
padding: 0 ;
}
width: 200px;
height: 600px;
overflow: hidden;
margin: 10px;
}
.item {
width: 200px;
height: 200px;
}
.item img{
width: 100 %;
}
.item:nth-child( odd) {
background: skyblue;
}
.item:nth-child( even) {
background: pink;
}
< /style>
< /head>
< body>
< div id = "wrapper" >
< div class = "scroll_content" >
< div id = "list" >
< div class = "item" >
< img src = "../imgs/city1.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city2.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city3.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city4.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city5.png" alt = "" >
< /div>
< /div>
< div id = "list1" > < /div>
< /div>
< /div>
< script>
var speed = 10 ; //数字越大速度越慢
var wrapper = document.getElementById( "wrapper" ) ;
var list = document.getElementById( "list" ) ;
var list1 = document.getElementById( "list1" ) ;
list1.innerHTML = list.innerHTML; //克隆list为list1
function Marquee ( ) {
if ( list1.offsetTop - wrapper.scrollTop <= 0 )
wrapper.scrollTop -= list.offsetHeight
else {
wrapper.scrollTop++
}
}
var MyMar = setInterval( Marquee, speed) ;
wrapper.onmouseover = function ( ) { clearInterval( MyMar) } ;
wrapper.onmouseout = function ( ) { MyMar = setInterval( Marquee, speed) } ;
< /script>
< /body>
< /html>
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< meta http-equiv= "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title> 向下滚动< /title>
< style>
* {
margin: 0 ;
padding: 0 ;
}
width: 200px;
height: 600px;
overflow: hidden;
margin: 10px;
cursor: pointer;
}
.item {
width: 200px;
height: 200px;
}
.item img{
width: 100 %;
}
.item:nth-child( odd) {
background: skyblue;
}
.item:nth-child( even) {
background: pink;
}
< /style>
< /head>
< body>
< div id = "wrapper" >
< div class = "scroll_content" >
< div id = "list" >
< div class = "item" >
< img src = "../imgs/city1.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city2.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city3.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city4.png" alt = "" >
< /div>
< div class = "item" >
< img src = "../imgs/city5.png" alt = "" >
< /div>
< /div>
< div id = "list1" > < /div>
< /div>
< /div>
< script>
var speed = 10 ; //数字越大速度越慢
var tab = document.getElementById( "wrapper" ) ;
var tab1 = document.getElementById( "list" ) ;
var tab2 = document.getElementById( "list1" ) ;
tab2.innerHTML = tab1.innerHTML;
tab.scrollTop = tab.scrollHeight
function Marquee ( ) {
if ( tab1.offsetTop - tab.scrollTop >= 0 )
tab.scrollTop += tab2.offsetHeight
else {
tab.scrollTop--
}
}
var MyMar = setInterval( Marquee, speed) ;
tab.onmouseover = function ( ) { clearInterval( MyMar) } ;
tab.onmouseout = function ( ) { MyMar = setInterval( Marquee, speed) } ;
< /script>
< /body>
< /html>
