第一种方式

在轮播图最后添加第一张，一张重复的图片。

点击前一张，到了第一张，将父级oList移动到最后一张（也就是添加的重复的第一张)，在进行后续动画。

点击下一张，到了最后一张（也就是添加的重复的第一张），将父级oList移动到第一张，在进行后续动画。

HTML代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>无缝</title>
 6 <link rel="stylesheet" type="text/css" href="css/index.css">
 7 <script type="text/javascript" src="js/index.js"></script>
 8     <script type="text/javascript" src="js/tween.js"></script>
 9 </head>
10 <body>
11 <div class="banner">
12     <div class="main">
13         <a href="javascript:;" class="btnPre"> < </a>
14         <a href="javascript:;" class="btnNext"> > </a>
15         <ul class="list">
16             <li>
17                 <img src="img/1.png">
18             </li>
19             <li>
20                 <img src="img/2.png">
21             </li>
22             <li>
23                 <img src="img/3.png">
24             </li>
25             <li>
26                 <img src="img/4.png">
27             </li>
28             <li>
29                 <img src="img/5.png">
30             </li>
31             <li>
32                 <img src="img/1.png">
33             </li>
34         </ul>
35         <nav class="nav">
36             <span></span>
37             <span></span>
38             <span></span>
39             <span></span>
40             <span></span>
41         </nav>
42     </div>
43 </div>
44 </body>
45 </html>

HTML

CSS代码

 1 body {
 2     margin:0;
 3 }
 4 ul {
 5     margin:0;
 6     padding:0;
 7     list-style: none;
 8 }
 9 img {
10     border:none;
11     vertical-align: top;
12 }
13 a {
14     text-decoration: none;
15 }
16 .banner {
17     margin:30px auto;
18     padding:135px 146px 202px 144px;
19     width: 420px;
20     background-image: url(../img/bg.png);
21     background-repeat: no-repeat;
22 }
23 .main {
24     position: relative;
25     height: 320px;
26     overflow: hidden;
27 }
28 .main>a {
29     position: absolute;
30     z-index: 2;
31     top:50%;
32     width: 49px;
33     height:63px;
34     font-size: 50px;
35     line-height: 63px;
36     text-align: center;
37     color: #fff;
38     background-color: rgba(0,0,0,.3);
39     transform: translateY(-50%);
40 }
41 .banner .btnPre {
42     left:0;
43 }
44 .banner .btnNext {
45     right:0;
46 }
47 .nav {
48     position: absolute;
49     z-index: 2;
50     left: 0;
51     bottom: 18px;
52     width: 100%;
53     font-size: 0;
54     text-align: center;
55 }
56 .nav span {
57     display: inline-block;
58     vertical-align: bottom;
59     margin-right: 14px;
60     width: 10px;
61     height: 10px;
62     background-color: #fff;
63     cursor: pointer;
64 }
65 .nav span:last-child {
66     margin-right: 0;
67 }
68 .list {
69     width: 600%;
70     height: 320px;
71     margin-left: 0px;
72 }
73 .list li {
74     float: left;
75     width: 420px;
76     height: 320px;
77 }
78 .list li img {
79     width: 420px;
80     height: 320px;
81 }

CSS

