滑动式轮播图:需要实现的是
1、定时播动;
2、每次图片停留几秒再轮播走;
3、向后滑动时做到尾首连接;
4、向前滑动时做到首尾连接。
* 滑动式轮播图(无缝连接 最后一张与第一张连接)
* a1.....a6.jpg轮播:6张图轮播我需要再加上两张图做到首<-s>尾无缝连接
* 鼠标点击相应图标滑动
* 用鼠标点击事件辅助操作,每次鼠标事件发生就只滑动一张图片距离.定时启动鼠标事件发生即可实现自动轮播
* 每3000ms让调用计时器让图片移动,移动一个距离就关闭计时器。打到下一个3000ms时......时间不会冲突
* 1.向后移动,每次移动到图片width的距离就关闭计时器,
* 难点是最后一个与第一个的无缝连接:
* 1、在图片后面再加一个ul,让id=adv1里面放两张图片(a1.jpg和a2.jpg)
* 2、当框里是最后一张图片时,准备adv1的移动,
* 3、当adv1中的第二个图片到框内时,让adv里的相应位置与之重叠,并随着移动
* 4、当adv1内的两张图片全移走时,让它在框后面排着准备下次需要时进框来做到尾首无缝连接的视觉
* 在此过程中需要在需要的时候手动改变两组图片的marginLeft
* 向左滑动时首位连接时也是同样思路。
简易效果实现,但是仿佛性能不太好,有些知识还需学习,提高代码功能,增强体验感。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<link rel="stylesheet" href="carouse.css">
<script src="carouse.js" type="text/javascript"></script>
</head>
<body>
<div class="wrap">
<ul id="adv0" style="margin-left:-1000px">
<li><img src="images/a5.jpg" alt=""></li>
<li><img src="images/a6.jpg" alt=""></li>
</ul>
<ul id="adv" style="margin-left:0">
<li><img src="images/a1.jpg" alt=""></li>
<li><img src="images/a2.jpg" alt=""></li>
<li><img src="images/a3.jpg" alt=""></li>
<li><img src="images/a4.jpg" alt=""></li>
<li><img src="images/a5.jpg" alt=""></li>
<li><img src="images/a6.jpg" alt=""></li>
</ul>
<ul id='adv1' style="margin-left: 500px">
<li><img src="images/a1.jpg" alt=""></li>
<li><img src="images/a2.jpg" alt=""></li>
</ul>
<img src="images/left.png" id="prev" alt="">
<img src="images/right.png" id="next" alt="">
</div>
</body>
</html>
*{
margin: 0px;
padding: 0;
list-style: none;
}
.wrap{
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
margin: auto;
}
#adv{
width: 3000px;
position:absolute;
float: left;
}
li{
float: left;
}
#adv0{
width: 1000px;
position: absolute;
}
#adv1{
width: 1000px;
position: absolute;
}
#prev,
#next{
position: absolute;
cursor: pointer;
top: 30%;
transition: .5s;
opacity: 0.2;
}
#next:hover,
#prev:hover{
transform: scale(1.1);
opacity: 0.7;
}
#prev{
left: -50px;
}
#next{
right: -50px;
}
window.onload=function(){
var next=document.getElementById('next');
var ul=document.getElementById('adv');
var liList=document.getElementById('adv').getElementsByTagName('li');
var ul2=document.getElementById('adv1');
var ul0=document.getElementById('adv0');
var ml=parseInt(ul.style.marginLeft);
var n=0; var cnt=-1;
var key=true;
next.onclick=function(){
clearInterval(autoPlay);
if(n==liList.length-1){//最后一张
cnt++;
if(key==true){
// key=false;
var secondt=setInterval(function(){
ml=parseInt(ul.style.marginLeft);//每次进入都需要获取此时的位置
if(cnt==1){
ul.style.marginLeft='-500px';//显示第二张图 在之后随之移动
}
var ml2=parseInt(ul2.style.marginLeft);
if(ml2==-cnt*500&&(cnt==0||cnt==1)){
clearTimeout(secondt);
key=ture;
}
else if(ml2==-cnt*500&&cnt==2){
ul2.style.marginLeft='500px';
n=2;cnt=-1;
clearInterval(secondt);
key=true;
}
else{
ul.style.marginLeft=ml-20+'px';
ul2.style.marginLeft=ml2-20+'px';
}
},20)
}
}
else{
n++;
var t=setInterval(function(){
var ml=parseInt(ul.style.marginLeft);
if(ml==-(n*500)){//每走完一个图片就停止
clearInterval(t);
}else{
ul.style.marginLeft=ml-20+'px';//否则继续往后播放
}
},20);
}
}
var num=2;
prev.onclick=function(){
clearInterval(autoPlay);
if(n==0){
num--;
if(key==true){
// key=false;
var timePre=setInterval(function(){
var pml=parseInt(ul0.style.marginLeft);
ml=parseInt(ul.style.marginLeft);
if(num==0){
ul.style.marginLeft='-2000px';
}
if(pml==-500*num&&(num==1||num==0)){
clearInterval(timePre);
key=true;
}
else if(pml==-500*num&&cnt==-1){
ul0.style.marginLeft='-1000px';
n=3;num=2;
clearInterval(timePre);
key=true;
}
else{
ul0.style.marginLeft=pml+20+'px';
ul.style.marginLeft=ml+20+'px';
}
},20)
}
}
else{
n--;
var t=setInterval(function(){
var ml=parseInt(ul.style.marginLeft);
if(ml==-n*500){
clearInterval(t);
}
else{
ul.style.marginLeft=ml+20+'px';
}
},20);
}
}
var autoPlay=setInterval(function(){
next.onclick();
},3000)
}
闪式轮播
在要显示的图片上加上class属性,此属性有显示图片的功能,比较简单 详见代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
#adv{
margin: 110px auto;
width: 500px;
position:relative;
border: 1px solid black;
}
#adv li{
display: none;
}
#adv .show{
display: block;
}
#prev,
#next{
position: absolute;
cursor: pointer;
top: 30%;
transition: .5s;
opacity: 0.2;
}
#next:hover,
#prev:hover{
transform: scale(1.1);
opacity: 0.7;
}
#prev{
left: -50px;
}
#next{
right: -50px;
}
</style>
<script>
window.onload=function(){
var next=document.getElementById('next');
var liList=document.getElementsByTagName('li');
var n=0;//当前第几张
next.onclick=function(){
for(var i=0;i<liList.length;i++){
liList[i].className='';
}
n++;
if(n==liList.length){
n=0;
}
liList[n].className='show';
}
prev.onclick=function(){
for(i=0;i<liList.length;i++){
liList[i].className='';
}
n--;
if(n<0){
n=liList.length-1;
}
liList[n].className='show';
}
}
</script>
</head>
<body>
<ul id="adv">
<li class="show"><img src="a1.jpg" alt=""></li>
<li><img src="a2.jpg" alt=""></li>
<li><img src="a3.jpg" alt=""></li>
<li><img src="a4.jpg" alt=""></li>
<li><img src="a5.jpg" alt=""></li>
<li><img src="a6.jpg" alt=""></li>
<img src="left.png" id="prev" alt="">
<img src="right.png" id="next" alt="">
</ul>
</body>
</html>