仿电商轮播图板块, 其中运用到封装函数, 我都在内标明,
有时间我会在写一次轮播图用更简练的方法,, 毕竟现在拿出来看都有些生了
轮播图
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <style>
- body{
- margin: 0;
- background-color: #5b4949;
- -webkit-user-select: none;
- }
- a{
- text-decoration: none;
- color: #000000;
- }
- a:hover{
- color: #4FB2FC;
- }
- ul{
- padding: 0;
- margin: 0;
- list-style: none;
- }
- img{
- border: none;
- width: 500px;
- height: 300px;
- vertical-align: top;
- }
- .box{
- width: 500px;
- height: 300px;
- border-radius: 10px;
- box-shadow: 4px 4px 30px 1px ;
- margin: 100px auto 0;
- position: relative;
- overflow: hidden;
- }
- ul{
- height: 300px;
- position: absolute;
- left: 0;
- }
- li{
- float: left;
- }
- span{
- position: absolute;
- top: 110px;
- font-size: 40px;
- line-height: 70px;
- width: 30px;
- height: 80px;
- background-color: rgba(0,0,0,.2);
- }
- .zuo{
- left: 0;
- }
- .you{
- right: 0;
- }
- .dian{
- position: absolute;
- left: 150px;
- bottom: 30px;
- width: 200px;
- height: 20px;
- }
- .dian li{
- width: 20px;
- height: 20px;
- background-color: rgba(255,255,255,.5);
- position: absolute;
- left: 0;
- bottom: 0;
- }
- .dian li:nth-of-type(1){
- left: 0;
- height: 40px;
- }
- .dian li:nth-of-type(2){
- left: 40px;
- }
- .dian li:nth-of-type(3){
- left: 80px;
- }
- .dian li:nth-of-type(4){
- left: 120px;
- }
- .dian li:nth-of-type(5){
- left: 160px;
- }
- .bottom{
- margin: 10px auto;
- width: 600px;
- height: 40px;
- background-color: rgba(255, 255, 255, 0.5);
- box-shadow: 3px 3px 10px 1px #000000;
- z-index: 10;
- border-top-right-radius: 40px;
- border-top-left-radius: 40px;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <ul class="ul">
- <li><img src="http://pic1.win4000.com/wallpaper/e/50cad8e6ae6dc.jpg"></li>
- <li><img src="http://pic1.win4000.com/wallpaper/0/53bcf019a1822.jpg"></li>
- <li><img src="http://pic1.win4000.com/wallpaper/3/56e2928012e80.jpg"></li>
- <li><img src="http://pic1.win4000.com/wallpaper/6/5382d522ef5a5.jpg"></li>
- <li><img src="http://d04.res.meilishuo.net/pic/_o/7b/a2/9f17a1452b12b7466d00dcdde3b4_1366_768.c1.jpg"></li>
- <li><img src="http://pic1.win4000.com/wallpaper/e/50cad8e6ae6dc.jpg"></li>
- <li><img src="http://pic1.win4000.com/wallpaper/0/53bcf019a1822.jpg"></li>
- </ul>
- <span class="zuo"><</span>
- <span class="you">></span>
- <ul class="dian">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- </div>
- <div class="bottom"></div>
- <script>
- // 获取使用的元素
- var zuo = document.querySelector('.zuo');
- var you = document.querySelector('.you');
- var ul = document.querySelector('.ul');
- var lis = ul.querySelectorAll('li');
- var dian =document.querySelector('.dian');
- var lii = dian.querySelectorAll('li');
- ul.style.width = lis.length*500+'px';
- var num =1;// 默认显示的图片
- var num1=0;
- ul.style.left = '-500px';//ul 的默认位置
- // 点击向右
- you.onclick = function(){
- var abc = this;
- if(abc.onoff)return; // 判断一次点击后吐钱的运动是否走完
- abc.onoff = true;
- num++;
- num1++;
- if(num>=lis.length-1){
- num = lis.length-1;
- }
- if(num1>=lii.length-1){
- num1 = lii.length-1;
- }
- MTween(ul,'left',-500*num,500,'linear',function(){
- abc.onoff = false;
- if(num==lis.length-1){
- // 判断 num 的值是否等于图片数
- ul.style.left = '-500px'; // 如果等于, ul 的 left 值为 - 500px 回到图片第二张的位置
- num = 1; // 再给 num 值改为第二张的下标
- }
- });
- for(var i=0;i<lii.length;i++){
- lii[i].style.height = '20px';
- }
- MTween(lii[num1],'height',40,500,'linear',function(){
- abc.onoff = false;
- if(num1==lii.length-1){
- num1=-1;
- }
- });
- }
- // 点击向左
- zuo.onclick = function(){
- var abc = this;
- if(abc.onoff)return; // 判断一次点击后吐钱的运动是否走完
- abc.onoff = true;
- num--;
- num1--;
- if(num<0){
- num = 0;
- }
- if(num1<0){
- num1 = lii.length-1;
- }
- for(var i=0;i<lii.length;i++){
- lii[i].style.height = '20px';
- }
- MTween(lii[num1],'height',40,500,'linear',function(){
- // console.log(num)
- abc.onoff = false;
- if(num1<0){
- num1=lii.length-1;
- }
- });
- MTween(ul,'left',-500*num,500,'linear',function(){
- abc.onoff = false;
- if(num==0){ // 判断 num 的值是否等于图片数
- ul.style.left =(2-lis.length)*500+'px'; // 如果等于, ul 的 left 值为 - 500px 回到图片第二张的位置
- num = lis.length-2; // 再给 num 值改为第二张的下标
- }
- });
- }
- // 自动播放
- var timer = autoPlay();
- zuo.onmouseover = you.onmouseover =ul.onmouseover = function(){
- clearInterval(timer);
- // console.log(you)
- }
- zuo.onmouseout = you.onmouseout =ul.onmouseout = function(){
- timer = autoPlay();
- }
- function autoPlay(){
- clearInterval(timer);
- var timer = setInterval(function(){
- num++;
- num1++;
- if(num>=lis.length-1){
- num=lis.length-1;
- }
- if(num1>=lii.length-1){
- num1=lii.length-1;
- }
- MTween(ul,'left',-500*num,500,'linear',function(){
- if(num==lis.length-1){
- // 判断 num 的值是否等于图片数
- ul.style.left = '-500px'; // 如果等于, ul 的 left 值为 - 500px 回到图片第二张的位置
- num = 1; // 再给 num 值改为第二张的下标
- }
- });
- for(var i=0;i<lii.length;i++){
- lii[i].style.height = '20px';
- }
- MTween(lii[num1],'height',40,50,'linear',function(){
- if(num1==lii.length-1){
- num1=-1;
- }
- });
- },1800)
- return timer;
- }
- /*
- * 获取 css 属性方法
- * */
- function getStyle(){
- var obj = arguments[0];
- var arr = arguments.length>2?{}:'';
- if(typeof arr=='string'){
- arr = !obj.currentStyle?getComputedStyle(obj)[arguments[1]]:obj.currentStyle[arguments[1]];
- }else{
- for(var i=1;i<arguments.length;i++){
- //arr.height = '';
- arr[arguments[i]] = !obj.currentStyle?getComputedStyle(obj)[arguments[i]]:obj.currentStyle[arguments[i]];
- }
- }
- return arr;
- }
- //MTween 运动函数
- function MTween(obj,attr,end,duration,way,callBack){
- if(obj.isAnim) return;
- //obj 开始运动了 自定义属性
- obj.isAnim = true;
- if(!way){ // 如果用户没有选择运动方式就默认匀速
- way = 'linear';
- }
- var start = parseFloat(getStyle(obj,attr));// 起始位置
- // var end = 1000;// 目标点
- // var duration = 1000;// 动画执行的总时间 单位是毫秒
- var startTime = Date.now();
- var s = end - start; // 总路程
- // var v = s/duration; // 计算出来的速度
- // 每次 20ms 走一帧
- clearInterval(timer);
- var timer = 0;
- timer = setInterval(function(){
- var endTime = Date.now();
- // 计算出当前时间
- var t = endTime-startTime;
- if(t>=duration){
- t = duration;
- clearInterval(timer);// 到达目标点要清除定时器
- }
- obj.style[attr] = Tween[way](t,start,s,duration)+'px';
- if(t==duration){
- obj.isAnim = false;
- // 等到上一个动画完成 然后再调用
- if(callBack){
- callBack();
- }
- }
- },20);
- }
- // 匀速运动
- var Tween = {
- linear: function (t, b, c, d) {
- return c * t / d + b;
- }
- }
- </script>
- </body>
- </html>
希望, 大家能多多指正
来源: http://www.qdfuns.com/article/48558/60fdc03142af2a061dde950403774730.html