jquery简单的轮播效果！ 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6      <script src="http://code.jquery.com/jquery-latest.js"></script>
 7      <style type="text/css" media="screen">
 8        .content{width: 500px; height: 500px;position: relative; margin:50px auto; }
 9        .content span{cursor:pointer;width: 20px; height: 20px; display: inline-block; position: absolute;background-color:#f00; top:50%; margin-top: -10px;  }
10        .content #prev{left: 10px;}
11        #bgcc{width: 400px; height: 400px; background-color: #ccc;position: absolute; top: 50px; left: 50px;}
12        .content #next{right: 10px;}
13          #picNum{position: absolute; width: 80px; text-align: center; top: 26px; display: inline-block;   left: 50%; margin-left: -40px; font-size: 18px;}
14      </style>
15 </head>
16 <body>
17     <div class="content">
18         <span id='prev'></span>
19         <span id='next'></span>
20         <strong id="picNum">图片计算ing</strong>
21         <div id="bgcc"></div>
22     </div>
23     <script type="text/javascript" charset="utf-8">
24        $(function(){
25             var $prev=$('#prev'),
26               $next=$('#next'),  
27               $bgcc=$('#bgcc'),
28               $picNum=$('#picNum'),
29               $arrbg=['#414381','red','green','blue','#6df8a5'],   //更换的背景颜色
30               nuec=0;
31               $bgcc.css('background-color',$arrbg[nuec]);  //初始化背景颜色为0
32               $('#picNum').html(nuec+1+'/'+ $arrbg.length);    //初始化计算的个数为 1/5
33               $prev.click(function(ev){
34                ev.preventDefault();
35                nuec--;
36                if(nuec==-1){                 //当点击数组的个数等于-1的时候，回到最后一个背景颜色
37                    nuec=($arrbg.length-1);
38                }
39                 $bgcc.css('background-color',$arrbg[nuec]);
40                  $('#picNum').html(nuec+1 +'/'+ $arrbg.length)
41 42                 })
43               $next.click(function(ev){
44                   ev.preventDefault();
45                     nuec++;
46                   if(nuec==($arrbg.length)){     //当点击的个数为总数的时候，回到第一个位置
47                    nuec=0
48                   } 
49                   
50                  $bgcc.css('background-color',$arrbg[nuec]);
51                  $('#picNum').html(nuec+1+'/'+ $arrbg.length)
52 53               })
54 
55        })
56          
57 
58 
59     </script>
60 </body>
61 </html>

 

posted @ 2016-12-28 14:53  deveil  阅读(188)  评论(0)    收藏  举报