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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
js选项卡的制作方法
Jan 23 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
JS实现音量控制拖动
Jan 15 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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来处理多个提交任务
2008/05/08 PHP
php修改时间格式的代码
2011/05/29 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python语言快速上手学习方法
2018/12/14 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
创立科技Java面试题
2015/11/29 面试题
办公室文员工作自我评价
2013/12/01 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
重阳节慰问信
2015/02/15 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript