HTML学习之轮播图_飛雲_前端开发者

  这可以说是一种非常简单的实现轮播图的方法了,由于时间仓促所以没写自动轮播部分。简单说一下原理吧,就是把所有图片堆叠在一个盒子里,设置所有图片的透明度为0,这样就把所有图片都隐藏了,第一张图片除外(第一张透明度设为1),当要切换到某张图片时,在把该图片的透明度设为1,而其他的图片透明度设为0,这样就实现了简单的轮播啦。

代码:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <title>淡入淡出轮播图</title>
  6 <!-- css样式 -->
  7     <style type="text/css">
  8         /*清除边距*/
  9         div,ul,li{
 10             margin: 0;
 11             padding: 0;
 12         }
 13 
 14         /*首先准备一个放图片的容器*/
 15         .container{
 16             width: 500px;
 17             height: 280px;
 18             position: relative;
 19             top: 100px;
 20             left: 30%;
 21             /*border: 1px solid #ccc;*/
 22         }
 23 
 24         /*图片样式*/
 25         .container img{
 26             position: absolute;        /*把所有图片放在同一个位置*/
 27             width: 100%;
 28             transition-duration: 1s;    /*设置过渡时间*/
 29             opacity: 0;                /*把所有图片变透明*/
 30         }
 31         /*图片显示开关*/
 32         .container img.on{
 33             opacity: 1;                /*用于显示图片*/
 34         }
 35 
 36         /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
 37         .left, .right{
 38             position: absolute;
 39             top: 30%;
 40             width: 60px;
 41             height: 100px;
 42             line-height: 100px;
 43             background-color: #666;
 44             opacity: 0.5;
 45             text-align: center;
 46             font-size: 60px;
 47             color: #ccc;
 48             display: none;    /*先隐藏按钮*/
 49             cursor: pointer;    /*设置鼠标悬停时的样式*/
 50         }
 51         .left{
 52             left: 0;
 53         }
 54         .right{
 55             right: 0;
 56         }
 57         .container:hover .left, .container:hover .right{
 58             display: block;            /*鼠标悬停才容器范围内时显示按钮*/
 59         }
 60         .left:hover, .right:hover{
 61             color: #fff;
 62         }
 63 
 64         /*焦点*/
 65         .container ul{
 66             position: absolute;
 67             bottom: 0;
 68             max-width: 500px;
 69             padding: 5px 200px;
 70         }
 71         .container ul li{
 72             list-style: none;    
 73             float: left;
 74             width: 10px;
 75             height: 10px;
 76             border-radius: 50%;
 77             margin-left: 10px;
 78             background-color: #ccc;
 79             cursor: pointer;
 80         }
 81         .container ul li.active{
 82             background-color: #fff;        /*焦点激活时的样式*/
 83         }
 84 
 85     </style>
 86 </head>
 87 <body>
 88     <div class="container">
 89         <!-- 图片 -->
 90         <!-- 先把第一张图片显示出来 -->
 91         <img class="on" src="img/1.jpg" />
 92         <img src="img/2.jpg" />
 93         <img src="img/3.jpg" />
 94         <img src="img/4.jpg" />
 95         <img src="img/5.jpg" />
 96 
 97         <!-- 左右按钮 -->
 98         <div class="left">&lt;</div>
 99         <div class="right">&gt;</div>
