前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了.

css代码:

 <style type="text/css">

         .scroll_div {

             width: 1000px;

             height: 250px;

             margin: 0 auto;

             overflow: hidden;

             white-space: nowrap;

             background: #ffffff;

         }

         .scroll_div img {

             width: 250px;

             height: 250px;

             border:;

             border: 1px #efefef solid;

         }

         #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li {

             display: inline;

         }

javascript代码:

 <script language="javascript">

         function scroll_img_left() {

             var speed = 20

             var scroll_begin = document.getElementById("scroll_begin");

             var scroll_end = document.getElementById("scroll_end");

             var scroll_div = document.getElementById("scroll_div");

             scroll_end.innerHTML = scroll_begin.innerHTML

             function Marquee() {

                 if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)

                     scroll_div.scrollLeft -= scroll_begin.offsetWidth

                 else

                     scroll_div.scrollLeft++

             }

             var MyMar = setInterval(Marquee, speed)

             scroll_div.onmouseover = function () {

                 clearInterval(MyMar)

             }

             scroll_div.onmouseout = function () {

                 MyMar = setInterval(Marquee, speed)

             }

         }

     </script>

html代码:

<div class="">

        <div id="scroll_div" class="scroll_div">

            <div id="scroll_begin">

                <ul>

                    <li><a href=""><img src="data:image/11.jpg"/></a></li>

                    <li><a href=""><img src="data:image/222.jpg"/></a></li>

                    <li><a href=""><img src="data:image/444.jpg"/></a></li>

                    <li><a href=""><img src="data:image/555.jpg"/></a></li>

                </ul>

            </div>

            <div id="scroll_end"></div>

        </div>

    </div>

完整html页面代码:

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

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

    <title>javascript-图片横向无缝隙滚动(可在服务器运行)</title>

    <style type="text/css">

        .scroll_div {

            width: 1000px;

            height: 250px;

            margin: 0 auto;

            overflow: hidden;

            white-space: nowrap;

            background: #ffffff;

        }

        .scroll_div img {

            width: 250px;

            height: 250px;

            border: 0;

            border: 1px #efefef solid;

        }

        #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li {

            display: inline;

        }

    </style>

    <script language="javascript">

        function scroll_img_left() {

            var speed = 20

            var scroll_begin = document.getElementById("scroll_begin");

            var scroll_end = document.getElementById("scroll_end");

            var scroll_div = document.getElementById("scroll_div");

            scroll_end.innerHTML = scroll_begin.innerHTML

            function Marquee() {

                if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)

                    scroll_div.scrollLeft -= scroll_begin.offsetWidth

                else

                    scroll_div.scrollLeft++

            }

            var MyMar = setInterval(Marquee, speed)

            scroll_div.onmouseover = function () {

                clearInterval(MyMar)

            }

            scroll_div.onmouseout = function () {

                MyMar = setInterval(Marquee, speed)

            }

        }

    </script>

</head>

<body onload="scroll_img_left()">

<div style="text-align:center">

    <div class="">

        <div id="scroll_div" class="scroll_div">

            <div id="scroll_begin">

                <ul>

                    <li><a href=""><img src="data:image/11.jpg"/></a></li>

                    <li><a href=""><img src="data:image/222.jpg"/></a></li>

                    <li><a href=""><img src="data:image/444.jpg"/></a></li>

                    <li><a href=""><img src="data:image/555.jpg"/></a></li>

                </ul>

            </div>

            <div id="scroll_end"></div>

        </div>

    </div>

</div>

<!--//向左滚动代码结束-->

</body>

</html></td>

</tr>

</table>

javascript-图片横向无缝隙滚动(可在服务器运行)的更多相关文章

  1. javascript-图片横向无缝隙滚动

    <style type="text/css"> <!-- ul,li,div{margin:0; padding:0; font-size:12px;} #dem ...

  2. Js上下左右无缝隙滚动代码

    转载:http://www.cnblogs.com/chenjt/p/4193464.html 主要用到dom.offsetWidth 这个表示实际的宽度. dom.scrollLeft 这个表示这个 ...

  3. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  4. flash滑杆控制图片横向滚动

    flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html

  5. 横向不间断滚动DIV

    横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  6. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  9. javascript焦点图之垂直滚动

    html代码布局,需要用到定位,不细说了 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. WordPress RokNewsPager插件‘thumb.php’多个安全漏洞

    漏洞名称: WordPress RokNewsPager插件‘thumb.php’多个安全漏洞 CNNVD编号: CNNVD-201309-369 发布时间: 2013-09-24 更新时间: 201 ...

  2. （转载）php获取form表单中name相同的表单项

    (转载)http://hi.baidu.com/ruhyxowwzhbqszq/item/5fd9c8b9b594db47ba0e12a9 比如下面的表单: /*form.php*/ <form ...

  3. 数学类杂志SCI2013-2014影响因子

    ISSN Abbreviated Journal Title Full Title Category Subcategory Country total Cites IF        2013-20 ...

  4. bootstrap easyUI 的选型

    最近开始搭建新的项目后台,开始在Bootstrap 和 EasyUI两个框架上选型,个人还是倾向于Bootstrap,毕竟这个响应式效果是个趋势,并且可以自动兼容不同的屏幕分辨率和设备.

  5. Linux内核学习笔记3——分段机制和分页机制

    一 分段机制 1.什么是分段机制 分段机制就是把虚拟地址空间中的虚拟内存组织成一些长度可变的称为段的内存块单元. 2.什么是段 每个段由三个参数定义:段基地址.段限长和段属性. 段的基地址.段限长以及 ...

  6. RGB Bayer Color分析

    RGB Bayer Color分析 Bayer色彩滤波阵列 拜耳色彩滤波阵列(Bayer Color Filter Array,CFA)是非常有名的彩色图片的数字采集格式.色彩滤波器的模式如上图所示, ...

  7. Nginx对于图片,js等静态文件的缓存设置

    以下是自学it网--中级班上课笔记 网址:www.zixue.it Nginx对于图片,js等静态文件的缓存设置 注:这个缓存是指针对浏览器所做的缓存,不是指服务器端的数据缓存. 主要知识点: loc ...

  8. Sruts2文件上传的ContentType的取值列表

    ".*"="application/octet-stream" ".001"="application/x-001" & ...

  9. Unity3D跨平台时partial分部方法的使用

    最近看到项目中插件的一部分逻辑,发现问题多多,可读性很差,并且容易出错,于是随手整理了下逻 辑.Unity3D的插件逻辑,因为要考虑到针对各平台的移植,因此会大片的出现#if/#endif等条件编译, ...

  10. 英文Ubantu系统安装中文输入法

    以前都是安装的中文Ubantu,但是有时候用命令行的时候中文识别不好,会出现错误,所以这次安装了英文版,但是安装后发现输入法不好用,于是就要自己安装输入法. 安装环境为Ubantu13.04 1.卸载 ...