三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js面向对象实现无缝轮播）

一时失言乱红尘 2021-12-21 15:37 442阅读 0赞

## 三种方式实现banner图的轮播（jq实现淡入淡出、jq实现层级轮播、js实现无缝轮播） ##

**//1、jq实现淡入淡出**

思路：  
a、使用JQ库里面的.fadeIn()\\fadeOut()方法  
\*\*fadeIn()?\*使用淡入效果来显示一个隐藏的 元素  
\*\*fadeOut()?\*使用淡出效果来隐藏一个元素  
b、设置一个定时器，用于banner图的自动播放  
c、对下面小圆标设置mouseenter、mouseout事件，当鼠标移入，计时器停止，图片显示区显示对应的图片

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            ul,ol{ list-style: none;}
            .wrapper{
                width: 670px;
                height: 240px;
                margin: 100px auto;
                overflow: hidden;
                position: relative;
            }
            ul{
            	position:relative;
            }
            ul li{
            	position:absolute;
            	top:0;
            	left:0;
            }
            ol{
                position: absolute;
                right: 0;
                bottom: 10px;
                width: 190px;
            }
            ol li{
                float: left;
                width: 20px;
                height: 20px;
                margin: 0 5px;
                text-align: center;
                border-radius: 50%;
                cursor: default;
                background-color: #abc;
            }
            ol li.current{
                background-color: pink;
            }
        </style>
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <ul>
                <li style="z-index: 6;"><img src="images/1.jpg" alt=""/></li>
                <li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>
                <li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>
                <li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>
                <li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>
                <li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>
            </ul>
            <ol style="z-index: 10;">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </div>
    </body>
    </html>
    <script type="text/javascript">
    		//设置一个定时器，用于图片自动播放、每次播放的时间
    		 let timer = null,
    		 //设置下标变量
       		index = 0,
       		//获取所有存放图片的li
       		$ulist = $(".wrapper ul li"),
       		//获取所有存放小圆标的li
       		$olist = $(".wrapper ol li");
       		//设置定时器的变量
        	timer = setInterval( autoPlay , 2000 );
        	//设置一个自动播放的函数
        	function autoPlay(){
        	//每调用一次，下标+1，主要作用是记录下标，让图与下面的小圆标对应
       		index++;
       		//size（）是指list集合中元素的个数
       		if( index == $olist.size() ){//设置最后一张图的条件
       			index = 0;
       		}
       		//给当前的小圆标增加样式、给其他小圆标清除样式
       		$olist.eq(index).addClass("current").siblings().removeClass("current");
       		//让当前图片淡入，其他图片淡出
       		$ulist.eq(index).fadeIn(1000).siblings().fadeOut(1000);
       	}
       	//给小圆标设置鼠标移入事件，清除定时器，下标变为当前下标-1；调用一次自动播放函数
       	$olist.mouseenter(function(){
       		clearInterval( timer );
       		index = $(this).index()-1;
       		autoPlay();
       	}).mouseleave(function(){
       	//调用自动播放函数，每两秒执行一次
    		timer = setInterval( autoPlay , 2000 );
       	})
    </script>

