js 实现图片的无缝滚动

 

js 实现图片的无缝滚动

CreateTime--2018年3月7日17:18:34

Author:Marydon 

  测试成功

DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="本网页内容描述">
<title>水平滚动-成功案例title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js">script>

<script type="text/javascript" src="../js/drawImage.js">script>

<script type="text/javascript" src="../js/marquee.js">script>

<script type="text/javascript">
    $(function(){
        var marquee = new Marquee();
        // 右滚动
        //marquee.init(null,null,"imgContainer", "imgContainer_child");
        // 左滚动
        marquee.init("left",null,"imgContainer", "imgContainer_child");
    });
script>
head>
<body>
    
    <div id="imgContainer"
        style="overflow: hidden; height: 140px; width: 426px; background: url(../images/bgImg.jpg);">
        <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td id="imgContainer_child">
                        <table border="0" cellpadding="11" cellspacing="0" style="margin-top: 9px;">
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="#" target="_blank" class="">
                                            <img src="../images/6.png"
                                                title="第一张" onload="javascript:DrawImage(this,145,100)"/>
                                        a>
                                    td>
                                    <td>
                                        <a href="#" target="_blank" class="">
                                            <img src="../images/9.png"
                                                title="第二张" onload="javascript:DrawImage(this,145,100)"/>
                                        a>
                                    td>
                                    <td>
                                        <a href="#" target="_blank" class="">
                                            <img src="../images/14.png"
                                                title="第三张" onload="javascript:DrawImage(this,145,100)"/>
                                        a>
                                    td>
                                tr>
                            tbody>
                        table>
                    td>
                tr>
            tbody>
        table>
    div>
body>
html>

  效果展示:

  左滚动

       

  右滚动

  

  说明:这是截的动态图,实际运行并不卡顿!

  这里只展示了左滚动和右滚动,想掌握上滚动与下滚动或获取源码+素材的童鞋,请看下方的指引“如何获取本人原创代码?”

 

 相关推荐:

  图片等比缩放,请移步至文章:js实现图片的等比例缩放

  图片无缝滚动,请移步至文章:marquee.js

 

你可能感兴趣的:(javascript,ViewUI)