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

<!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" 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" src="网页图片和标注/首页/滑动点/y.png" />
</div>
</div>
</div>

</body>
</html>

时间: 2024-10-09 17:46:57

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

NGUI使用3——制作图集&amp;自定义按钮&amp;切换按钮图片

1,准备素材新建一个文件夹,命名为UITexture. 2,创建Atlas在Project面板中,进入UITexture 文件夹,选中这两张图片,然后 右键-->[NGUI]-->[Atlas Maker],之后你会看到 Atlas Maker 的界面:在 Atlas Maker 界面中,点击[Create]按钮. 之后给这个Atlas 起名为MyAtlas.prefab,点击[保存]. 3,预览Atlas和Sprite保存之后,这个新的Atlas 就创建好了.可以点击一下[View Spri

美工如何提供按钮图片给开发者

此篇文章写给可爱的美工们,希望能提供我们开发者易用规范的素材,好两三下就能用上,来制作漂亮的 iOS 按钮. 一般按钮有三个状态, 正常(normal)的状态,按钮大小请忽略, 实现这个效果,需要提供按钮图片,字体颜色,像这样的图片,50*50. 为什么是 50*50呢,而不是100*50,宽更长一些呢?因为图片的伸缩可以用代码来控制,提供正方形的就好.另外,四个角落需要是透明的,而不是白色的. 失效无法点击(disabled)的状态, 需要提供图片, 按钮的点击时的状态.为了有个点击效果,所以

android控件布局 ToggleButton按钮 图片和文字

ToggleButton控件具有checked属性对于要切换状态的功能按钮来说十分好用 这里以phone的开启DTMFTwelveKeyDialer的按钮为例 展示其效果和布局 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" andro

写了一个判断点击第几个按钮的JavaScript代码

写了一种判断点击第几个按钮的JavaScript代码如下: 1 <html> 2 <head> 3 <meta charset='utf-8'> 4 </head> 5 <body> 6 <button>第一个</button> 7 <button>第二个</button> 8 <button>第三个</button> 9 <button>第四个</butt

点击UserControl中的按钮将值传给winform页面

1.如图所示,点击选择按钮弹出用户控件UserControl 2.点击确定按钮,将值传给winform页面中的textbox 3.UserControl1的代码: public partial class UserControl1 : UserControl { public UserControl1() { InitializeComponent(); } public delegate void deleset(string n); public event deleset delevent

重复点击主界面(TabBar)按钮刷新界面--点击状态栏回到顶部

1.监听按钮点击 2.判断是否是点击的同一个按钮(记录上次点击的按钮) 3.当重复点击相同按钮时,需要获取当前按钮对应控制器刷新界面 3.1 判断是否重复点击按钮,代码写在哪里? 点击标题按钮,属于精华控制器的事情,所以找到精华控制器.写在点击按钮方法里面 3.2怎么拿到按钮对应的控制器? 通过当前按钮的tag值,从精华控制器的子控制器数组中去 3.3怎么让对应的控制器刷新界面? 在对应的控制器里面提供刷新方法,这样每个控制器都要写,太麻烦 之前我们抽取了父类,只需要在父类中提供一个刷新界面方法

selenium依次点击页面的删除按钮

需要依次点击页面的删除按钮,如下图: @Test public static void FaBu() { TestMenuJump.jumpExam(driver); TestMenuJump.jumpExamPa(driver); WebElement wes = driver.findElement(By.id("Category")); Select sc = new Select(wes); sc.selectByIndex(3); wes.submit(); //driver

点击jQuery Mobile的按钮改变颜色

jquery-mobile-移动 我有这样的代码来改变点击一个按钮的颜色: $('.fav').live('click', function(e) { $(this).buttonMarkup({ theme: "b" }); }); 我怎样才能再次单击该按钮返回到正常颜色(C)? 有没有办法看到一个按钮的状态? 因为它是活的,那么你可以只让自己的切换: $('.fav').live('click', function() { var dotoggle = $(this).attr(&

WinForm中如何判断关闭事件来源于用户点击右上角的“关闭”按钮

在C#的WinForm程序中,有的时候需要判定关闭请求从哪里发出来的.比如是用户点击了右上角的“关闭”按钮,还是调用了WinForm.Close()方法.最典型的是要知道点击右上角的“关闭”按钮发出的事件.下面这个方法可以判断这点: 程序代码 protected override void WndProc(ref Message msg) {         const int WM_SYSCOMMAND = 0x0112;         const int SC_CLOSE = 0xF060