改变每个图片的opacity属性：来自学友刘斌
素材图片：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>最简单的轮播广告</title>
6 <style>
7 body, div, ul, li {
8 margin: 0;
9 padding: 0;
10 }
11
12 ul {
13 list-style-type: none;
14 }
15
16 body {
17 background: #000;
18 text-align: center;
19 font: 12px/20px Arial;
20 }
21
22 #box {
23 position: relative;
24 width: 492px;
25 height: 172px;
26 background: #fff;
27 border-radius: 5px;
28 border: 8px solid #fff;
29 margin: 10px auto;
30 }
31
32 #box .list {
33 position: relative;
34 width: 490px;
35 height: 170px;
36 overflow: hidden;
37 border: 1px solid #ccc;
38 }
39
40 #box .list li {
41 position: absolute;
42 top: 0;
43 left: 0;
44 width: 490px;
45 height: 170px;
46 opacity: 0;
47 transition: opacity 0.5s linear
48 }
49
50 #box .list li.current {
51 opacity: 1;
52 }
53
54 #box .count {
55 position: absolute;
56 right: 0;
57 bottom: 5px;
58 }
59
60 #box .count li {
61 color: #fff;
62 float: left;
63 width: 20px;
64 height: 20px;
65 cursor: pointer;
66 margin-right: 5px;
67 overflow: hidden;
68 background: #F90;
69 opacity: 0.7;
70 border-radius: 20px;
71 }
72
73 #box .count li.current {
74 color: #fff;
75 opacity: 0.7;
76 font-weight: 700;
77 background: #f60
78 }
79 </style>
80 </head>
81 <body>
82 <div id="box">
83 <ul class="list">
84 <li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
85 <li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
86 <li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
87 <li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
88 <li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
89 </ul>
90 <ul class="count">
91 <li class="current">1</li>
92 <li class="">2</li>
93 <li class="">3</li>
94 <li class="">4</li>
95 <li class="">5</li>
96 </ul>
97 </div>
98
99
100 <script>
101 var box=document.getElementById('box');
102 var uls=document.getElementsByTagName('ul');
103 var imgs=uls[0].getElementsByTagName('li');
104 var btn=uls[1].getElementsByTagName('li');
105 var i=index=0; //中间量，统一声明；
106 var play=null;
107 console.log(box,uls,imgs,btn);//获取正确
108
109 //图片切换, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单 在css里面
110 function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应
111 for(i=0;i<btn.length;i++ ){
112 btn[i].className=''; //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
113 btn[a].className='current';
114 }
115 for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同
116 imgs[i].style.opacity=0;
117 imgs[a].style.opacity=1;
118 }
119 }
120 //切换按钮功能，响应对应图片
121 for(i=0;i<btn.length;i++){
122 btn[i].index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
123 btn[i].onmouseover=function(){
124 show(this.index);
125 clearInterval(play); //这就是最后那句话追加的功能
126 }
127 }
128
129 //自动轮播方法
130 function autoPlay(){
131 play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
132 index++;
133 index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。
134 show(index);
135 },1000)
136 }
137 autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
138
139 //div的鼠标移入移出事件
140 box.onmouseover=function(){
141 clearInterval(play);
142 };
143 box.onmouseout=function(){
144 autoPlay();
145 };
146 //按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
147
148 </script>
149 </body>
150 </html>
前端轮播小结:
git仓库地址https://github.com/wjf444128852/Carousel.git
1、carousel-1效果演示:http://wjf444128852.github.io/demo/Carousel/
主要是tab切换样式的切换，用JS加载的img的src属性，缺点是加载的慢效果不佳。
2、carousel-2效果演示:http://wjf444128852.github.io/demo/carousel_02/
原理：改变ul的left的属性值，到达最右边把该LI从ul的头部remove在append到ul的尾部
3、carousel-3效果演示:http://wjf444128852.github.io/demo/carousel_03/
koringz.github.io的作品，闭包原型链版，兼容性欠缺。
4、carousel-4(推荐,原文：脚儿网)效果演示:http://wjf444128852.github.io/demo/carousel_04/
各种效果集结，只需改个小参数。很好
5、carousel-5(jquery的兼容性好点)效果演示:http://wjf444128852.github.io/demo/carousel-05/
jquery的fadeIn和fadeOut版本，兼容性最好。效果一般
6、carousel-6(javascript改变opacity)效果演示:http://wjf444128852.github.io/demo/carousel-06/
改变透明度，兼容性欠缺
7、carousel-7-1(jquerySlide插件Tab切换)效果演示:http://wjf444128852.github.io/demo/jQuerySlide/demo01.html
插件版，效果佳兼容性佳
8、carousel-7-2(jquerySlide插件轮播效果)效果演示:http://wjf444128852.github.io/demo/jQuerySlide/demo02.html
插件版，效果佳兼容性佳