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

CentOS7 installation zabbix 4.0 tutorial (illustration and text)

Disable SeLinux setenforce 0 Permanently closed: ...

js implements mouse switching pictures (without timer)

This article example shares the specific code of ...

How to solve nginx 503 Service Temporarily Unavailable

Recently, after refreshing the website, 503 Servi...

Detailed installation tutorial of mysql-8.0.11-winx64.zip

Download the zip installation package: Download a...

Detailed explanation of MySQL startup options and system variables examples

Table of contents Boot Options Command Line Long ...

html option disable select select disable option example

Copy code The code is as follows: <select> ...

How to implement Docker Registry to build a private image warehouse

The image of the microservice will be uploaded to...

How to install MySQL 8.0 database on M1 chip (picture and text)

1. Download First of all, I would like to recomme...

Understand the basics of Navicat for MySQL in one article

Table of contents 1. Database Operation 2. Data T...

Analysis of problems caused by MySQL case sensitivity

MYSQL is case sensitive Seeing the words is belie...

Detailed explanation of non-parent-child component value transfer in Vue3

Table of contents App.vue sub1.vue sub2.vue Summa...

MySQL 8.0 user and role management principles and usage details

This article describes MySQL 8.0 user and role ma...

Summary of Mysql table, column, database addition, deletion, modification and query problems

The following is some basic sql knowledge I have ...

Detailed steps for porting busybox to build a minimal root file system

Busybox: A Swiss Army knife filled with small com...

Detailed explanation of CocosCreator Huarongdao digital puzzle

Table of contents Preface text 1. Panel 2. Huaron...