基于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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
如何利用node转发请求详解
Sep 17 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中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
php curl常用的5个经典例子
2017/01/20 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
javascript 动态添加表格行
2006/06/22 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
岗位职责风险点
2014/03/12 职场文书
学生安全责任书
2014/04/15 职场文书
教师个人考察材料
2014/12/16 职场文书
谢师宴邀请函
2015/02/02 职场文书
商务英语求职信范文
2015/03/19 职场文书
自我推荐信格式模板
2015/03/24 职场文书