100 
101         <!-- 焦点 -->
102         <ul>
103             <li class="active"></li>
104             <li></li>
105             <li></li>
106             <li></li>
107             <li></li>
108         </ul>
109     </div>
110 
111 <!-- js部分 -->
112     <script type="text/javascript">
113         //1、找到container下的所有img标签,li标签,左右按钮
114         var aImgs = document.querySelectorAll('.container img'); 
115         var aLis = document.querySelectorAll('.container li');
116         var btnLeft = document.querySelector('.container .left');
117         var btnRight = document.querySelector('.container .right');
118 
119         // //检验是否找到
120         // console.log(aImgs);
121         // console.log(aLis);
122         // console.log(btnLeft);
123         // console.log(btnRight);
124 
125         //点击事件
126         //点击按钮图片切换
127         var index = 0;        //当前图片下标
128         var lastIndex = 0;
129         btnRight.onclick = function(){
130             //记录上一张图片的下标
131             lastIndex = index;
132             //清除上一张图片的样式
133             aImgs[lastIndex].className = '';
134             aLis[lastIndex].className = '';
135 
136             index++;
137             index %= aImgs.length;    //实现周期性变化
138             //设置当前图片的样式
139             aImgs[index].className = 'on';
140             aLis[index].className = 'active';
141         }
142         //左边按钮类似
143         btnLeft.onclick = function(){
144             //记录上一张图片的下标
145             lastIndex = index;
146             //清除上一张图片的样式
147             aImgs[lastIndex].className = '';
148             aLis[lastIndex].className = '';
149 
150             index--;
151             if (index < 0) {
152                 index = aImgs.length - 1;
153             }
154             //设置当前图片的样式
155             aImgs[index].className = 'on';
156             aLis[index].className = 'active';
157         }
158     </script>
159 </body>
160 </html>
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <title>淡入淡出轮播图</title>
  6 <!-- css样式 -->
  7     <style type="text/css">
  8         /*清除边距*/
  9         div,ul,li{
 10             margin: 0;
 11             padding: 0;
 12         }
 13 
 14         /*首先准备一个放图片的容器*/
 15         .container{
 16             width: 500px;
 17             height: 280px;
 18             position: relative;
 19             top: 100px;
 20             left: 30%;
 21             /*border: 1px solid #ccc;*/
 22         }
 23 
 24         /*图片样式*/
 25         .container img{
 26             position: absolute;        /*把所有图片放在同一个位置*/
 27             width: 100%;
 28             transition-duration: 1s;    /*设置过渡时间*/
 29             opacity: 0;                /*把所有图片变透明*/
 30         }
 31         /*图片显示开关*/
 32         .container img.on{
 33             opacity: 1;                /*用于显示图片*/
 34         }
 35 
 36         /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
 37         .left, .right{
 38             position: absolute;
 39             top: 30%;
 40             width: 60px;
 41             height: 100px;
 42             line-height: 100px;
 43             background-color: #666;
 44             opacity: 0.5;
 45             text-align: center;
 46             font-size: 60px;
 47             color: #ccc;
 48             display: none;    /*先隐藏按钮*/
 49             cursor: pointer;    /*设置鼠标悬停时的样式*/
 50         }
 51         .left{
 52             left: 0;
 53         }
 54         .right{
 55             right: 0;
 56         }
 57         .container:hover .left, .container:hover .right{
 58             display: block;            /*鼠标悬停才容器范围内时显示按钮*/
 59         }
 60         .left:hover, .right:hover{
 61             color: #fff;
 62         }
 63 
 64         /*焦点*/
 65         .container ul{
 66             position: absolute;
 67             bottom: 0;
 68             max-width: 500px;
 69             padding: 5px 200px;
 70         }
 71         .container ul li{
 72             list-style: none;    
 73             float: left;
 74             width: 10px;
 75             height: 10px;
 76             border-radius: 50%;
 77             margin-left: 10px;
 78             background-color: #ccc;
 79             cursor: pointer;
 80         }
 81         .container ul li.active{
 82             background-color: #fff;        /*焦点激活时的样式*/
 83         }
 84 
 85     </style>
 86 </head>
 87 <body>
 88     <div class="container">
 89         <!-- 图片 -->
 90         <!-- 先把第一张图片显示出来 -->
 91         <img class="on" src="img/1.jpg" />
 92         <img src="img/2.jpg" />
 93         <img src="img/3.jpg" />
 94         <img src="img/4.jpg" />
 95         <img src="img/5.jpg" />
 96 
 97         <!-- 左右按钮 -->
 98         <div class="left">&lt;</div>
 99         <div class="right">&gt;</div>
