• 点击两侧的上下按钮,图片相对应滚动。


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="Scripts/run.js" src="Scripts/run.js" type="text/javascript"></script>
    <style>
    #gd {
    list-style: none;
    height:655px;
    margin-left:-28px;
    border: 1px solid #F6C;
    }

    #gd li {
    527px;
    height: 658px;
    display: block;
    float: left;

    /*margin: 9px 15px;*/

    }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
    //alert($('#findclose').closest('div').attr('id'));
    var pic_length = $('#gd li').length;
    var n = 0;
    $('#toleft').click(function () {
    if (!$('#gd').is(':animated') && n) {
    $('#gd').animate({ left: '+=1640px' }, 800);
    n--;
    }
    });
    $('#toright').click(function () {
    if (!$('#gd').is(':animated') && pic_length > n + 5) {
    $('#gd').animate({ left: '-=1640px' }, 800);
    n++;
    }
    });
    })
    </script>

    </head>

    <body>

    <div style="1920px;height:904px;background:#f3f5f7;">
    <div style="height:100%; margin-left:2%;margin-right:2%;border:1px solid #ff00dc;">
    <p style="margin:0px; text-align:center;padding-top:50px;padding-bottom:50px; font-family:'汉仪特细等线简';font-size:40px;color:#222222;">成功项目实例</p>
    <div style="margin-top:15%;24px;height:48px;float:left;cursor:pointer; border:1px solid #0026ff;"id="toleft">
    <img width="24" height="48" alt="" src="网页图片和标注/首页/滑动点/z.png" />
    </div>
    <style>
    #gundongtude {
    padding-right: 20px;
    }
    </style>
    <div style="1650px;height:658px;float:left;overflow: hidden; border:1px solid #33F; margin-left:50px; margin-right:50px; " >
    <ul style="position:relative;9999em;" id="gd">
    <li id="gundongtude"><img src="网页图片和标注/首页/rolling1-1.png" width="527" height="658" /></li>
    <li id="gundongtude"><img src="网页图片和标注/首页/rolling2-1.png" width="527" height="658" /></li>
    <li id="gundongtude"><img src="网页图片和标注/首页/rolling3-1.png" width="527" height="658" /></li>
    <li id="gundongtude"><img src="网页图片和标注/首页/rolling4-1.png" width="527" height="658" /></li>
    <li id="gundongtude"><img src="网页图片和标注/首页/rolling2-1.png" width="527" height="658" /></li>
    <li id="gundongtude"><img src="网页图片和标注/首页/rolling3-1.png" width="527" height="658" /></li>
    </ul>
    </div>
    <div style="24px;height:46px;float:left;cursor:pointer;border:1px solid #000; margin-top:15%;" id="toright">
    <img width="24" height="46" alt="" src="网页图片和标注/首页/滑动点/y.png" />
    </div>
    </div>
    </div>

    </body>
    </html>

  • 相关阅读:
    随笔分类目录
    数据结构与算法
    ASP.NET Web网站中App_Code文件夹的作用及使用场景
    Java语言入门
    C#语言入门_基本介绍
    汇编语言入门
    学期总结
    王者光耀作业2
    王者光耀作业1
    第三次作业
  • 原文地址:https://www.cnblogs.com/leaflife/p/6785097.html
Copyright © 2020-2023  润新知