基于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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
jQuery操作之效果详解
May 19 jQuery
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
JavaScript中条件语句的优化技巧总结
Dec 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Python操作SQLite简明教程
2014/07/10 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python清空文件并替换内容的实例
2018/10/22 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
日期和时间问题
2015/01/04 面试题
售后求职信范文
2014/03/15 职场文书
妇联主席先进事迹
2014/05/18 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
水电工岗位职责
2015/02/14 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python