jQuery3D圆盘旋转焦点图支持鼠标滚轮

之前我们分享过很多炫酷实用的jQuery焦点图插件了，今天介绍的这款jQuery焦点图非常特别，所有图片围成一个圆圈，组成一个立体视觉的圆盘，并且可以旋转选择圆盘中的图片。另外，这款jQuery 3D圆盘旋转焦点图插件还支持鼠标滚轮，可以让你更方便地浏览图片。

Image title

Tooltips support HTML text.

Image title

Load images inside the tooltip.

Image description

Image title

Tooltips support HTML text.

Image title

Load images inside the tooltip.

这里我们用一个UL列表简单地将图片显示在网页上，至于如何像演示示例中图片排列成圆盘的形状，那还需要下面CSS和jQuery的支持。

CSS代码：

.carousel
{
	position:relative;
	margin:0px;
	padding:0px;
	-moz-user-select:none;
	-webkit-user-select:none;
}

.carousel .carousel-item
{
	background-image:url(preloader.gif);
	background-position:center;
	background-repeat:no-repeat;
	background-color:#FFF;
	position:absolute;
	cursor:pointer;
}

.carousel .out
{
	border:#DDD 2px solid;
}

.carousel .over
{
	border:2px solid #DDD;
	-moz-box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color=#000000)";

}

.carousel .click
{
	border:2px solid #DDD;
	-moz-box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color=#000000)";
}

.carousel .select
{
	border:2px solid #DDD;
	-moz-box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=130, Color=#000000)";
}

.carousel .tooltip
{
	position:absolute;
	z-index:9999;
	background-color:#DDD;
	margin-bottom:20px;
	border:#EEE solid 4px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

.carousel .tooltip p
{
	color:#999;
	padding:10px;
	margin:0px;
}

.carousel .scrollbar
{
	width:340px;
	position:absolute;
	margin-top:100px;

}

.carousel .scrollbar .track
{
	background-image:url(track.png);
	width:300px;
	height:20px;
	position:absolute;
	left:20px;
}

.carousel .scrollbar .thumb
{
	background-image:url(thumb.png);
	width:70px;
	height:20px;
	position:absolute;
	cursor:pointer;
}

.carousel .scrollbar .left
{
	background-image:url(left.png);
	width:20px;
	height:20px;
	position:absolute;
	cursor:pointer;
	left:0px;
}

.carousel .scrollbar .right
{
	background-image:url(right.png);
	width:20px;
	height:20px;
	position:absolute;
	cursor:pointer;
	right:0px;
}

CSS代码也非常简单，主要是利用CSS滤镜实现鼠标滑过图片和鼠标点击图片时的阴影特效，以及下方的滑动控制杆。

jQuery代码：

首先引入必要的jQuery库，如下：

因为这款jQuery焦点图支持鼠标滚轮，所以需要引入jquery.mousewheel.js文件。

最后只要初始化JS代码即可：

jQuery(document).ready(function($){
		$('#carousel').carousel({width: 870, 
								 height: 350, 
								 itemWidth:120, 
								 horizontalRadius:270, 
								 verticalRadius:85, 
								 resize:false, 
								 mouseScroll:false, 
								 mouseDrag:true, 
								 scaleRatio:0.4, 
								 scrollbar:true, 
								 tooltip:true, 
								 mouseWheel:true, 
								 mouseWheelReverse:true});
	});

在线演示源码下载