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 面向对象编程(1) 基础
May 18 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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
pw的一个放后门的方法分析
2007/10/08 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
python 域名分析工具实现代码
2009/07/15 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
门卫班长岗位职责
2013/12/15 职场文书
九年级英语教学反思
2014/01/31 职场文书
工作说明书范文
2014/05/07 职场文书
数学系毕业生求职信
2014/05/29 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
培训心得体会怎么写
2016/01/25 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python