<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <script src="http://code.jquery.com/jquery-latest.js"></script>

      <style type="text/css" media="screen">

        .content{width: 500px; height: 500px;position: relative; margin:50px auto; }

        .content span{cursor:pointer;width: 20px; height: 20px; display: inline-block; position: absolute;background-color:#f00; top:50%; margin-top: -10px;  }

        .content #prev{left: 10px;}

        #bgcc{width: 400px; height: 400px; background-color: #ccc;position: absolute; top: 50px; left: 50px;}

        .content #next{right: 10px;}

          #picNum{position: absolute; width: 80px; text-align: center; top: 26px; display: inline-block;   left: 50%; margin-left: -40px; font-size: 18px;}

      </style>

 </head>

 <body>

     <div class="content">

         <span id='prev'></span>

         <span id='next'></span>

         <strong id="picNum">图片计算ing</strong>

         <div id="bgcc"></div>

     </div>

     <script type="text/javascript" charset="utf-8">

        $(function(){

             var $prev=$('#prev'),

               $next=$('#next'),

               $bgcc=$('#bgcc'),

               $picNum=$('#picNum'),

               $arrbg=['#414381','red','green','blue','#6df8a5'],   //更换的背景颜色

               nuec=0;

               $bgcc.css('background-color',$arrbg[nuec]);  //初始化背景颜色为0

               $('#picNum').html(nuec+1+'/'+ $arrbg.length);    //初始化计算的个数为 1/5

               $prev.click(function(ev){

                ev.preventDefault();

                nuec--;

                if(nuec==-1){                 //当点击数组的个数等于-1的时候，回到最后一个背景颜色

                    nuec=($arrbg.length-1);

                }

                 $bgcc.css('background-color',$arrbg[nuec]);

                  $('#picNum').html(nuec+1 +'/'+ $arrbg.length)

                  })

               $next.click(function(ev){

                   ev.preventDefault();

                     nuec++;

                   if(nuec==($arrbg.length)){     //当点击的个数为总数的时候，回到第一个位置

                    nuec=0

                   } 

                  $bgcc.css('background-color',$arrbg[nuec]);

                  $('#picNum').html(nuec+1+'/'+ $arrbg.length)

                })

        })

     </script>

 </body>

 </html>

jquery简单的轮播效果！的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  3. Jquery实现左右轮播效果

    首先展示下静态布局h5代码,代码非常简单. <div id="slide"> <ul class="pic-list"> <li& ...

  4. MBB类似jquery.bxslider插件轮播效果

    首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...

  5. [转]jQuery实现图片轮播效果，jQuery实现焦点新闻

    本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...

  6. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  7. jQuery简单的轮播特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使用JQuery实现图片轮播效果

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...

  9. jQuery带缩略图轮播效果图片切换带缩略图

    以上为效果图 HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

随机推荐

  1. vmware Centos6.6安装64位

    Centos6.6安装64位 必须开启BIOS中的虚拟化技术 首先开机进入BIOS,一般机器是按F2,我的T420是按F1,然后进入Security,Virtualization,选择Enable即可 ...

  2. BZOJ2809: [Apio2012]dispatching

    传送门 主席树经典题. 首先把树搞出来,然后搞出来DFS序.然后离散化点权,在DFS序上建立主席树. 对于每个点对应的区间,查找对应的区间最大的点数即可. //BZOJ2809 //by Cydiat ...

  3. BOM操作

    BOM操作 //浏览器对象模型 opener=window.open(页面的url,打开方式) opener.document.body.style.background="red" ...

  4. linux shell 用sed命令在文本的行尾或行首添加字符

    转自 http://www.cnblogs.com/aaronwxb/archive/2011/08/19/2145364.html 昨天写一个脚本花了一天的2/3的时间,而且大部分时间都耗在了sed ...

  5. laydate兼容bootstrap

    因为Bootstrap使用了 * {box-sizing:border-box;}来reset浏览器的默认盒子模型.所以加上以下代码就可以兼容Bootstrap了 <style type=&qu ...

  6. 红米2A高配刷机记录

    2014816 机型:红米2A高配版 设备型号:2014816 CPU:高通 线刷:fastboot平台 http://192.168.7.118/MesReports/Reports/Cutting ...

  7. .NET 的 WebSocket 开发包比较(转)

    .NET 的 WebSocket 开发包比较 编者按 本文出现在第三方产品评论部分中.在这一部分的文章只提供给会员,不允许工具供应商用来以任何方式和形式来促销或宣传产品.请会员报告任何垃圾信息或广告. ...

  8. JQuery中$.each 和$(selector).each()的区别详解

    PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...

  9. java中数组的基本知识

    数组{ 物以类聚 人以群分 avg sum 数组 数组的概念[ 数组:一组具有相同数据类型的集合 ] 数组的语法[ 先声明 后使用 声明数组: 数据类型+[]+ 变量名 ;/ 数据类型+变量名 +[] ...

  10. 分分钟教你从根本上认识Struts2框架

    在了解Struts2之前我们先来聊聊Struts1,我们都知道在很长的一段时间内,所有的MVC框架中,Struts1他是处于一个超级大咖的地位,无论是从市场角度和使用的用户的数量这个角度而言,Stru ...