图片向左无间隙循环滚动

最新推荐文章于 2021-08-26 17:38:28 发布
最新推荐文章于 2021-08-26 17:38:28 发布
阅读量722 收藏
点赞数
文章标签： border function table xhtml class html

 

网上摘的  稍做了下修改

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="图片滚动.aspx.cs" Inherits="Default2" %>

 

<!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">

        .style1

        {

            width: 154px;

        }

        .style2

        {

            width: 526px;

        }

    </style>

 </head>

 

<body>

 

   <table border="0" cellpadding="5" cellspacing="0" align="center" 

        style="height: 156px; width: 498px;">

      <tr>

        <td width="230">  //可根据实际情况调整 但不能过大 当过大时（能放下所有图片） 只会滚动一半就停止

     <div id="demo" style="overflow:hidden;height:100;width:250;color:#ffffff">

            <table align="left" cellpadding="0" cellspacing="0" border="0" 

                style="height: 144px; width: 485px">

               <tr>

        <td id="demo1" valign="top" class="style2"> 

         <table border="0" cellpadding="0" cellspacing="0">

                      <tr align="center"> //设置图片路径 和链接页面 其中更改this.style.zoom的值可改变鼠标停留是大小

                         <td class="style1"><a href="http://www.baidu.com" target="_blank"><img alt="" 

                                 src="E:/虚拟目录/WebSite/WebSite8/images1/1.jpg" width="150" hspace="3" border="0" 

                                 align="absmiddle" style="height: 111px"  οnmοuseοver="this.style.zoom='150%'" οnmοuseοut="this.style.zoom='100%'"/></a></td>

                         <td><a href="#" target="_blank"><img alt="" 

                                 src="E:/虚拟目录/WebSite/WebSite8/images1/5.jpg" width="150" hspace="3"  border="0" 

                                 align="absmiddle" style="height: 115px"  οnmοuseοver="this.style.zoom='150%'" οnmοuseοut="this.style.zoom='100%'"/></a></td>

                         <td><a href="#" target="_blank"><img alt="" 

                                 src="E:/虚拟目录/WebSite/WebSite8/images1/6.jpg" width="150"  hspace="3" border="0" 

                                 align="absmiddle" style="height: 112px"  οnmοuseοver="this.style.zoom='150%'" οnmοuseοut="this.style.zoom='100%'"/></a></td>            

          </tr>

               </table>

        </td>

           <td id="demo2" valign="top"></td>

         </tr>

      </table>

     </div>

           <script type="text/javascript">

               var speed = 15//速度数值越大速度越慢

               demo2.innerHTML = demo1.innerHTML

               function Marquee() {

                   if (demo2.offsetWidth - demo.scrollLeft <= 0)

                   { demo.scrollLeft -= demo1.offsetWidth }

                   else { demo.scrollLeft++ }

               }

               var MyMar = setInterval(Marquee, speed)

               demo.onmouseover = function() { clearInterval(MyMar) }

               demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }

        </script> 

     </td>

     </tr>

   </table>

   </body>

</html>

 