JS代码

 1 window.οnlοad=function(){
 2     (function(){
 3         var aBtn=document.querySelectorAll('.main>a');
 4         var oMain=document.querySelector('.main');
 5         var oList=document.querySelector('.list');
 6         var aLi=document.querySelectorAll('.list li');
 7         var aSpan=document.querySelectorAll('.nav span');
 8         var iLiW=css(aLi[0],'width');
 9         var iCur= 0;
10         tab();
11
12         oMain.timer=setInterval(next,2000);
13         /*事件*/
14         oMain.οnmοuseοver=function(){
15             clearInterval(oMain.timer);
16         }
17         oMain.οnmοuseοut=function(){
18             oMain.timer=setInterval(next,2000);
19         }
20         for(var i=0;i<aSpan.length;i++){
21             (function(index){
22                 aSpan[index].οnmοuseοver=function(){
23                     iCur=index;
24                     tab();
25                 }
26             })(i);
27         }
28         aBtn[0].οnclick=function (){
29             if(iCur==0){
30                 iCur=aLi.length-1;
31                 css(oList,'margin-left',-iCur*iLiW);
32             }
33             iCur--;
34             tab();
35         };
36         aBtn[1].οnclick=next;
37
38         /*下一张*/
39         function next(){
40             if(iCur==aLi.length-1){
41                 iCur=0;
42                 css(oList,'margin-left',-iCur*iLiW);
43             }
44             iCur++;
45             tab();
46         };
47
48         /*动画*/
49         function tab(){
50             startMove(oList, {'margin-left':-iCur*iLiW},500,'linear');
51             for(var i=0;i<aSpan.length;i++){
52                 startMove(aSpan[i], {'height':10},500,'linear');
53             }
54             startMove(aSpan[iCur%aSpan.length], {'height':20},500,'linear');
55         }
56     })();
57 }

