jquery控制左右箭头滚动图片列表的实例


Posted in Javascript onMay 20, 2013
<!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=gb2312" />
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
 <title>jq控制左右箭头滚动图片列表</title>
 <style type="text/css">
    *{ margin:0; padding:0;font-size: 12px;}
    ul{ list-style:none;}
     .slider{ width:760px;border: 1px #708090 solid; padding:10px 20px;height: 130px;margin: 100px auto;position: relative;cursor: pointer;}
     #slider_pic{ width: 630px;margin:0 auto;overflow: hidden;height: 130px;position: relative;}
     .prev,.next{position: absolute;width: 20px;height: 20px;cursor: pointer;top:60px;background-color: #daa520; text-align: center;line-height: 20px;font-weight: bold;color: #fff;}
     .next{right: 20px;}
     .no_click{background-color: #808080;}
     #slider_pic li{float: left;margin-right: 10px;}
     #slider_pic ul{position: absolute;left: 0;} </style>
     <script type="text/javascript">
         $(function(){
             var oPic=$('#slider_pic').find('ul');
             var oImg=oPic.find('li');
             var oLen=oImg.length;
             var oLi=oImg.width();
             var prev=$("#prev");
             var next=$("#next");
           oPic.width(oLen*210);//计算总长度
             var iNow=0;
             var iTimer=null;
             prev.click(function(){
                  if(iNow>0){  
                   iNow--;
                  }
                 ClickScroll();
             })
             next.click(function(){
                 if(iNow<oLen-3){ 
                     iNow++
                 }
                 ClickScroll();
             })
             function ClickScroll(){
                 iNow==0? prev.addClass('no_click'): prev.removeClass('no_click');
                 iNow==oLen-3?next.addClass("no_click"):next.removeClass("no_click");
                 oPic.animate({left:-iNow*210})
             }
         })
 
     </script>
 </head>
 <body>
     <div class="slider">
         <span class="prev no_click" id="prev"><<</span>
         <span class="next " id="next">>></span>
       <div id="slider_pic">
         <ul>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_01.jpg" width="200" height="130" /></li>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_02.jpg" width="200" height="130" /></li>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_03.jpg" width="200" height="130" /></li>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_04.jpg" width="200" height="130" /></li>
            <li><img src="http://images.3water.com/cnblogs_com/hxh-hua/478335/o_05.jpg" width="200" height="130" /></li>
            
          </ul>
       </div>
    </div>
 </body>
 </html>
Javascript 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
js继承的实现代码
Aug 05 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 #Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 #Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 #Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 #Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 #Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 #Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 #Javascript
You might like
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP实现小偷程序实例
2016/10/31 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python实现二叉树的遍历
2017/12/11 Python
Python切图九宫格的实现方法
2019/10/10 Python
python 实现生成均匀分布的点
2019/12/05 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
保洁主管岗位职责
2013/11/20 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
安全先进班组材料
2014/12/26 职场文书
指导教师推荐意见
2015/06/05 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android