2、jq实现层级轮播  
//思路：  
a、设置一个ul（position：relative）,li里面存放图片（position：absolute ， z-index = 0），将第一张图片放置ul里面，其他图片给一个left值，让他们在ul外面，外面的大盒子（overflow：hidden）  
b、设置一个定时器，让ul里面的lide left值变为0，并且让层级属性 z-index = 0，这样可以实现图片覆盖效果  
c、对下面小圆标设置mouseenter、mouseout事件，当鼠标移入，计时器停止，图片显示区显示对应的图片

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            ul, ol {
                list-style: none;
            }
    
            .wrap {
                width: 650px;
                height: 250px;
                margin: 100px auto 0;
                position: relative;
                overflow: hidden;
            }
    
            .wrap img {
                display: block;
            }
    
            .wrap ul {
                height: 250px;
                z-index: 1;
                position: relative;
            }
    
            .wrap ol {
                height: 30px;
                z-index: 2;
                position: absolute;
                bottom: 0;
                right: 0;
            }
    
            .wrap > ul > li {
                position: absolute;
                top: 0;
                left: 650px;
            }
    
            .wrap > ol > li {
                float: left;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                border: 1px solid white;
                margin-right: 5px;
                background: Gray;
            }
    
            .wrap > ol > li:hover {
                cursor: pointer;
            }
    
            .wrap li.active {
                padding: 2px;
                color: orange;
                margin-top: -4px;
                border: 1px solid orange;
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        <ul>
            <li style="z-index:0;left:0;"><img src="images/01.jpg" alt=""/></li>
            <li><img src="images/02.jpg" alt=""/></li>
            <li><img src="images/03.jpg" alt=""/></li>
            <li><img src="images/04.jpg" alt=""/></li>
            <li><img src="images/05.jpg" alt=""/></li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
    </body>
    </html>
    <script src="../../jquery-1.11.1.js"></script>
    <script type="text/javascript">
    		//设置一个时间变量
       		let timer = null,
       		//设置一个记录下标的变量
       		index = 0,
       		//获取存放图片的li
       		$ulist = $(".wrap ul li"),
       		//获取存放下标的li
       		$olist = $(".wrap ol li");
       		//设置一个自动播放函数，每两秒执行一次，并赋值给时间变量
       		timer = setInterval( autoPlay , 2000 );
       		//设置自动播放函数
      	 	function autoPlay(){
      	 	//每执行一次，下标增加一次。目的让图片与小圆标相对应
       		index++;
       		if( index == $olist.size() ){//当图片播放到最后一张时，让其回到第一张
       			index = 0;
       		}
       		//给当前的小圆标增加样式，其他小圆标清除样式
       		$olist.eq(index).addClass("active").siblings().removeClass("active");
       		//让当前的li运动（left值变为0，执行时间为1.5秒，（当前的zIndex属性值变为0，其他li的zIndex为1，left值为650））
       		$ulist.eq(index).animate({left : 0} , 1500 , function(){
       			$(this).css("zIndex",0).siblings().css({ "zIndex":1 , "left" : 650 })
       		});
       	}
       	//给小圆标（li）设置移入移出时间
       	$olist.mouseenter(function(){
       	//移入时清除定时器，将下边变为当前下边-1，调用一次函数
       		clearInterval( timer );
       		index = $(this).index()-1;
       		autoPlay();
       	}).mouseleave(function(){
       	移出时，定时器触发
    		timer = setInterval( autoPlay , 2000 );
       	})
    </script>

**//3、js实现无缝轮播**  
思路：  
a、将图片放入li里面，给li一个浮动，让其并排显示（本案例是向左浮动，在一,横排显示）给外层的div盒子一个宽度(盒子宽度为图片的宽度，position:relative，overflow：hidden),ul的宽度为所有图片宽度之和（position：absolute）  
b、设置一个自动播放函数，记录下标，每次执行一次，left值就变为 li的宽乘以下标  
c、对下面小圆标设置mouseenter、mouseout事件，当鼠标移入，计时器停止，图片显示区显示对应的图片

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    	*{
    		padding: 0;
    		margin: 0;
    	}
    	.banner{
    		position: relative;
    		width: 810px;
    		height: 320px;
    		margin: 50px auto;
    		background: grey;
    		overflow: hidden;
    	}
    	.img-list{
    		list-style:none;
    		position: absolute;
    		left:0; top:0;
    		width: 5240px;
    		height: 320px;
    	}
    	.img-list li{
    		float: left;
    	}
    	.banner-nav-list{
    		list-style:none;
    		position: absolute;
    		right:100px; bottom:50px;
    		
    	}
    	.banner-nav-list li {
    		background: red;
    		float: left;
    		width: 20px; height: 20px;
    		margin-right: 10px;
    		cursor: pointer;
    		text-align: center;
    	}
    	
    	.banner-nav-list li.active{
    		background: yellow;
    	}
    	.banner .toLeft {
    		width: 60px;
    		height: 60px;
    		background: url(images/btn.gif);
    		position: absolute;
    		left: 30px; top: 120px;
    		/*opacity: 0;*/
    	}
    	.banner .toRight {
    		width: 60px;
    		height: 60px;
    		background: url(images/btn.gif) 0px 60px;
    		position: absolute;
    		right: 30px; top: 120px;
    		/*opacity: 0;*/
    	}
     
    </style>
    
    <script  src="sport5.js"></script>
    <script type="text/javascript">
    	 
    	
    </script>
    </head>
    
    <body>
    	<div class="banner" id="banner">
    		<ul class="img-list" id="img-list">
    			<li><img src="images/001.jpg"></li>
    			<li><img src="images/002.jpg"></li>
    			<li><img src="images/003.jpg"></li>
    			<li><img src="images/004.jpg"></li>
    			<li><img src="images/001.jpg"></li>
    		</ul>
    		
    		<ul class="banner-nav-list" id="banner-nav-list">
    			<li class="active">1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    		</ul>
    		
    	</div>
    </body>
    </html>
    <script src="public.js"></script>
    //设置一个运动的函数
    <script src="sport5.js"></script>
    <script type="text/javascript">
    //使用面向对象实现
    	onload = function(){
    		new Banner().init().fnMouse();
    	}
    	function Banner(){
    		this.timer = null;
    		this.index = 0;
    		this.oUl = $id("img-list");//运动的ul
    		this.ulist = $id("banner-nav-list").children;//存放小图标的li
    		this.imgWidth = this.oUl.children[0].offsetWidth;//一张图片的宽度
    		this.init = function(){
    			this.timer = setInterval( this.autoPlay , 2000 );
    			return this;
    		}
    		this.autoPlay = function(){
    			this.index++;
    			if( this.index == 5 ){
    				this.oUl.style.left = 0;
    				this.index = 1;
    			}
    			for( let i = 0 ; i < this.ulist.length ; i++ ){
    				this.ulist[i].className = "";
    			}
    			this.ulist[this.index==4?0 : this.index].className = "active";
    			startMove( this.oUl , { left : -this.index*this.imgWidth } )
    		}.bind(this)
    		
    		this.fnMouse = function(){
    			for( let i = 0 ; i < this.ulist.length ; i++ ){
    				this.ulist[i].onmouseenter = function(){
    					clearInterval( this.timer );
    					this.index = i - 1;
    					this.autoPlay();
    				}.bind(this)
    				this.ulist[i].onmouseleave = function(){
    					this.init();
    				}.bind(this)
    			}
    		}
    	}
    </script>