index.js

  1 var Tween = {
  2     linear: function (t, b, c, d){
  3         return c*t/d + b;
  4     },
  5     easeIn: function(t, b, c, d){
  6         return c*(t/=d)*t + b;
  7     },
  8     easeOut: function(t, b, c, d){
  9         return -c *(t/=d)*(t-2) + b;
 10     },
 11     easeBoth: function(t, b, c, d){
 12         if ((t/=d/2) < 1) {
 13             return c/2*t*t + b;
 14         }
 15         return -c/2 * ((--t)*(t-2) - 1) + b;
 16     },
 17     easeInStrong: function(t, b, c, d){
 18         return c*(t/=d)*t*t*t + b;
 19     },
 20     easeOutStrong: function(t, b, c, d){
 21         return -c * ((t=t/d-1)*t*t*t - 1) + b;
 22     },
 23     easeBothStrong: function(t, b, c, d){
 24         if ((t/=d/2) < 1) {
 25             return c/2*t*t*t*t + b;
 26         }
 27         return -c/2 * ((t-=2)*t*t*t - 2) + b;
 28     },
 29     elasticIn: function(t, b, c, d, a, p){
 30         if (t === 0) {
 31             return b;
 32         }
 33         if ( (t /= d) == 1 ) {
 34             return b+c;
 35         }
 36         if (!p) {
 37             p=d*0.3;
 38         }
 39         if (!a || a < Math.abs(c)) {
 40             a = c;
 41             var s = p/4;
 42         } else {
 43             var s = p/(2*Math.PI) * Math.asin (c/a);
 44         }
 45         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 46     },
 47     elasticOut: function(t, b, c, d, a, p){
 48         if (t === 0) {
 49             return b;
 50         }
 51         if ( (t /= d) == 1 ) {
 52             return b+c;
 53         }
 54         if (!p) {
 55             p=d*0.3;
 56         }
 57         if (!a || a < Math.abs(c)) {
 58             a = c;
 59             var s = p / 4;
 60         } else {
 61             var s = p/(2*Math.PI) * Math.asin (c/a);
 62         }
 63         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 64     },
 65     elasticBoth: function(t, b, c, d, a, p){
 66         if (t === 0) {
 67             return b;
 68         }
 69         if ( (t /= d/2) == 2 ) {
 70             return b+c;
 71         }
 72         if (!p) {
 73             p = d*(0.3*1.5);
 74         }
 75         if ( !a || a < Math.abs(c) ) {
 76             a = c;
 77             var s = p/4;
 78         }
 79         else {
 80             var s = p/(2*Math.PI) * Math.asin (c/a);
 81         }
 82         if (t < 1) {
 83             return - 0.5*(a*Math.pow(2,10*(t-=1)) *
 84                     Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 85         }
 86         return a*Math.pow(2,-10*(t-=1)) *
 87                 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
 88     },
 89     backIn: function(t, b, c, d, s){
 90         if (typeof s == 'undefined') {
 91            s = 1.70158;
 92         }
 93         return c*(t/=d)*t*((s+1)*t - s) + b;
 94     },
 95     backOut: function(t, b, c, d, s){
 96         if (typeof s == 'undefined') {
 97             s = 2.70158;  //回缩的距离
 98         }
 99         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
100     },
101     backBoth: function(t, b, c, d, s){
102         if (typeof s == 'undefined') {
103             s = 1.70158;
104         }
105         if ((t /= d/2 ) < 1) {
106             return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
107         }
108         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
109     },
110     bounceIn: function(t, b, c, d){
111         return c - Tween['bounceOut'](d-t, 0, c, d) + b;
112     },
113     bounceOut: function(t, b, c, d){
114         if ((t/=d) < (1/2.75)) {
115             return c*(7.5625*t*t) + b;
116         } else if (t < (2/2.75)) {
117             return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
118         } else if (t < (2.5/2.75)) {
119             return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
120         }
121         return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
122     },
123     bounceBoth: function(t, b, c, d){
124         if (t < d/2) {
125             return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
126         }
127         return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
128     }
129 };
130 function css(el,attr,val){
131     if(arguments.length > 2){
132         if(attr == "opacity"){
133             el.style[attr] = val;
134             el.style.filter = "alpha(opacity = "+val*100+")";
135         } else {
136             el.style[attr] = val + "px";
137         }
138     } else {
139         return el.currentStyle?parseFloat(el.currentStyle[attr]):parseFloat(getComputedStyle(el)[attr]);
140     }
141 }
142 function startMove(el,target,time,type,callBack){
143     var t = 0;
144     var b = {};//初始值
145     var c = {};
146     var d = Math.ceil(time/20);
147     for(var s in target){
148         //console.log(s);
149         b[s] = css(el,s);
150         c[s] = target[s] - b[s];
151     }
152     clearInterval(el.timer);
153     el.timer = setInterval(function(){
154         if(t >= d){
155             clearInterval(el.timer);
156             callBack&&callBack();
157         } else {
158             t++;
159             for(var s in target){
160                 var val = Tween[type](t,b[s],c[s],d);
161                 css(el,s,val);
162             }
163         }
164     },20);
165 }

twen.js

第二种方式

只保留2张图位置。

点击上一张，aImg[0].src 为前一张的地址， aImg[1].src为当前张的地址，父级oList的margin-left为负的图片宽度，轮播图向右滑动。

点击下一张，aImg[0].src 为当前张的地址， aImg[1].src为下一张的地址，父级oList的margin-left为0，轮播图向左滑动。

注意：此种写法需要加一个变量isMove，判断当前是否有动画，如果有动画，不可以进行下一个动画。或者，将动画时间写小点，可以省略这个判断操作。

HTML代码和CSS代码基本与上面一致

HTML代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>无缝-第二种思路</title>
 6 <link rel="stylesheet" type="text/css" href="css/index.css">
 7 <script type="text/javascript" src="js/index.js"></script>
 8     <script type="text/javascript" src="js/tween.js"></script>
 9 </head>
10 <body>
11 <!--同时让下面的导航只会让两张图片变动-->
12 <div class="banner">
13     <div class="main">
14         <a href="javascript:;" class="btnPre"> < </a>
15         <a href="javascript:;" class="btnNext"> > </a>
16         <ul class="list">
17             <li>
18                 <img src="img/1.png">
19             </li>
20             <li>
21                 <img src="img/2.png">
22             </li>
23         </ul>
24         <nav class="nav">
25             <span></span>
26             <span></span>
27             <span></span>
28             <span></span>
29             <span></span>
30         </nav>
31     </div>
32 </div>
33 </body>
34 </html>

HTML

CSS代码

 1 body {
 2     margin:0;
 3 }
 4 ul {
 5     margin:0;
 6     padding:0;
 7     list-style: none;
 8 }
 9 img {
10     border:none;
11     vertical-align: top;
12 }
13 a {
14     text-decoration: none;
15 }
16 .banner {
17     margin:30px auto;
18     padding:135px 146px 202px 144px;
19     width: 420px;
20     background-image: url(../img/bg.png);
21     background-repeat: no-repeat;
22 }
23 .main {
24     position: relative;
25     height: 320px;
26     overflow: hidden;
27 }
28 .main>a {
29     position: absolute;
30     z-index: 2;
31     top:50%;
32     width: 49px;
33     height:63px;
34     font-size: 50px;
35     line-height: 63px;
36     text-align: center;
37     color: #fff;
38     background-color: rgba(0,0,0,.3);
39     transform: translateY(-50%);
40 }
41 .banner .btnPre {
42     left:0;
43 }
44 .banner .btnNext {
45     right:0;
46 }
47 .nav {
48     position: absolute;
49     z-index: 2;
50     left: 0;
51     bottom: 18px;
52     width: 100%;
53     font-size: 0;
54     text-align: center;
55 }
56 .nav span {
57     display: inline-block;
58     vertical-align: bottom;
59     margin-right: 14px;
60     width: 10px;
61     height: 10px;
62     background-color: #fff;
63     cursor: pointer;
64 }
65 .nav span:last-child {
66     margin-right: 0;
67 }
68 .list {
69     width: 600%;
70     height: 320px;
71     margin-left: 0px;
72 }
73 .list li {
74     float: left;
75     width: 420px;
76     height: 320px;
77 }
78 .list li img {
79     width: 420px;
80     height: 320px;
81 }

CSS

 1 window.οnlοad=function(){
 2     (function(){
 3         var aBtn=document.querySelectorAll('.main>a');
 4         var oMain=document.querySelector('.main');
 5         var oList=document.querySelector('.list');
 6         var aLi=document.querySelectorAll('.list li');
 7         var aSpan=document.querySelectorAll('.nav span');
 8         var aImg=document.querySelectorAll('.list img');
 9         var iArrImgSrc=['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];
10         var iLiW=css(aLi[0],'width');
11         var iCur= 0;
12         tab();
13
14         /*定时器*/
15         oMain.timer=setInterval(toNext,2000);
16         oMain.οnmοuseοver=function(){
17             clearInterval(oMain.timer);
18         }
19         oMain.οnmοuseοut=function(){
20             oMain.timer=setInterval(toNext,2000);
21         }
22
23         /*鼠标移入导航*/
24         for(var i=0;i<aSpan.length;i++){
25             (function(index){
26                 aSpan[index].οnmοuseοver=function(){
27                     (index > iCur) && toNext(index);
28                     (index < iCur) && toPre(index);
29                 }
30             })(i);
31         }
32
33         /*前一张点击事件*/
34         aBtn[0].onclick =function(){
35             toPre();
36         };
37
38         /*后一张点击事件*/
39         aBtn[1].οnclick=function(){
40             toNext();
41         };
42
43         var isMove=false;
44         /*前一张*/
45         function toPre(index) {
46             if(isMove){
47                 return;
48             }
49             var pre=arguments.length==1?index:(iCur-1+aSpan.length)%aSpan.length;
50             aImg[0].src=iArrImgSrc[pre];
51             aImg[1].src=iArrImgSrc[iCur];
52             css(oList,'margin-left',-iLiW);
53             isMove = true;
54             startMove(oList, {'margin-left':0},500,'linear',function(){
55                 isMove = false;
56             });
57             iCur=pre;
58             tab();
59         };
60
61         /*后一张*/
62         function toNext(index) {
63             if(isMove){
64                 return;
65             }
66             var next=arguments.length==1?index:(iCur+1)%aSpan.length;
67             aImg[0].src=iArrImgSrc[iCur];
68             aImg[1].src=iArrImgSrc[next];
69             css(oList,'margin-left',0);
70             isMove = true;
71             startMove(oList, {'margin-left':-iLiW},500,'linear',function(){
72                 isMove = false;
73             });
74             iCur=next;
75             tab();
76         };
77
78         /*下边导航运动*/
79         function tab(){
80             for(var i=0;i<aSpan.length;i++){
81                 startMove(aSpan[i], {'height':10},500,'linear');
82             }
83             startMove(aSpan[iCur], {'height':20},500,'linear');
84         }
85     })();
86 }

index.js

tween.js封装的时间版动画函数与上面一致，这边不在重复添加。

转载于:https://www.cnblogs.com/qiqi715/p/7756351.html

JavaScript+HTML+CSS 无缝滚动轮播图的两种方式相关推荐

  1. 原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画

    offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...

  2. JS经典案例-无缝滚动轮播图（纯JS）

    滚动轮播图 在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到 第一张>最后一张, ...

  3. 轮播图的两种方法及自动轮播

    轮播图共计四种方法,本期先向大家分享两种,下期会补充剩余二个方法 公共部分: * {padding: 0px;margin: 0px;}.banner {width: 600px;margin: au ...

  4. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  5. 制作轮播图的几种方式

    目录 css制作轮播图 思路 animation详解 具体制作 js制作轮播图 思路 内容详解 css制作轮播图 思路 主要通过一个展示盒子,一个图片储存盒子,展示盒子的大小即为轮播图想要展示图片的大 ...

  6. iOS无限轮播图片的两种方式

    2019独角兽企业重金招聘Python工程师标准>>> 1 使用UIScrollview实现无限轮播原理 在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动. 在 ...

  7. 快乐玩前端：无缝衔接轮播图——原生JS实现

    无缝衔接轮播图--原生JS实现 原理就不讲了,太麻烦了,大致原理就是两扇推拉门,始终保持推拉门处于开启-闭合状态,大致就这样吧,原理很简单,只是说实现比较麻烦,一直想要实现这样的效果,奈何水平不够,也 ...

  8. 横向自动轮播图html代码,JavaScript实现PC端横向轮播图

    JavaScript实现PC端横向轮播图 发布时间:2020-09-09 02:10:03 来源:脚本之家 阅读:100 作者:菜鸟向往蓝天 本文实例为大家分享了JavaScript实现PC端横向轮播 ...

  9. [css] 用CSS实现一个轮播图

    [css] 用CSS实现一个轮播图 使用CSS实现的话,可以使用 animat属性和overflow:hidden 属性来做. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...

最新文章

  1. Enterprise Manager Cloud Control 安装
  2. centos7下搭建git和gitlab版本库
  3. 面向对象软件设计原则（一） —— 引子
  4. mysql 日期函数大全_MYSQL 日期函数大全
  5. UI实用素材模板|天气应用app的ui设计
  6. 13款宝马x5质量到底怎么样_2020款宝马X5价格新变化 都市越野绝佳之选_搜狐汽车...
  7. E. Mahmoud and Ehab and the function Codeforces Round #435 (Div. 2)
  8. P4055 [JSOI2009]游戏
  9. CentOS中配置lvm存储
  10. 1.shell脚本编程——基础篇（一）
  11. 常用服务和开放端口对照表
  12. hadoop组件中的hive安装
  13. 【2020软考】软件评测师考试大纲
  14. html自动切换图片特效代码,js图片自动切换效果处理代码
  15. 一根网线实现两台计算机网络共享
  16. LINUX入门——Linux是什么？
  17. 马德里的Uber司机
  18. Frontiers in Neuroscience：弥散张量成像(DTI)研究指南
  19. 互联网日报 | 1月12日 星期二 | 百度宣布组建智能汽车公司；京东成立京东科技子集团；QQ兴趣部落即将全面停运下线...
  20. python梯度提升回归树_梯度提升回归树（GBDT）

热门文章

  1. 【Tools】Ubuntu中vscode安装和使用
  2. 【Tiny4412】EMMC启动Qt网络文件系统
  3. [Qt教程] 第31篇 网络（一）Qt网络编程简介
  4. wps office oa控件 痕迹_WPS，Excel，哪个好用？其实真的好用的，是这个工具
  5. Android Studio安装应用时报错 installation failed with message Failed to finalize session......
  6. 记录x86调试命令总结
  7. 子集—leetcode78
  8. 链表/模拟 - 两数相加
  9. 标准化条件变量 -- condition_variable
  10. 二叉树中任意两个节点的距离