Div picture marquee seamless connection implementation code

Div picture marquee seamless connection implementation code

Copy code
The code is as follows:

<html>
<head>
<style type="text/css">
<!--
#demo {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #98CBFF;
margin-bottom: 10px;
margin-left: 5px;
overflow: hidden;
padding: 0 0 5px;
width: 948px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
.box {
border: 1px solid #98CBFF;
float: left;
margin: 7px 10px;
overflow: hidden;
padding: 5px;
width: 150px;
}
-->
</style>
</head>
<body>

Image scrolls left seamlessly Scrolls left

Copy code
The code is as follows:

<div id="demo">
<div id="indemo">
<div id="demo1">
<div class="box">
<a href="#"><img src="upload/2022/web/Clear_logo.gif" border="0" /></a>
<p>Your number</p>
hello
</div>
<div class="box">
<a href="#"><img src="upload/2022/web/Clear_logo.gif" border="0" /></a>
<p>idiot</p>
stupid
</div>
<div class="box">
<a href="#"><img src="upload/2022/web/Clear_logo.gif" border="0" /></a>
</div>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //The larger the number, the slower the speed
var tab = document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
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>

<<:  MySQL extracts Json internal fields and dumps them as numbers

>>:  Linux swap partition (detailed explanation)

Recommend

Introduction to commonly used fonts on the Web (fonts supported by iOS and Android browsers)

It's the end of the year and there are fewer ...

Optimize the storage efficiency of BLOB and TEXT columns in InnoDB tables

First, let's introduce a few key points about...

Detailed explanation of how to clear a few pixels of blank space under an image using CSS

Recently, a friend asked me a question: When layo...

CSS easily implements fixed-ratio block-level containers

When designing H5 layout, you will usually encoun...

MySQL 5.7.20 Green Edition Installation Detailed Graphic Tutorial

First, let’s understand what MySQL is? MySQL is a...

Detailed explanation of the process of deleting the built-in version of Python in Linux

Big pit, don't easily delete the version of P...

Detailed explanation of styles in uni-app

Table of contents Styles in uni-app Summarize Sty...

Detailed explanation of MySQL basic operations (Part 2)

Preface This article contains 1. Several major co...

Graphic tutorial on installing tomcat8 on centos7.X Linux system

1. Create the tomcat installation path mkdir /usr...

How to stop CSS animation midway and maintain the posture

Preface I once encountered a difficult problem. I...

How to use vue filter

Table of contents Overview Defining filters Use o...

8 tips for Vue that you will learn after reading it

1. Always use :key in v-for Using the key attribu...

Front-end JavaScript Promise

Table of contents 1. What is Promise 2. Basic usa...

Implementation of CSS equal division of parent container (perfect thirds)

The width of the parent container is fixed. In or...

HTML+CSS3 code to realize the animation effect of the solar system planets

Make an animation of the eight planets in the sol...