轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

xiaoxiede_wo

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量162

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/xiaoxiede_wo/article/details/88091308

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

滑动式轮播图：需要实现的是

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>

xiaoxiede_wo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图

滑动式轮播图：需要实现的是 1、定时播动； 2、每次图片停留几秒再轮播走； 3、向后滑动时做到尾首连接； 4、向前滑动时做到首尾连接。* 滑动式轮播图（无缝连接最后一张与第一张连接）* a1.....a6.jpg轮播：6张图轮播我需要再加上两张图做到首&lt;-s&gt;尾...
复制链接

扫一扫

专栏目录