jquery实现的图片点击滚动效果


Posted in Javascript onApril 29, 2014

需要添加jquery文件才可以调试

<script type="text/javascript" src="jquery.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:'+=120px'},500); 
n--; 
} 
}); 
$('#toright').click(function(){ 
if (!$('#gd').is(':animated') && pic_length > n+5) 
{ 
$('#gd').animate({left:'-=120px'},500); 
n++; 
} 
}); 
}) 
</script> 
<style type="text/css"> 
ul{ 
list-style:none; 
margin:0px; 
padding:0px; 
text-align:center; 
} 
#gd li { 
width:90px; 
height:80px; 
display:block; 
float:left; 
margin:9px 15px; 
} 
</style> 
<div style="width:702px;height:100px;background:#ccc;margin:0 auto"> 
<div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toleft"></div> 
<div style="width:600px;height:98px;float:left;border:1px solid #777;overflow: hidden;"> 
<ul style="list-style: none outside none;height:98px;display:block;background:yellow;position:relative;width:9999em;" id="gd"> 
<li style="background:red"></li> 
<li style="background:orange"></li> 
<li style="background:green"></li> 
<li style="background:navy"></li> 
<li style="background:blue"></li> 
<li style="background:purple"></li> 
<li style="background:pink"></li> 
<li style="background:gray"></li> 
</ul> 
</div> 
<div style="width:30px;height:30px;background:red;margin:35px 10px;float:left;cursor:pointer;" id="toright"></div> 
</div>
Javascript 相关文章推荐
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
vue里input根据value改变背景色的实例
Sep 29 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 #Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 #Javascript
jquery form 隐藏的input 选择
Apr 29 #Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 #Javascript
window resize和scroll事件的基本优化思路
Apr 29 #Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 #Javascript
JS截取url中问号后面参数的值信息
Apr 29 #Javascript
You might like
php结合表单实现一些简单功能的例子
2011/06/04 PHP
php中fsockopen用法实例
2015/01/05 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python实用代码片段收集贴
2015/06/03 Python
Python中turtle作图示例
2017/11/15 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Keras loss函数剖析
2020/07/06 Python
Python logging模块handlers用法详解
2020/08/14 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
历史教育专业个人求职信
2013/12/13 职场文书
竞职演讲稿范文
2014/01/11 职场文书
秋季运动会稿件
2014/01/30 职场文书
医院标语大全
2014/06/23 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
企业催款函范本
2015/06/24 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers