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

Vue implements simple data two-way binding

This article example shares the specific code of ...

...

How to determine if the Linux system is installed on VMware

How to determine whether the current Linux system...

MySQL 8.0 upgrade experience

Table of contents Preface 1. First completely uni...

How to install yum source and upload and download commands rz and sz under CentOS7 (with pictures)

** Detailed graphic instructions for installing y...

Example statements for indexes and constraints in MySQL

Foreign Keys Query which tables the primary key o...

Solve the problem that the repository and tag names are both none after Docker loads a new image

You can use the command: docker tag [image id] [n...

The most commonly used HTML escape sequence

In HTML, <, >, &, etc. have special mean...

Complete steps to quickly configure HugePages under Linux system

Preface Regarding HugePages and Oracle database o...

Basic usage tutorial of MySQL slow query log

Slow query log related parameters MySQL slow quer...

Detailed explanation of the solution to the nginx panic problem

Regarding the nginx panic problem, we first need ...

Avoiding Problems Caused by Closures in JavaScript

About let to avoid problems caused by closure Use...

Summary of the benefits of deploying MySQL delayed slaves

Preface The master-slave replication relationship...

Detailed explanation of JS ES6 variable destructuring assignment

Table of contents 1. What is deconstruction? 2. A...

Detailed explanation of overlay network in Docker

Translated from Docker official documentation, or...