Jquery实现全屏焦点轮播图效果

素颜马尾好姑娘i 2022-05-31 10:24 259阅读 0赞

### **一、效果展示** ###

![20180221195436942][]

###     ###

### **二、实现原理** ###

焦点轮播图原理如下图：（以四张图片组成的轮播图为例）

![20180221185353492][]

简单来说就是将这几张图片设置相同的宽度后横向排列组成一个长盒子，然后将这个长盒子每次向左移动 一个图片的宽 的距离(假如每张图片宽200px，即每次将长盒子向左移动200px)，当移动到最后一张图片时，再把长盒子的left值归0，重新进行上述操作。

然而，要想改变元素的left值就要给元素添加position属性，这样我们给图上黑盒子添加position：relative使其相对定位，再给存放四张图片的长盒子添加position：absolute使其相对于黑盒子绝对定位（这样定位的好处是可以通过改变黑盒子的left,top值来改变轮播图的位置），然后就可以通过改变长盒子的left值使其向左轮播（当然也可以改变长盒子right值使其向右轮播）,当然我们还需要给黑盒子加一个overflow：hidden使超出黑盒子的部分隐藏。

但是，要想使图片横向铺满屏就要使每张图片宽度相对于浏览器视窗为100%。因为css中百分比单位是相对于父元素而言的，所以我们可以给黑盒子的宽度设置为100%，给长盒子的宽度设置为400% 即四个浏览器视窗的宽度，再给每张图片的宽度设置为25%，这样 每张图片的宽度相对于宽度为400%的长盒子为25%，则每张图片相对于浏览器视窗的宽度为（400%\*25%）=100%，然后每次让长盒子的值减去100%就能使其横向铺满屏轮播了。

##  ##

### 三、实现代码 ###

html部分:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <link href="index.css" rel="stylesheet">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
     
    <div class="banner_box">
    	<div class="banner_images">
    		<div class="banner_img"><a href=""><img src="banner0.png" alt="bannerOne"></a></div>
    		<div class="banner_img"><a href=""><img src="banner1.png" alt="bannerTwo"></a></div>
    		<div class="banner_img"><a href=""><img src="banner2.png" alt="bannerThree"></a></div>
    		<div class="banner_img"><a href=""><img src="banner3.png" alt="bannerFour"></a></div>
    	</div>
    
    	<div class="switcher">
    		<p class="prev">←</p>
    		<p class="next">→</p>
    	</div>
    
    	<ul class="points">
    		<li class="point_on"></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </div>
    
    </body>
    </html>

css部分：

@charset "UTF-8";
    *{
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    .banner_box{
    	position: relative; /*attention*/
    	width: 100%;
    	height: 600px;
    	overflow: hidden;
    }
    .banner_images{
    	position: absolute; /*attention*/
    	left: 0;
    	width: 400%; /*attention please*/
    }
    .banner_img{
    	float: left;
    	width: 25%; /*attention please*/
    	height: 600px;
    }
    .banner_img img{
    	width: 100%;
    	height: 600px;
    }
    
    .switcher{
    	position: absolute;
    	top: 285px;
    	width: 100%;
    	display: none;
    }
    .switcher p{
    	height: 50px;
    	width: 50px;
    	line-height: 50px;
    	text-align: center;
    	color: #fff;
    	font-size: 30px;
    	background: rgba(0, 0, 0, .8);
    	border-radius: 50%;
    	cursor: pointer;
    }
    .switcher .prev{
    	float: left;
    	margin-left: 50px
    }
    .switcher .next{
    	float: right;
    	margin-right: 50px;
    }
    .banner_box:hover .switcher{
    	display: block;
    }
    .points{
    	position: absolute;
    	left: 50%;
    	bottom: 30px;
    	width: 400px;
    	margin-left: -200px;
    	overflow: hidden;
    }
    .points li{
    	width: 100px;
    	height: 5px;
    	background: rgba(0, 0, 0, .8);
    	float: left;
    	list-style: none;
    	cursor: Crosshair;
    }
    .points li.point_on{
    	background: #C92027;
    }

js部分：

$(function(){
    	var img_length = $('.banner_img').length; //图片的张数
    	var i  = 1;
    
    	function banner(){ //轮播函数
    		if(i < 0){
    			i = img_length - 1;
    		}
    		if(i > img_length-1){
    			i = 0;
    		}
    		$('.banner_images').animate({'left': (-i*100)+'%'});
    		$('.points li').eq(i).addClass('point_on').siblings().removeClass();
    		i++;
    	}
    	var banner_timer = setInterval(banner, 3000);
    
    	$('.switcher p').hover(function(){	//鼠标移入左右切换箭头清除定时器使轮播停止
    		clearInterval(banner_timer);
    	},function(){	//鼠标移出切换箭头还原定时器，这里为避免定时器重复 还将定时器赋值给上边定义的banner_timer变量
    		banner_timer = setInterval(banner, 3000);
    	});
    
    	$('.switcher p').click(function(){	//点击左右箭头使图片左右切换
    		if($(this).attr('class') == 'prev'){
    			i-=2;
    			banner();
    		}else{
    			i+=2;
    			banner();
    		}
    	})
    
    	$('.points li').click(function(){	//点击相应的焦点跳转到对应图片
    		i = $(this).index();
    		banner(); 
    	});
    });

以上就是Jquery实现横向铺满平式焦点轮播图的全部内容。

[20180221195436942]: /images/20220531/25e0217eb13d400db42d9e560fdec9f3.png
[20180221185353492]: /images/20220531/9a0394f7c4be4d75951c88bad063260d.png