JS+CSS3全屏背景的3D透视轮播图切换特效

一款JS+CSS3全屏背景的3D透视轮播图切换特效，鼠标左右移动时会有一个3D透视的视觉差效果，鼠标移动到图片的左半或右半部分时，图标箭头也会发生改变，此时点击鼠标左键则向对应方向切换相应的图片，下面的焦点小方块也会自动切换，图片的标题和说明文字等均可自由替换。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入3个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，设置好轮播图的内容div容器和焦点的div容器，代码如下：

<div class="slider" id="slider" style="--img-prev:url(img/1.jpg)"> 
  <div class="slider__content" id="slider-content">
	<div class="slider__images">
	  <div class="slider__images-item slider__images-item--active" data-id="1"><img src="img/1.jpg"/></div>
	  <div class="slider__images-item" data-id="2"><img src="img/2.jpg"/></div>
	  <div class="slider__images-item" data-id="3"><img src="img/3.jpg"/></div>
	  <div class="slider__images-item" data-id="4"><img src="img/4.jpg"/></div>
	  <div class="slider__images-item" data-id="5"><img src="img/5.jpg"/></div>
	</div>
	<div class="slider__text">
	  <div class="slider__text-item slider__text-item--active" data-id="1">
		<div class="slider__text-item-head">
		  <h3>Forest</h3>
		</div>
		<div class="slider__text-item-info">
		  <p>“And into the forest I go, to lose my mind and find my soul”</p>
		</div>
	  </div>
	  <div class="slider__text-item" data-id="2">
		<div class="slider__text-item-head">
		  <h3>Lake</h3>
		</div>
		<div class="slider__text-item-info">
		  <p>“Mist to mist, drops to drops. For water thou art, and unto water shalt thou return”</p>
		</div>
	  </div>
	  <div class="slider__text-item" data-id="3">
		<div class="slider__text-item-head">
		  <h3>Cliffs</h3>
		</div>
		<div class="slider__text-item-info">
		  <p>“Go to the edge of the cliff and jump off. Build your wings on the way down”</p>
		</div>
	  </div>
	  <div class="slider__text-item" data-id="4">
		<div class="slider__text-item-head">
		  <h3>Mountains</h3>
		</div>
		<div class="slider__text-item-info">
		  <p>“What are men to rocks and mountains?”</p>
		</div>
	  </div>
	  <div class="slider__text-item" data-id="5">
		<div class="slider__text-item-head">
		  <h3>Peaks</h3>
		</div>
		<div class="slider__text-item-info">
		  <p>“On all the peaks lies peace”</p>
		</div>
	  </div>
	</div>
  </div>
  <div class="slider__nav">
	<div class="slider__nav-arrows">
	  <div class="slider__nav-arrow slider__nav-arrow--left" id="left">to left</div>
	  <div class="slider__nav-arrow slider__nav-arrow--right" id="right">to right</div>
	</div>
	<div class="slider__nav-dots" id="slider-dots">
	  <div class="slider__nav-dot slider__nav-dot--active" data-id="1"></div>
	  <div class="slider__nav-dot" data-id="2"></div>
	  <div class="slider__nav-dot" data-id="3"></div>
	  <div class="slider__nav-dot" data-id="4"></div>
	  <div class="slider__nav-dot" data-id="5"></div>
	</div>
  </div>
</div>

页面的底部，需引入一个必要的JS文件，代码如下：

<script type="text/javascript" src="js/index.js"></script>