JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式
在轮播图最后添加第一张，一张重复的图片。
点击前一张，到了第一张，将父级oList移动到最后一张（也就是添加的重复的第一张)，在进行后续动画。
点击下一张，到了最后一张（也就是添加的重复的第一张），将父级oList移动到第一张，在进行后续动画。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/tween.js"></script>
</head>
<body>
<div class="banner">
<div class="main">
<a href="javascript:;" class="btnPre"> < </a>
<a href="javascript:;" class="btnNext"> > </a>
<ul class="list">
<li>
<img src="img/1.png">
</li>
<li>
<img src="img/2.png">
</li>
<li>
<img src="img/3.png">
</li>
<li>
<img src="img/4.png">
</li>
<li>
<img src="img/5.png">
</li>
<li>
<img src="img/1.png">
</li>
</ul>
<nav class="nav">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div>
</div>
</body>
</html>
HTML
CSS代码
body {
margin:0;
}
ul {
margin:0;
padding:0;
list-style: none;
}
img {
border:none;
vertical-align: top;
}
a {
text-decoration: none;
}
.banner {
margin:30px auto;
padding:135px 146px 202px 144px;
width: 420px;
background-image: url(../img/bg.png);
background-repeat: no-repeat;
}
.main {
position: relative;
height: 320px;
overflow: hidden;
}
.main>a {
position: absolute;
z-index: 2;
top:50%;
width: 49px;
height:63px;
font-size: 50px;
line-height: 63px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
transform: translateY(-50%);
}
.banner .btnPre {
left:0;
}
.banner .btnNext {
right:0;
}
.nav {
position: absolute;
z-index: 2;
left: 0;
bottom: 18px;
width: 100%;
font-size: 0;
text-align: center;
}
.nav span {
display: inline-block;
vertical-align: bottom;
margin-right: 14px;
width: 10px;
height: 10px;
background-color: #fff;
cursor: pointer;
}
.nav span:last-child {
margin-right: 0;
}
.list {
width: 600%;
height: 320px;
margin-left: 0px;
}
.list li {
float: left;
width: 420px;
height: 320px;
}
.list li img {
width: 420px;
height: 320px;
}
CSS
JS代码
window.onload=function(){
(function(){
var aBtn=document.querySelectorAll('.main>a');
var oMain=document.querySelector('.main');
var oList=document.querySelector('.list');
var aLi=document.querySelectorAll('.list li');
var aSpan=document.querySelectorAll('.nav span');
var iLiW=css(aLi[0],'width');
var iCur= 0;
tab();
oMain.timer=setInterval(next,2000);
/*事件*/
oMain.onmouseover=function(){
clearInterval(oMain.timer);
}
oMain.onmouseout=function(){
oMain.timer=setInterval(next,2000);
}
for(var i=0;i<aSpan.length;i++){
(function(index){
aSpan[index].onmouseover=function(){
iCur=index;
tab();
}
})(i);
}
aBtn[0].onclick=function (){
if(iCur==0){
iCur=aLi.length-1;
css(oList,'margin-left',-iCur*iLiW);
}
iCur--;
tab();
};
aBtn[1].onclick=next;
/*下一张*/
function next(){
if(iCur==aLi.length-1){
iCur=0;
css(oList,'margin-left',-iCur*iLiW);
}
iCur++;
tab();
};
/*动画*/
function tab(){
startMove(oList, {'margin-left':-iCur*iLiW},500,'linear');
for(var i=0;i<aSpan.length;i++){
startMove(aSpan[i], {'height':10},500,'linear');
}
startMove(aSpan[iCur%aSpan.length], {'height':20},500,'linear');
}
})();
}
index.js
var Tween = {
linear: function (t, b, c, d){
return c*t/d + b;
},
easeIn: function(t, b, c, d){
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 2.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
};
function css(el,attr,val){
if(arguments.length > 2){
if(attr == "opacity"){
el.style[attr] = val;
el.style.filter = "alpha(opacity = "+val*100+")";
} else {
el.style[attr] = val + "px";
}
} else {
return el.currentStyle?parseFloat(el.currentStyle[attr]):parseFloat(getComputedStyle(el)[attr]);
}
}
function startMove(el,target,time,type,callBack){
var t = 0;
var b = {};//初始值
var c = {};
var d = Math.ceil(time/20);
for(var s in target){
//console.log(s);
b[s] = css(el,s);
c[s] = target[s] - b[s];
}
clearInterval(el.timer);
el.timer = setInterval(function(){
if(t >= d){
clearInterval(el.timer);
callBack&&callBack();
} else {
t++;
for(var s in target){
var val = Tween[type](t,b[s],c[s],d);
css(el,s,val);
}
}
},20);
}
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代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝-第二种思路</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/tween.js"></script>
</head>
<body>
<!--同时让下面的导航只会让两张图片变动-->
<div class="banner">
<div class="main">
<a href="javascript:;" class="btnPre"> < </a>
<a href="javascript:;" class="btnNext"> > </a>
<ul class="list">
<li>
<img src="img/1.png">
</li>
<li>
<img src="img/2.png">
</li>
</ul>
<nav class="nav">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div>
</div>
</body>
</html>
HTML
CSS代码
body {
margin:;
}
ul {
margin:;
padding:;
list-style: none;
}
img {
border:none;
vertical-align: top;
}
a {
text-decoration: none;
}
.banner {
margin:30px auto;
padding:135px 146px 202px 144px;
width: 420px;
background-image: url(../img/bg.png);
background-repeat: no-repeat;
}
.main {
position: relative;
height: 320px;
overflow: hidden;
}
.main>a {
position: absolute;
z-index:;
top:50%;
width: 49px;
height:63px;
font-size: 50px;
line-height: 63px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
transform: translateY(-50%);
}
.banner .btnPre {
left:;
}
.banner .btnNext {
right:;
}
.nav {
position: absolute;
z-index:;
left:;
bottom: 18px;
width: 100%;
font-size:;
text-align: center;
}
.nav span {
display: inline-block;
vertical-align: bottom;
margin-right: 14px;
width: 10px;
height: 10px;
background-color: #fff;
cursor: pointer;
}
.nav span:last-child {
margin-right:;
}
.list {
width: 600%;
height: 320px;
margin-left: 0px;
}
.list li {
float: left;
width: 420px;
height: 320px;
}
.list li img {
width: 420px;
height: 320px;
}
CSS
window.onload=function(){
(function(){
var aBtn=document.querySelectorAll('.main>a');
var oMain=document.querySelector('.main');
var oList=document.querySelector('.list');
var aLi=document.querySelectorAll('.list li');
var aSpan=document.querySelectorAll('.nav span');
var aImg=document.querySelectorAll('.list img');
var iArrImgSrc=['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];
var iLiW=css(aLi[0],'width');
var iCur= 0;
tab();
/*定时器*/
oMain.timer=setInterval(toNext,2000);
oMain.onmouseover=function(){
clearInterval(oMain.timer);
}
oMain.onmouseout=function(){
oMain.timer=setInterval(toNext,2000);
}
/*鼠标移入导航*/
for(var i=0;i<aSpan.length;i++){
(function(index){
aSpan[index].onmouseover=function(){
(index > iCur) && toNext(index);
(index < iCur) && toPre(index);
}
})(i);
}
/*前一张点击事件*/
aBtn[0].onclick =function(){
toPre();
};
/*后一张点击事件*/
aBtn[1].onclick=function(){
toNext();
};
var isMove=false;
/*前一张*/
function toPre(index) {
if(isMove){
return;
}
var pre=arguments.length==1?index:(iCur-1+aSpan.length)%aSpan.length;
aImg[0].src=iArrImgSrc[pre];
aImg[1].src=iArrImgSrc[iCur];
css(oList,'margin-left',-iLiW);
isMove = true;
startMove(oList, {'margin-left':0},500,'linear',function(){
isMove = false;
});
iCur=pre;
tab();
};
/*后一张*/
function toNext(index) {
if(isMove){
return;
}
var next=arguments.length==1?index:(iCur+1)%aSpan.length;
aImg[0].src=iArrImgSrc[iCur];
aImg[1].src=iArrImgSrc[next];
css(oList,'margin-left',0);
isMove = true;
startMove(oList, {'margin-left':-iLiW},500,'linear',function(){
isMove = false;
});
iCur=next;
tab();
};
/*下边导航运动*/
function tab(){
for(var i=0;i<aSpan.length;i++){
startMove(aSpan[i], {'height':10},500,'linear');
}
startMove(aSpan[iCur], {'height':20},500,'linear');
}
})();
}
index.js
tween.js封装的时间版动画函数与上面一致，这边不在重复添加。
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式的更多相关文章
- js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
- js原生选项卡（包含无缝滚动轮播图）一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- jquery左右切换的无缝滚动轮播图
1.HTML结构: <head> <script type="text/javascript" src="../jquery-1.8.3/jquery. ...
- iOS 无限轮播图的两种实现
首先说一下实现的思想: 用UIScrollView实现,在scrollView上添加3个UIImageView,分别用来显示上一张图片,当前显示的图片,下一张图片.scrollView在不滑动的时候永 ...
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- iOS swift版本无限滚动轮播图
之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...
- JS---案例：无缝的轮播图
案例:无缝的轮播图 w <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...
- HTML中设置背景图的两种方式
HTML中设置背景图的两种方式 1.background background:url(images/search.png) no-repeat top; 2.background-image ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
随机推荐
- Go 基础学习笔记（6）| 变量、函数使用
Go 变量定义与使用: 1.var 声明 (1)var identifier type 如:var x int =10 (2) var id ...
- csp-s2019游记
11.15D0: 复习 复习 机房里弥漫着颓废的气息,不过也是最后一个下午了 11.16D1: 五点钟爬起来,一边发抖一边去楼下买早饭 虽然平时基本不吃早饭,但考前不行 搭着同学的车去了考点,在车上重 ...
- nyoj 125-盗梦空间 (数学ans += temp * 60 * pow(0.05, cnt))
125-盗梦空间 内存限制:64MB 时间限制:3000ms 特判: No 通过数:8 提交数:10 难度:2 题目描述: <盗梦空间>是一部精彩的影片,在这部电影里,Cobb等人可以进入 ...
- requests保存图片
1.创建07_save_jpg.py文件 import requests #发送请求respone = requests.get("https://www.baidu.com/img/bd_ ...
- Spring Boot2 系列教程(二十六)Spring Boot 整合 Redis
在 Redis 出现之前,我们的缓存框架各种各样,有了 Redis ,缓存方案基本上都统一了,关于 Redis,松哥之前有一个系列教程,尚不了解 Redis 的小伙伴可以参考这个教程: Redis 教 ...
- 彻底搞懂CSS伪类选择器：is、not
本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...
- 突破至暗时刻，HCIE-RS的6个月成就之路
我是今年四月份报的HCIE培训,到考完面试总共六个月的时间,对于HCIE整个考试的流程来说,六个月的时间不短,但也不是很长.尤其是面试,需要花费大量的时间和精力,下面我就把我整个备考历程做个简单的分享 ...
- 【集训Day3 单调队列】【2018寒假集训Day 5更新】最大子序列和
最大子序列和(maxsum) [问题描述] 输入一个长度为n的整数序列(A1,A2,……,An),从中找出一段连续的长度不超过M的子序列,使得这个序列的和最大. 例如: 序列 1, -3, 5, 1, ...
- 探究 C# 中的 char 、 string（一）
目录 探究 C# 中的 char . string(一) 1. System.Char 字符 2. 字符处理 3. 全球化 4. System.String 字符串 4.1 字符串搜索 4.2 字符串 ...
- Spring Cloud报错Error creating bean with name 'requestMappingHandlerMapping'
如果我们使用Spring Cloud的Feign实现熔断,首先需要自定义一个熔断类,实现你的feign接口,然后实现方法,这些方法就是熔断方法,最后需要在你的feign接口中指定fallback为自定 ...