脾气不坏
关注
（20）JS实现简单的图片向左无缝滚动
虚心求学_一点一滴
05-31 7044
思路： *{margin:0;padding:0;} #div1{width: 712px;height: 108px;margin:100px auto;position: relative;background: red;overflow: hidden;} #div1 ul{position: absolute;left: 0;top: 0;} #div1 ul li{floa
图片从右向左循环滚动
04-19
NULL 博文链接：https://scyy.iteye.com/blog/1874409
图片不间断向左移动
u012475710的专栏
10-23 598
01       02       03       04       05       06       07       08       09                       var speed=50 marquePic2.innerHTML=marquePic1.innerHTML function Marquee(){
图片由右向左循环滚动
qq751383708的专栏
07-23 323
var istop = 1;             var LorR = 0;             var speed = 30;             var divDemo = document.getElementById("divDemo");             var marquePic1 = document.getElementById("marquePic1"
图片向左滚动的效果
qq_44538193的博客
02-20 792
图片向左滚动的效果 开发工具与关键技术：Adobe Dreamweaver CC 2018 作者：李德新 撰写时间：2019年02月 15日 jquery插件是我们学习IT技术必须学会的使用的技术，而js代码也是非常重要的，所以现在我来演示一下图片向左滚动的效果。 首先的布局很重要，先要按要求布置好布局才能实现图片向左滚动的效...
图片一直滚动，循环滚动，竖向和横向,还有从左滚动到右再从右滚动到左
Allence的博客
08-26 351
竖向： public class ScrollingImageView extends View { private final int speed; private final Bitmap bitmap; private Rect clipBounds = new Rect(); private float offset = 0; private boolean isStarted; public ScrollingImageView(Conte
JS不间断向左滚动无缝隙
03-21
JS不间断向左滚动javascript无缝隙
DIV+CSS+JS图片无间隙无限滚动从右到左
07-13 474
话不多说直接上代码！！！ <!-- CSS --> <style> .index_photo_con{width: 100%; height: 212px;margin-top: 20px;overflow:hidden;wdisplay:inline-block;white-space:nowrap;} .index_photo_con ul{overflow:hidden;display:inline-block;white-space:nowrap;} .index_pho
html实现段落左右无缝滚动,javascript实现左右控制无缝滚动
weixin_42467533的博客
06-09 422
无缝滚动是项目中经常需要用到的一种特效，网上也有很多的示例代码，这里给大家分享的是一段比较简单实用的，而且兼容性也不错的代码，小伙伴们仔细研究下吧。html 代码：<html><head lang="en"><meta charset="UTF-8"><title>无缝滚动title><script src="js/0010.js"&gt...
html不间断滚动图片,图片不间断滚动代码（详解）
weixin_35578119的博客
06-04 1233
先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。先了解一下对象的...
vue 一个超级简单的无缝图片滚动
qq_42257997的博客
11-11 3680
由于项目需要，我的滚动不设置自动滚动，不设置定时，添加定时也不难，在调用滚动函数的时候加个定时就ok 项目大概如下：点击左右箭头实现无缝滚动 设计思路：点击左箭头，数组首元素添加到最后一个并删除；点击右箭头，数组最后尾元素添加到第一个并删除 代码如下 template部分 script部分 clickLeft(){ let direction = 'left' this.scrollImg(direction) }, clickRight(){ le
[经典代码]图片不断循环向左滚动代码(可修改滚动方向)
weixin_34388207的博客
04-01 830
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 450px; COLOR: #ffffff"> <TABLE border=0 cellPadding=0 cellSpacing=0 cellspace="0"> <TBODY> <TR> <TD id=demo1 vAli...
Html笔记——实现一组图片循环且首尾相连的滚动效果
PettyKoKo
11-02 4万+
设计思想：在一个Div内存放两个相同内容（使用一行多列表格）作为一个滚动对象，并将超出的宽度的内容隐藏，在JS脚本中定义Div向移动的方法（水平坐标加1）。当第一个内容完全消失（即Div向左移动的距离达到该Div的宽度，此时第二个内容完全显示)时，将滚动条的坐标复位，开始新的一轮。 代码如下： <html> <head> <meta http-equiv="C...
html图片左右无缝循环滚动示例
热门推荐
喻志强的博客
11-28 4万+
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。 原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。下面是代码实现和demo<!DOCTYPE html> <html> <head> <meta charse
div的图片向左不间断滚动
quweiie的专栏
01-20 3316
图片 向左 滚动 div
用html把图片整体往左挪动,网页制作如何让图片从左到右循环移动
weixin_35461822的博客
05-31 4124
满意答案tyler5692015.11.03采纳率：51%等级：7已帮助：460人网页制作(HTML)让图片从左到右循环移动使用 css +js完成。例如：从左向右循环移动图片向右循环滚动var speed = 30;demo2.innerHTML = demo1.innerHTML;function Marquee() {if(demo.scrollLeft<=0)demo.scr...
JS控制点击按钮图片向左或向右循环移动滚动效果
wlimin0523的专栏
12-02 8362
JS控制点击按钮图片向左或向右移动效果 演示 TABLE { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BO
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值