├── .gitignore ├── README.md └── 轮播图 ├── 8.29 ├── 1.html ├── 8.29.html ├── css │ ├── 1.css │ ├── 8.29.css │ └── 8.292.css ├── img │ ├── banner-.jpg │ ├── banner-img.jpg │ ├── banner-img1.jpg │ ├── banner-img2.jpg │ ├── banner-img3.jpg │ └── banner-img4.jpg └── js │ ├── 1.js │ ├── 8.29.js │ ├── 8.292.js │ └── animate.js ├── css └── style.css ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── l.png └── r.png ├── index.html └── lbt.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # js 2 | ##### 轮播图 3 | - 该案例使用原生js，将轮博图这个经典案例呈现在大家眼前 -------------------------------------------------------------------------------- /轮播图/8.29/1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 22 | 30 |
<
31 |
>
32 |
33 | 34 | -------------------------------------------------------------------------------- /轮播图/8.29/8.29.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 22 | 30 |
<
31 |
>
32 |
33 | 34 | -------------------------------------------------------------------------------- /轮播图/8.29/css/1.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | list-style:none; 5 | text-decoration:none; 6 | } 7 | .box{ 8 | width:1000px; 9 | height:400px; 10 | margin:50px auto; 11 | position:relative; 12 | } 13 | ul.img{ 14 | width:100%; 15 | height:100%; 16 | position:relative; 17 | overflow:hidden; 18 | } 19 | ul.img>li{ 20 | width:100%; 21 | height:100%; 22 | overflow:hidden; 23 | position:absolute; 24 | top:0; 25 | left:0; 26 | opacity:0; 27 | } 28 | ul.img>.active{ 29 | opacity:1; 30 | } 31 | ul.img>.zindex{ 32 | z-index:2; 33 | } 34 | ul.img>li>img{ 35 | width:100%; 36 | height:100%; 37 | } 38 | ul.circle{ 39 | width:220px; 40 | height:20px; 41 | position:absolute; 42 | left:50%; 43 | margin-left:-110px; 44 | bottom:20px; 45 | z-index:100; 46 | display:flex; 47 | justify-content:space-between; 48 | } 49 | ul.circle>li{ 50 | width:20px; 51 | height:20px; 52 | background: #333; 53 | border-radius:50%; 54 | cursor:pointer; 55 | } 56 | ul.circle>.active{ 57 | background:#fff; 58 | } 59 | .left,.right{ 60 | width:35px; 61 | height:70px; 62 | line-height:70px; 63 | text-align:center; 64 | background: rgba(0,0,0,0.1); 65 | position:absolute; 66 | top:50%; 67 | margin-top:-35px; 68 | font-size:30px; 69 | cursor:pointer; 70 | color:#fff; 71 | z-index:100; 72 | } 73 | .left{ 74 | left:0; 75 | } 76 | .right{ 77 | right:0; 78 | } 79 | -------------------------------------------------------------------------------- /轮播图/8.29/css/8.29.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | list-style:none; 5 | text-decoration:none; 6 | } 7 | .box{ 8 | width:1000px; 9 | height:400px; 10 | background:red; 11 | margin:50px auto; 12 | position:relative; 13 | overflow:hidden; 14 | } 15 | ul.img{ 16 | width:600%; 17 | height:100%; 18 | position:absolute; 19 | left:0; 20 | top:0; 21 | } 22 | ul.img>li{ 23 | width:16.66666%; 24 | height:100%; 25 | overflow:hidden; 26 | float:left; 27 | } 28 | ul.img>li>img{ 29 | width:100%; 30 | height:100%; 31 | } 32 | ul.circle{ 33 | width:220px; 34 | height:20px; 35 | position:absolute; 36 | left:50%; 37 | margin-left:-110px; 38 | bottom:20px; 39 | z-index:100; 40 | display:flex; 41 | justify-content:space-between; 42 | } 43 | ul.circle>li{ 44 | width:20px; 45 | height:20px; 46 | background: #333; 47 | border-radius:50%; 48 | cursor:pointer; 49 | } 50 | ul.circle>.active{ 51 | background:#fff; 52 | } 53 | .left,.right{ 54 | width:35px; 55 | height:70px; 56 | line-height:70px; 57 | text-align:center; 58 | background: rgba(0,0,0,0.1); 59 | position:absolute; 60 | top:50%; 61 | margin-top:-35px; 62 | font-size:30px; 63 | cursor:pointer; 64 | color:#fff; 65 | } 66 | .left{ 67 | left:0; 68 | } 69 | .right{ 70 | right:0; 71 | } 72 | -------------------------------------------------------------------------------- /轮播图/8.29/css/8.292.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | list-style:none; 5 | text-decoration:none; 6 | } 7 | .box{ 8 | width:1000px; 9 | height:400px; 10 | margin:50px auto; 11 | position:relative; 12 | } 13 | ul.img{ 14 | width:100%; 15 | height:100%; 16 | position:relative; 17 | 18 | } 19 | ul.img>li{ 20 | width:100%; 21 | height:100%; 22 | overflow:hidden; 23 | position:absolute; 24 | top:0; 25 | left:100%; 26 | } 27 | ul.img>.active{ 28 | left:0; 29 | } 30 | ul.img>li>img{ 31 | width:100%; 32 | height:100%; 33 | } 34 | ul.circle{ 35 | width:220px; 36 | height:20px; 37 | position:absolute; 38 | left:50%; 39 | margin-left:-110px; 40 | bottom:20px; 41 | z-index:100; 42 | display:flex; 43 | justify-content:space-between; 44 | } 45 | ul.circle>li{ 46 | width:20px; 47 | height:20px; 48 | background: #333; 49 | border-radius:50%; 50 | cursor:pointer; 51 | } 52 | ul.circle>.active{ 53 | background:#fff; 54 | } 55 | .left,.right{ 56 | width:35px; 57 | height:70px; 58 | line-height:70px; 59 | text-align:center; 60 | background: rgba(0,0,0,0.1); 61 | position:absolute; 62 | top:50%; 63 | margin-top:-35px; 64 | font-size:30px; 65 | cursor:pointer; 66 | color:#fff; 67 | } 68 | .left{ 69 | left:0; 70 | } 71 | .right{ 72 | right:0; 73 | } 74 | -------------------------------------------------------------------------------- /轮播图/8.29/img/banner-.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqsEric/js/a8def130275c79d0d93fdcf2fb5d2c8bd562f4c2/轮播图/8.29/img/banner-.jpg -------------------------------------------------------------------------------- /轮播图/8.29/img/banner-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqsEric/js/a8def130275c79d0d93fdcf2fb5d2c8bd562f4c2/轮播图/8.29/img/banner-img.jpg -------------------------------------------------------------------------------- /轮播图/8.29/img/banner-img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqsEric/js/a8def130275c79d0d93fdcf2fb5d2c8bd562f4c2/轮播图/8.29/img/banner-img1.jpg -------------------------------------------------------------------------------- /轮播图/8.29/img/banner-img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqsEric/js/a8def130275c79d0d93fdcf2fb5d2c8bd562f4c2/轮播图/8.29/img/banner-img2.jpg -------------------------------------------------------------------------------- /轮播图/8.29/img/banner-img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqsEric/js/a8def130275c79d0d93fdcf2fb5d2c8bd562f4c2/轮播图/8.29/img/banner-img3.jpg -------------------------------------------------------------------------------- /轮播图/8.29/img/banner-img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wqsEric/js/a8def130275c79d0d93fdcf2fb5d2c8bd562f4c2/轮播图/8.29/img/banner-img4.jpg -------------------------------------------------------------------------------- /轮播图/8.29/js/1.js: -------------------------------------------------------------------------------- 1 | window.onload=function(){ 2 | let box=document.querySelector('.box'); 3 | let ul=document.querySelector('ul.img'); 4 | let img=ul.querySelectorAll('li'); 5 | let circle=document.querySelectorAll('.circle>li'); 6 | let left=document.querySelector('.left'); 7 | let right=document.querySelector('.right'); 8 | let now=0; 9 | let next=0; 10 | let t=setInterval(move,3000); 11 | let flag=true; 12 | function move(way='r'){ 13 | if(way==='r'){ 14 | next=now+1; 15 | if(next>=img.length){ 16 | next=0; 17 | } 18 | }else if(way==='l'){ 19 | next=now-1; 20 | console.log(1); 21 | if(next<0){ 22 | next=img.length-1; 23 | } 24 | } 25 | img[next].classList.add('zindex'); 26 | img[now].classList.remove('zindex'); 27 | animate(img[now],{opacity:0},400); 28 | animate(img[next],{opacity:1},400,function () { 29 | flag=true; 30 | }); 31 | circle[now].classList.remove('active'); 32 | circle[next].classList.add('active'); 33 | now=next; 34 | } 35 | box.onmouseover=function () { 36 | clearInterval(t); 37 | }; 38 | box.onmouseout=function () { 39 | t=setInterval(move,3000); 40 | }; 41 | left.onclick=function(){ 42 | if(!flag){ 43 | return; 44 | } 45 | flag=false; 46 | move('l'); 47 | }; 48 | right.onclick=function () { 49 | if(!flag){ 50 | console.log(1); 51 | return; 52 | } 53 | flag=false; 54 | move('r'); 55 | }; 56 | for(let i=0;ili"); 7 | let left=document.querySelector('.left'); 8 | let right=document.querySelector('.right'); 9 | let n=0; 10 | let flag=true; 11 | let t=setInterval(move,3000); 12 | function move(way='l'){ 13 | if(way==='l'){ 14 | n++; 15 | if(n>=img.length){ 16 | n=0; 17 | } 18 | }else if(way==='r'){ 19 | n--; 20 | if(n<0){ 21 | n=img.length-1; 22 | } 23 | } 24 | animate(ul,{left:-width*n},800,function(){ 25 | flag=true; 26 | }); 27 | for(let i=0;ili'); 7 | let left=document.querySelector('.left'); 8 | let right=document.querySelector('.right'); 9 | let now=0; 10 | let next=0; 11 | let t=setInterval(move,3000); 12 | let flag=true; 13 | function move(way='l'){ 14 | if(way==='l'){ 15 | next=now+1; 16 | if(next>=img.length){ 17 | next=0; 18 | } 19 | img[next].style.left=width+'px'; 20 | animate(img[now],{left:-width},function(){ 21 | flag=true; 22 | }); 23 | animate(img[next],{left:0}); 24 | }else if(way==='r'){ 25 | next=now-1; 26 | if(next<0){ 27 | next=img.length-1; 28 | } 29 | img[next].style.left=-width+'px'; 30 | animate(img[now],{left:width},function(){ 31 | flag=true; 32 | }); 33 | animate(img[next],{left:0}); 34 | } 35 | circle[now].classList.remove('active'); 36 | circle[next].classList.add('active'); 37 | now=next; 38 | } 39 | box.onmouseover=function(){ 40 | clearInterval(t); 41 | }; 42 | box.onmouseout=function(){ 43 | t=setInterval(move,3000); 44 | }; 45 | left.onclick=function(){ 46 | if(flag){ 47 | flag=false; 48 | move('r'); 49 | } 50 | }; 51 | right.onclick=function(){ 52 | if(flag){ 53 | flag=false; 54 | move(); 55 | } 56 | }; 57 | circle.forEach(function(value,index){ 58 | value.onclick=function(){ 59 | if(flag){ 60 | flag=false; 61 | if(index>now){ 62 | img[index].style.left=width+'px'; 63 | animate(img[now],{left:-width},function(){ 64 | flag=true; 65 | }); 66 | animate(img[index],{left:0}); 67 | circle[now].classList.remove('active'); 68 | circle[index].classList.add('active'); 69 | now=index; 70 | }else if(indexnow){ 90 | // img[i].style.left=width+'px'; 91 | // animate(img[now],{left:-width},function(){ 92 | // flag=true; 93 | // }); 94 | // animate(img[i],{left:0}); 95 | // circle[now].classList.remove('active'); 96 | // circle[i].classList.add('active'); 97 | // now=i; 98 | // }else if(i 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 31 | 32 | -------------------------------------------------------------------------------- /轮播图/lbt.js: -------------------------------------------------------------------------------- 1 | window.onload=function(){ 2 | var banner=document.getElementById("banner"); 3 | var leftBtn=document.getElementById("left"); 4 | var rightBtn=document.getElementById("right"); 5 | var imgs=document.getElementById("imgs").getElementsByTagName("li"); 6 | var buttons=document.getElementById("button").getElementsByTagName("li"); 7 | var count=0; 8 | var timer=null; 9 | 10 | //定时器 11 | timer=setInterval(changeCount,1000); 12 | banner.onmouseover=function(){ 13 | clearInterval(timer); 14 | } 15 | banner.onmouseout=function(){ 16 | timer=setInterval(changeCount,1000); 17 | } 18 | leftBtn.onclick=function(){ 19 | changeCount(true); 20 | } 21 | rightBtn.onclick=function(){ 22 | changeCount(); 23 | } 24 | //点击右下角按钮，改变 25 | for(var i=0;iimgs.length-1){ 52 | count=0; 53 | } 54 | } 55 | changeImg(); 56 | } 57 | } --------------------------------------------------------------------------------