用JavaScript实现一个简单的图片轮播事件。
主要的思想是把需要显示的图片显示出来，不需要的隐藏，然后使用自己封装的代码动画显示出来（setInterval）
贴上代码：
html
1 <div class="content"> 2 <div class="img_change"> 3 <div id="img_container"></div> 4 5 <div class="bottom_part"> 6 <div class="bottom_img"> 7 <ul> 8 <li><a href="###" class="bot_img1"></a></li> 9 <li><a href="###" class="bot_img2"></a></li> 10 <li><a href="###" class="bot_img3"></a></li> 11 <li><a href="###" class="bot_img4"></a></li> 12 <li><a href="###" class="bot_img5"></a></li> 13 </ul> 14 </div> 15 <div class="change_btn"> 16 <ul id="btn_container"></ul> 17 </div> 18 </div> 19 </div> 20 </div>
html代码
css:
1 .content{
2 width: 700px;
3 margin:100px auto;
4 }
5 .img_change{
6 width: 731px;
7 height: 300px;
8 position: relative;
9 }
10 .img_part{
11 position: absolute;
12 display: none;
13 opacity: 0;
14 }
15 .bottom_part{
16 width: 731px;
17 height: 80px;
18 background-color:rgba(123,132,131,0.6);
19 position: absolute;
20 bottom: 0;
21 left: 0;
22 }
23 .change_btn ul{
24 list-style: none;
25 text-align: right;
26 margin-top:50px;
27 margin-right: 20px;
28 }
29 .change_btn>ul>li{
30 display: inline-block;
31 width:25px;
32 height: 10px;
33 background: #1e443f;
34 cursor: pointer;
35 opacity: 0.8;
36 margin-right: 10px;
37 }
38 .active{
39 background: #d7d7d7 !important;
40 }
41 .bottom_img ul{
42 list-style: none;
43 margin-top: 8px;
44 }
45 .bottom_img ul li{
46 float: left;
47 width: 65px;
48 height: 65px;
49 margin-left: 30px;
50 }
51 .bottom_img ul li a{
52 display: inline-block;
53 width: 100%;
54 height: 100%;
55 background: url(../images/btn_index_a.png) no-repeat;
56 }
57 .bottom_img ul li a.bot_img2{
58 background-position: -68px 0px;
59 }
60 .bottom_img ul li a.bot_img3{
61 background-position: -136px 0px;
62 }
63 .bottom_img ul li a.bot_img4{
64 background-position: -204px 0px;
65 }
66 .bottom_img ul li a.bot_img5{
67 background-position: -272px 0px;
68 }
css代码
common.js:
1 function objAnim(){
2 var defalutSpeed = 50;
3
4 //淡入
5 this.fadeIn = function(obj,speed,callback,flag){
6 var num = Math.floor(window.getComputedStyle(obj,false).opacity*10);
7 var speed = speed || defalutSpeed;
8
9 if (flag == 0) {
10 callback(obj);
11 }
12
13 if(num == 10){
14 return;
15 }
16 else{
17 var timer = setInterval(function(){
18 num += 1;
19 obj.style.opacity = num/10;
20 if(num == 10){
21 clearInterval(timer);
22 if(flag == 1){
23 callback(obj)
24 }
25 }
26 },speed);
27 }
28 };
29
30 //淡出
31 this.fadeOut = function(obj,speed,callback,flag){
32 var num = Math.floor(window.getComputedStyle(obj,false).opacity*10);
33 var speed = speed || defalutSpeed;
34
35 if (flag == 0) {
36 callback(obj);
37 }
38
39 if(num == 0){
40 return;
41 }
42 else{
43 var timer = setInterval(function(){
44 num -= 1;
45 obj.style.opacity = num/10;
46 if(num == 0){
47 clearInterval(timer);
48 if(flag == 1){
49 callback(obj);
50 }
51 }
52 },speed);
53 }
54
55 };
56
57 //显示
58 this.show = function(obj){
59 obj.style.display = "block";
60 }
61
62 //隐藏
63 this.hide = function(obj){
64 obj.style.display = "none";
65 }
66 }
common.js
function.js
1 //获取className
2 function getClassName(clsName,oParent){
3 var oParent = oParent?document.getElementById(oParent):document;
4 var eles =[];
5 var element = oParent.getElementsByTagName("*");
6
7 for(var i =0;i<element.length;i++){
8 if(clsName == element[i].className){
9 eles.push(element[i]);
10 }
11 }
12
13 return eles;
14 }
15
16
17 var currentIdx = 0;
18 var animator = new objAnim();
19
20 //图片轮播
21 function bannerChange(speed){
22 var img_part = getClassName("img_part");
23
24 //对第一个进行处理
25 animator.fadeIn(img_part[currentIdx],0,animator.show,0);
26 //循环轮播
27 cycleChange();
28 }
29
30 //循环轮播事件
31 var change_timer =null;
32 function cycleChange(speed){
33 var img_part = getClassName("img_part");
34 var speedChange = speed | 4000;
35 var nextIdx;
36 currentIdx = 0;
37
38 change_timer = setInterval(function(){
39
40 nextIdx = (currentIdx==img_part.length-1)?0:currentIdx+1;
41
42 switchImg(currentIdx,nextIdx);
43
44 // nextIdx = (nextIdx==img_part.length-1)?0:nextIdx+1;
45 // currentIdx = (currentIdx==img_part.length-1)?0:currentIdx+1;
46 currentIdx = nextIdx;
47
48 },speedChange)
49 }
50
51 //绑定鼠标事件
52 function changeImg(){
53 var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
54 var change_len = change_btn.length;
55
56 for(var i = 0;i<change_len;i++){
57 (function(m){
58 change_btn[i].onclick = function(){
59 if(m != currentIdx){
60 var nextIdx = m;
61 switchImg(currentIdx,nextIdx);
62 clearInterval(change_timer);
63 cycleChange();
64 currentIdx = nextIdx;
65 }
66 }
67 })(i)
68 }
69 }
70
71 //图片的切换调用
72 function switchImg(currentIdx,nextIdx){
73 var img_part = getClassName("img_part");
74 var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
75
76 //隐藏当前的页面
77 //效果正常(切换)
78 animator.fadeOut(img_part[currentIdx],50,animator.hide,1);
79 //效果明显
80 //animator.hide(img_part[currentIdx])
81 //img_part[currentIdx].style.opacity = "0"
82 change_btn[currentIdx].className = "";
83
84 //显示下一个页面
85 animator.fadeIn(img_part[nextIdx],100,animator.show,0);
86 change_btn[nextIdx].className = "active";
87
88 }
89
90 //动态生成按钮和图片
91 function addImages(jsonObj,count,isClearCtn){
92 var cnt = count;
93 var img_container = document.getElementById("img_container");
94 var btn_container = document.getElementById("btn_container");
95
96 if(isClearCtn){
97 btn_container.innerHTML = "";
98 img_container.innerHTML = "";
99 }
100
101 for(var i=0;i<cnt;i++){
102 if(i == 0){
103 btn_container.innerHTML += ‘<li class="active"></li>‘;
104 img_container.innerHTML += ‘<div class="img_part"><img src="./images/‘+jsonObj[i]+‘"></div>‘;
105 }else{
106 btn_container.innerHTML += "<li></li>";
107 img_container.innerHTML += ‘<div class="img_part"><img src="./images/‘+jsonObj[i]+‘"></div>‘;
108 }
109 }
110 }
function.js
script.js
1 window.onload=function(){
2 var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
3 var chang_len = change_btn.length;
4
5
6 var jsonObj =["banner-1.png","banner-2.png","banner-3.png"];
7 //动态生成图片
8 addImages(jsonObj,jsonObj.length,true);
9
10 //触发图片轮播
11 bannerChange();
12
13 //鼠标点击事件
14 changeImg();
15
16 }
由于涉及到图片的问题，所以就PO上一张截图供效果参考：
以上内容，如有错误请指出，不甚感激。
时间： 2024-07-28 19:49:17