100 
101         <!-- 焦点 -->
102         <ul>
103             <li class="active"></li>
104             <li></li>
105             <li></li>
106             <li></li>
107             <li></li>
108         </ul>
109     </div>
110 
111 <!-- js部分 -->
112     <script type="text/javascript">
113         //1、找到container下的所有img标签,li标签,左右按钮
114         var aImgs = document.querySelectorAll('.container img'); 
115         var aLis = document.querySelectorAll('.container li');
116         var btnLeft = document.querySelector('.container .left');
117         var btnRight = document.querySelector('.container .right');
118 
119         // //检验是否找到
120         // console.log(aImgs);
121         // console.log(aLis);
122         // console.log(btnLeft);
123         // console.log(btnRight);
124 
125         //点击事件
126         //点击按钮图片切换
127         var index = 0;        //当前图片下标
128         var lastIndex = 0;
129         btnRight.onclick = function(){
130             //记录上一张图片的下标
131             lastIndex = index;
132             //清除上一张图片的样式
133             aImgs[lastIndex].className = '';
134             aLis[lastIndex].className = '';
135 
136             index++;
137             index %= aImgs.length;    //实现周期性变化
138             //设置当前图片的样式
139             aImgs[index].className = 'on';
140             aLis[index].className = 'active';
141         }
142         //左边按钮类似
143         btnLeft.onclick = function(){
144             //记录上一张图片的下标
145             lastIndex = index;
146             //清除上一张图片的样式
147             aImgs[lastIndex].className = '';
148             aLis[lastIndex].className = '';
149 
150             index--;
151             if (index < 0) {
152                 index = aImgs.length - 1;
153             }
154             //设置当前图片的样式
155             aImgs[index].className = 'on';
156             aLis[index].className = 'active';
157         }
158     </script>
159 </body>
160 </html>

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset=”utf-8″/> 5<title></title> 6<!– css样式 –> 7<style type=”text/css> 8/*清除边距*/ 9 div,ul,li{ 10 margin: 0; 11 padding: 0; 12} 13 14/*首先准备一个放图片的容器*/ 15 .container{ 16 width: 500px; 17 height: 280px; 18 position: relative; 19 top: 100px; 20 left: 30%; 21/*border: 1px solid #ccc;*/ 22} 23 24/*图片样式*/ 25 .container img{ 26 position: absolute;/*把所有图片放在同一个位置*/ 27 width: 100%; 28 transition-duration: 1s;/*设置过渡时间*/ 29 opacity: 0;/*把所有图片变透明*/ 30} 31/*图片显示开关*/ 32 .container img.on{ 33 opacity: 1;/*用于显示图片*/ 34} 35 36/*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/ 37 .left, .right{ 38 position: absolute; 39 top: 30%; 40 width: 60px; 41 height: 100px; 42 line-height: 100px; 43 background-color: #666; 44 opacity: 0.5; 45 text-align: center; 46 font-size: 60px; 47 color: #ccc; 48 display: none;/*先隐藏按钮*/ 49 cursor: pointer;/*设置鼠标悬停时的样式*/ 50} 51 .left{ 52 left: 0; 53} 54 .right{ 55 right: 0; 56} 57 .container:hover .left, .container:hover .right{ 58 display: block;/*鼠标悬停才容器范围内时显示按钮*/ 59} 60 .left:hover, .right:hover{ 61 color: #fff; 62} 63 64/*焦点*/ 65 .container ul{ 66 position: absolute; 67 bottom: 0; 68 max-width: 500px; 69 padding: 5px 200px; 70} 71 .container ul li{ 72 list-style: none; 73 float: left; 74 width: 10px; 75 height: 10px; 76 border-radius: 50%; 77 margin-left: 10px; 78 background-color: #ccc; 79 cursor: pointer; 80} 81 .container ul li.active{ 82 background-color: #fff;/*焦点激活时的样式*/ 83} 84 85</style> 86</head> 87<body> 88<div class=”container”> 89<!– 图片 –> 90<!– 先把第一张图片显示出来 –> 91<img class=”on” src=”img/1.jpg”/> 92<img src=”img/2.jpg”/> 93<img src=”img/3.jpg”/> 94<img src=”img/4.jpg”/> 95<img src=”img/5.jpg”/> 96 97<!– 左右按钮 –> 98<div class=”left”>&lt;</div> 99<div class=”right”>&gt;</div>100101<!– 焦点 –>102<ul>103<li class=”active”></li>104<li></li>105<li></li>106<li></li>107<li></li>108</ul>109</div>110111<!– js部分 –>112<script type=”text/javascript”>113//1、找到container下的所有img标签,li标签,左右按钮114var aImgs = document.querySelectorAll(.container img);
115var aLis = document.querySelectorAll(.container li);
116var btnLeft = document.querySelector(.container .left);
117var btnRight = document.querySelector(.container .right);
118119// //检验是否找到120// console.log(aImgs);121// console.log(aLis);122// console.log(btnLeft);123// console.log(btnRight);124125//点击事件126//点击按钮图片切换127var index =0; //当前图片下标128var lastIndex =0;
129 btnRight.onclick =function(){
130//记录上一张图片的下标131 lastIndex = index;
132//清除上一张图片的样式133 aImgs[lastIndex].className =;
134 aLis[lastIndex].className =;
135136 index++;
137 index %= aImgs.length; //实现周期性变化138//设置当前图片的样式139 aImgs[index].className =on;
140 aLis[index].className =active;
141 }
142//左边按钮类似143 btnLeft.onclick =function(){
144//记录上一张图片的下标145 lastIndex = index;
146//清除上一张图片的样式147 aImgs[lastIndex].className =;
148 aLis[lastIndex].className =;
149150 index;
151if (index <0) {
152 index = aImgs.length 1;
153 }
154//设置当前图片的样式155 aImgs[index].className =on;
156 aLis[index].className =active;
157 }
158</script>159</body>160</html>

 

» 本文来自:前端开发者 » 《HTML学习之轮播图_飛雲_前端开发者》
» 本文链接地址:https://www.rokub.com/73507.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!