文字和图片向左循环滚动

最新推荐文章于 2021-09-24 10:41:51 发布
最新推荐文章于 2021-09-24 10:41:51 发布
阅读量771 收藏
点赞数 1
分类专栏： javascript 文章标签： class div scroll float border timer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xu651871110/article/details/6620192
版权 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css" media="all">
        body
        {
            background-color: #ccc;
          
            font-size: 12px;
        }
        .d1
        {
            margin: 0 auto;
            width: 870px;
            overflow: hidden;
            white-space: nowrap; border-left:1px double #000;border-right:1px double #000;
        }
        .div2
        {
            float: left;
        }
        ul
        {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        a:link, a:visited
        {
            color: #000000;
            text-decoration: none;
        }
        a:hover
        {
            color: #000000;
            text-decoration: underline;
        }
        .d{border: 1px double #000; height: 122px; width: 202px;}
        .de ul li
        {
            display: inline;
        }
        .demo
        {
            float: left;
            width: 90px;
            height: 100px;
        }
        .demo ul li
        {
             display:block
        }
        .de1{float: right; width: 100px; height: 120px; border: 1px double #ccc;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="d1" id="div1" οnmοuseοver="clearInterval(timer)" οnmοuseοut="timer=setInterval(mar,30)">
        <div class="scroll" id="scroll">
            <div class="div2" id="div2">
                <ul>
                    <li>
                        <div class="de">
                            <table>
                                <tr>
                                    <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>1</li>
                                                    <li>1</li>
                                                    <li>1</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/sun_yan_zi.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>2</li>
                                                    <li>2</li>
                                                    <li>2</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/an_yi_xuan.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>3</li>
                                                    <li>3</li>
                                                    <li>3</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/wang_xin_ling.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>4</li>
                                                    <li>4</li>
                                                    <li>4</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/chen_hui_lin.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                     <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>5</li>
                                                    <li>5</li>
                                                    <li>5</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/ye_xuan.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                     <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>6</li>
                                                    <li>6</li>
                                                    <li>6</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/guan_zhi_lin.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                     <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>7</li>
                                                    <li>7</li>
                                                    <li>7</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/liu_ruo_ying.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                     <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>8</li>
                                                    <li>8</li>
                                                    <li>8</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/chen_qiao_en.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                     <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>9</li>
                                                    <li>9</li>
                                                    <li>9</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/zhang_man_yu.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                     <td>
                                        <div class="d">
                                            <div class="demo">
                                                <ul>
                                                    <li>10</li>
                                                    <li>10</li>
                                                    <li>10</li>
                                                </ul>
                                            </div>
                                            <div class="de1">
                                                <img src="http://list.image.baidu.com/t/image_category/galleryimg/womenstar/hk/lin_xin_ru.jpg" />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="div3" class="div2">
            </div>
        </div>
    </div>

    <script language="javascript" type="text/javascript">
var s,s2,s3,s4,timer;
function init(){
s=getid("div1");
s2=getid("div2");
s3=getid("div3");
s4=getid("scroll");
s4.style.width=(s2.offsetWidth*2+100)+"px";
s3.innerHTML=s2.innerHTML;
timer=setInterval(mar,30)
}
function mar(){
if(s2.offsetWidth<=s.scrollLeft){
s.scrollLeft-=s2.offsetWidth;
}else{s.scrollLeft++;}
}
function getid(id){
return document.getElementById(id);
}
window.οnlοad=init;
    </script>

    </form>
</body>
</html>

靓仔
关注
专栏目录
JQuery 文字图片循环不间断滚动（向左）
zhangwike的专栏
08-23 1万+
公告信息                                                                                                         function MqObj(obj, width, height, speed) {             o
文字左右循环滚动
xyz的博客
07-29 2809
1.如下，a.html： jQuery公告文字左右滚动效果-www.jb51.net #scrollText { width: 400px; margin-right: auto; margin-left: auto; } $(document).ready(function(e) { ScrollText($('#scrollTex
【html效果】使文字来回移动，当鼠标放上去停止
解惑者
03-12 3148
使文字来回移动，当鼠标放上去停止：
li ul vue 滚动显示_vue ul循环滚动的问题
weixin_39815925的博客
12-22 702
图片描述想实现首尾相连的滚动效果 滚动是可以 但是不是循环的 滚动到最后一个之后 整个列表又被拉下来了， 要怎样才能实现这种循环连续滚动呢 代码改了无数次 搞了好多天了 还是没弄好 太愁人了 大家指点指点迷津 实在弄不好了我的代码网站公告:class="{'prev':prevIndex===index,'current':currentIndex===index||index===curre...
Vue中左右循环滚动文字或图片
行内元素如何居中
09-24 2084
<template> <div class="bottom_zj"> <div ref="innerref" class="outer-box" @mouseenter="mouseenter" @mouseleave="mouseleave" > <div ref="innerref1" class="inner-box1"> &lt
向左滚动html,循环向左滚动 JS CSS
weixin_29009669的博客
06-07 485
下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。// JavaScript Document//滚动function GetGundong(demoStr,demoStr1,demoStr2,speed){var demo=document.getElementById(demoStr);var demo1=document.getElem...
jQuery使用数组编写图片无缝向左滚动
10-27
此外，如果想实现循环滚动，可能需要额外的逻辑来处理数组的索引，并在滚动到最后一张图片后将其重置到第一张图片。 通过以上知识点的介绍，我们可以看出实现一个jQuery图片无缝滚动效果，需要结合jQuery的选择器、...
多种JQuery循环滚动文字图片效果代码
10-22
在给定文件中，提及的“多种JQuery循环滚动文字图片效果代码”指的是一系列通过JQuery实现的动态效果，它能够让页面上的文字或图片在指定方向上循环滚动，可以是横向或纵向。通过调用特定的JQuery插件或编写自定义的...
VUE实现从左到右滚动或从右至左滚动
05-31
本教程将详细讲解如何使用Vue.js实现从左到右或从右至左的滚动效果，适用于展示文字或图片内容。 首先，确保你已经安装了Vue.js环境。如果你还没有设置，可以使用官方推荐的Vue CLI工具来快速创建一个新的项目。...
JS不间断向左右循环滚动
06-16
在提供的两个HTML文件中，"JS不间断右滚动.html"和"JS不间断向左滚动.html"可能分别实现了向右和向左的滚动效果。这两个文件可能包含了上述步骤的示例代码，可以作为学习和参考的模板。 需要注意的是，为了实现平滑...
js实现文字从右滚动到左边代码循环滚动实例
热门推荐
任聪聪的博客
09-07 2万+
以下是代码实例：<div style="background:#333;"> <div id="tgBigox"> <div id="tgGoox"> <a href="" target="_blank"></a> </div> </div> </div> <script type="text/j
让图片在c#的winform中的picturebox控件里循环滑动
weixin_41529093的博客
04-04 2839
仅作为操作记录，大佬请跳过。 文章目录背景实现思路功能代码 背景 博主想把多个图片，放在1个picturebox里；想通过点按钮的方式，在这一个picturebox里显示不同的图片——(相当于百度图片里的>按钮控制图片的切换的效果：) 实现思路 1、将多张图片的路径(如 E:\\code\\matlabandcsharp)，以字符串的形式存在一个大的数组里： 如大数组a={“E:\\co...
文字向左无缝滚动
金双林
08-04 3079
下面是文字向左无缝滚动的实例，仅供参考。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&...
js实现公告栏文字从右向左匀速循环滚动，且公告内容可以随时增减
gaiery的博客
11-01 6530
实现思路 滚动内容的left值初始化为外部box宽度（注意：css中设置相对定位）； 每0.1s ,left值-5，直到left值=-滚动内容宽度，证明滚到到头了； 此刻，回归最右侧，left=box宽度。 html代码如下： &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&am
Pytorch文本分类(imdb数据集)，包含DataLoader数据加载，最优模型保存
最新发布
09-15
Pytorch文本分类(imdb数据集)，包含DataLoader数据加载，最优模型保存_Pytorch-imdb-classification
5001-微信小程序家庭记账本的设计与实现+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
JavaScript实现无限循环左滚动图片
"JS不间断向左滚动是一种常见的网页动态效果，通过JavaScript实现图片或文本的自动循环滚动，常用于新闻资讯、广告展示等场景。此示例代码展示了一个简单的图片不间断向左滚动的效果，利用了HTML、CSS和JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值