码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 图片轮播

时间:2014-10-09 00:36:47      阅读:442      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   java   for   

bubuko.com,布布扣

图片轮播效果图 如上

思路:

1.每隔一定的时间切换一张图片:javascript中的setTimeout()和setInterval()符合条件,注意两者之间的区别。

2.循环问题:定义一个全局变量num,每切换了一张图片,num++,但因为是死循环,num可能无限大,用num=num%图片个数,可以保证num的值不大于图片个数。

   关键代码:

bubuko.com,布布扣
 1     //图片与数字的轮播
 2     function sonCarousel(){
 3         //隐藏所有的图片,使所有的数字背景为灰色
 4         $("."+className).find("img").hide();
 5         $("."+className).find("span").removeClass("spanActivate").addClass("spanNoActivate");
 6         //$("."+className).find("span").css("background","#999");//同上效果
 7         //显示对应的图片,使激活状态的数字背景颜色为红色
 8         $("."+className).find("img:eq("+currentNum+")").show();
 9         $("."+className).find("span:eq("+currentNum+")").removeClass("spanNoActivate").addClass("spanActivate");
10         //$("."+className).find("span").css("background","#E4393C");//同上效果
11         //定时器,每一秒钟改变一次
12         carouselTime=setTimeout(sonCarousel,1000);
13         //图片序列++,实现轮换效果
14         currentNum++;
15         currentNum%=picNum;
16 
17     }
轮播关键代码

3.以上两点总结来说是:隐藏所有图片,显示编号为num的图片,setTimeout特定时间再次执行本身的函数,num++,num%=num

4.图片编号css样式思路:1>绝对定位,在图片的右下角需要text-align:right;bottom:XXpx;position:absolute;

div的长度与宽度

                                 2>每个span的样式,垂直,水平居中:height:22px;line-height:22px;width:22px;text-align:center;border-radius: 12px;为每个span做圆形,margin:0 1px;间隔

bubuko.com,布布扣
 1 .number{
 2     position: absolute;
 3     text-align: right;
 4     padding: 4px 10px;
 5     z-index: 1;
 6     bottom: 3px;
 7     width: 650px;
 8     height: 22px;
 9 }
10 .pic span{
11     display: inline-block;
12     margin: 0 1px;
13     text-align: center;
14     color: #FFFFFF;
15     border-radius: 12px ;
16     width: 22px;
17     height: 22px;
18     line-height: 22px;
19     cursor: pointer;
20 }
数字编号样式

5.动态生成图片编号:

bubuko.com,布布扣
 1    //获取图片的张数
 2     var picNum = $("." + className).find("img").length;
 3     //创建显示数字轮播的div
 4     var spanDiv = $("<div class=‘number‘></div>");
 5     for (var i = 1; i <= picNum; i++) {
 6         var spanCurrent = $("<span >" + i + "</span>");
 7         spanDiv.append(spanCurrent);
 8     }
 9     //把创建好的数字轮播添加到图片中去
10     spanDiv.appendTo("." + className);
动态生成图片编号

6.点击编号显示相应的图片:

bubuko.com,布布扣
1   //点击数字显示对应的图片
2        $(".number span").click(function(){
3          clearTimeout(carouselTime);
4         currentNum=this.innerHTML-1;
5         sonCarousel();
6     });
点击编号显示图片

 

 

bubuko.com,布布扣
 1     //实现图片轮播的效果
 2 
 3 var currentNum=0;
 4 var carouselTime;
 5 function carousel(className) {
 6     //获取图片的长度与宽度
 7     var width=$("." + className).find("img").get(0).width;
 8     var height=$("." + className).find("img").get(0).height;
 9     $("." + className).css({
10         "position":"absolute",
11         "width":width,
12         "height":height
13     });
14     //获取图片的张数
15     var picNum = $("." + className).find("img").length;
16     //创建显示数字轮播的div
17     var spanDiv = $("<div class=‘number‘></div>");
18     for (var i = 1; i <= picNum; i++) {
19         var spanCurrent = $("<span >" + i + "</span>");
20         spanDiv.append(spanCurrent);
21     }
22     //把创建好的数字轮播添加到图片中去
23     spanDiv.appendTo("." + className);
24     //图片与数字的轮播
25     function sonCarousel(){
26         //隐藏所有的图片,使所有的数字背景为灰色
27         $("."+className).find("img").hide();
28         $("."+className).find("span").removeClass("spanActivate").addClass("spanNoActivate");
29         //$("."+className).find("span").css("background","#999");//同上效果
30         //显示对应的图片,使激活状态的数字背景颜色为红色
31         $("."+className).find("img:eq("+currentNum+")").show();
32         $("."+className).find("span:eq("+currentNum+")").removeClass("spanNoActivate").addClass("spanActivate");
33         //$("."+className).find("span").css("background","#E4393C");//同上效果
34         //定时器,每一秒钟改变一次
35         carouselTime=setTimeout(sonCarousel,1000);
36         //图片序列++,实现轮换效果
37         currentNum++;
38         currentNum%=picNum;
39 
40     }
41     sonCarousel();
42     //点击数字显示对应的图片
43        $(".number span").click(function(){
44          clearTimeout(carouselTime);
45         currentNum=this.innerHTML-1;
46         sonCarousel();
47     });
48 }
全部js代码
bubuko.com,布布扣
 1 *{
 2     padding: 0;
 3     margin: 0;
 4     border: 0;
 5 }
 6 
 7 .number{
 8     position: absolute;
 9     text-align: right;
10     padding: 4px 10px;
11     z-index: 1;
12     bottom: 3px;
13     width: 650px;
14     height: 22px;
15 }
16 .pic span{
17     display: inline-block;
18     margin: 0 1px;
19     text-align: center;
20     color: #FFFFFF;
21     border-radius: 12px ;
22     width: 22px;
23     height: 22px;
24     line-height: 22px;
25     cursor: pointer;
26 }
27 .spanActivate{
28     background-color: #E4393C;
29 }
30 .spanNoActivate{
31     background-color: #999;
32 }
全部CSS代码
bubuko.com,布布扣
 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <meta name="copyright"  />
 7     <script type="text/javascript" src="jquery-1.9.1.js"></script>
 8     <link rel="stylesheet" type="text/css" href="Carousel.css">
 9     <script type="text/javascript" src="Carousel.js"></script>
10 
11 </head>
12 <body>
13 <div class="pic" >
14     <img src="img/1.jpg">
15     <img src="img/2.jpg">
16     <img src="img/3.jpg">
17     <img src="img/1.jpg">
18     <img src="img/2.jpg">
19     <img src="img/3.jpg">
20 
21 </div>
22 <script type="text/javascript">
23     $(document).ready(function(){
24         carousel("pic");
25     });
26 </script>
27 </body>
28 </html>
29             
全部html代码

难点:

1.setTimeout里面的函数带参数传递:

     setTimeout(function(){resetbgColor(obj);},3000); 

2.jQuery创建div的样式设置问题,待解决

jQuery 图片轮播

标签:style   blog   http   color   io   os   ar   java   for   

原文地址:http://www.cnblogs.com/qiangmin/p/4011456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!