图片轮播效果图 如上
思路：
1.每隔一定的时间切换一张图片：javascript中的setTimeout()和setInterval()符合条件，注意两者之间的区别。
2.循环问题：定义一个全局变量num，每切换了一张图片，num++，但因为是死循环，num可能无限大，用num=num%图片个数，可以保证num的值不大于图片个数。
关键代码：
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；间隔
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.动态生成图片编号：
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.点击编号显示相应的图片：
1 //点击数字显示对应的图片
2 $(".number span").click(function(){
3 clearTimeout(carouselTime);
4 currentNum=this.innerHTML-1;
5 sonCarousel();
6 });
点击编号显示图片
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代码
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代码
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的样式设置问题，待解决
时间： 2024-10-18 17:24:09