博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
点击两侧的上下按钮,图片相对应滚动。
阅读量:5099 次
发布时间:2019-06-13

本文共 2609 字,大约阅读时间需要 8 分钟。

<!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 {

width: 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="width: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%;width: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="width:1650px;height:658px;float:left;overflow: hidden; border:1px solid #33F; margin-left:50px; margin-right:50px; " >
<ul style="position:relative;width: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="width: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>

转载于:https://www.cnblogs.com/leaflife/p/6785097.html

你可能感兴趣的文章
PAT (Basic Level) Practise (中文)- 1022. D进制的A+B (20)
查看>>
数据类型和变量
查看>>
服务端的GET、POST请求
查看>>
Python之文件操作工具
查看>>
浅谈SQLiteOpenHelper之onCreate例子
查看>>
证券市场主体
查看>>
Educational Codeforces Round 69 (Rated for Div. 2) A - DIY Wooden Ladder
查看>>
stm32之CMSIS标准、库目录、GPIO
查看>>
Dima and Lisa
查看>>
JAVA编程思想中总结的与C++的区别
查看>>
HBase基准性能测试报告
查看>>
在.NET使用JSON作为数据交换格式
查看>>
hdu-2586-How far away ?(离线LCA)
查看>>
几种常见的十进制代码(笔记)
查看>>
javase的一些基础(4)
查看>>
Objective-C类和对象总结
查看>>
laravel的phpstorm插件laravel-ide-helper
查看>>
Kth Smallest Element in a BST
查看>>
Git Submodule管理项目子模块
查看>>
修改登录密码
查看>>