基于javascript滚动图片具体实现


Posted in Javascript onNovember 18, 2013

基于javascript滚动图片具体实现

前台:

 <div class="block">
            <div class="title">
                <strong>服务展示 </strong>
            </div>
            <div class="content" id="showroom">
                <div class="wrapper index_footer_slide">
                    <div id="index_foot_slide">
                        <div id="in_index_foot_slide">
                            <div id="index_foot_slide1">
                                <asp:Repeater ID="repBottomPictures" runat="server">
                                    <ItemTemplate>
                                        <a href="">
                                            <img src='<%#Eval("ImageUrl")%>' /></a>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                            <div id="index_foot_slide2">
                                <asp:Repeater ID="Repeater1" runat="server">
                                    <ItemTemplate>
                                        <div>
                                            <a href="">
                                                <img src='<%#Eval("ImageUrl")%>' /></a></div>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

javascript:

    var speed=12; //数字越大速度越慢
    var tab=document.getElementById("index_foot_slide");
    var tab1=document.getElementById("index_foot_slide1");
    var tab2=document.getElementById("index_foot_slide2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
    if(tab.scrollLeft<=0)
    tab.scrollLeft+=tab2.offsetWidth
    else{
    tab.scrollLeft--
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
Javascript 相关文章推荐
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 #Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 #Javascript
Jquery取得iframe下内容的方法
Nov 18 #Javascript
JavaScript实现的日期控件具体代码
Nov 18 #Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 #Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 #Javascript
js call方法详细介绍(js 的继承)
Nov 18 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python中模块的__all__属性详解
2017/10/26 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Django学习之文件上传与下载
2019/10/06 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
企业标语口号
2014/06/10 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
幼师个人总结范文
2015/02/28 职场文书
借款民事起诉状范文
2015/05/19 职场文书
军训后的感想
2015/08/07 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android