基于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 相关文章推荐
js检查页面上有无重复id的实现代码
Jul 17 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 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+oracle 分页类
2006/10/09 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
vue this.reload 方法 配置
2018/09/12 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python语言描述最大连续子序列和
2017/12/05 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python内置加密模块用法解析
2019/11/25 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python中可以声明变量类型吗
2020/06/18 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
师范生自我鉴定
2014/03/20 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
环保标语大全
2014/06/12 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
Linux中sftp常用命令整理
2022/06/28 Servers