jquery环形图片旋转特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery环形图片旋转特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery环形图片旋转</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>

	<!--[if lte IE 6]>
		<style type="text/css">
		/* Internet Explorer 6 PNG transparency fix */
		#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-rotatescroll.png", sizingmethod='scale'); }
		#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-thumb.png", sizingmethod='scale'); }
		</style>
	<![endif]-->
	
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.tinycircleslider.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
		});
	</script>	
</head>
<body>
<center>
<div id="rotatescroll">
		<div class="viewport">
			<ul class="overview">
				<li><a href="#"><img src="images/img1_m.jpg" /></a></li>
				<li><a href="#"><img src="images/img2_m.jpg" /></a></li>
				<li><a href="#"><img src="images/img6_m.jpg" /></a></li>
				<li><a href="#"><img src="images/img9_m.jpg" /></a></li>
				<li><a href="#"><img src="images/img10_m.jpg" /></a></li>															
			</ul>
		</div>
		
		<div class="dot"></div>
		<div class="overlay"></div>
		<div class="thumb"></div>
	</div></center>
</body>
</html>

JS代码(jquery.tinycircleslider.min.js):

(function($){
	$.fn.tinycircleslider=function(options){
	var defaults={
	interval:false,intervaltime:3500,snaptodots:false,hidedots:true,radius:140,lightbox:false,callback:null}
;
	var options=$.extend(defaults,options);
	var oCircle=$(this);
	var oCircleX=oCircle.outerWidth();
	var oCircleY=oCircle.outerHeight();
	var oThumb=$('.thumb',oCircle)[0];
	var oThumbX=$(oThumb).outerWidth();
	var oThumbY=$(oThumb).outerHeight();
	var oOverview=$('.overview',oCircle);
	var oDot={
}
;
	var oTimer,oTimer2,oTimer3;
	var oChildren=oOverview.children();
	var oLinks=$('a',oChildren);
	var iPageX=$(oChildren[0]).outerWidth(true);
	var iChildsLength=oChildren.length,iOrginalAngle=0,iCounter=0,iCurrent=0,iFramerate=1;
	return this.each(function(){
	initialize();
}
);
	function initialize(){
	setCircular();
	oOverview[0].style.width=iPageX*oChildren.length+'px';
	if(options.snaptodots){
	setDots()}
;
	gotoSlide(0);
	iOrginalAngle=1;
	setEvents();
	if(options.interval){
	setTimer(true)}
}
;
	function setEvents(){
	oThumb.onmousedown=start;
	oThumb.ontouchstart=function(oEvent){
	oEvent.preventDefault();
	oThumb.onmousedown=null;
	start(oEvent);
	return false;
}
if(oLinks.length>0){
	oCircle.css({
	'cursor':'pointer'}
).click(function(oEvent){
	if($(oEvent.target).hasClass('overlay')){
	if(options.lightbox){
	$(oLinks[iCurrent]).trigger('click');
}
else{
	location.href=oLinks[iCurrent].href;
}
}
return false;
}
);
}
if(options.snaptodots){
	oDot.click(function(){
	if(iCounter==0)gotoSlide($(this).text()-1)}
);
}
}
;
	function start(oEvent){
	clearTimeout(oTimer3);
	$(document).mousemove(drag);
	document.ontouchmove=function(oEvent){
	$(document).unbind('mousemove');
	drag(oEvent);
}
;
	document.onmouseup=oThumb.onmouseup=end;
	oThumb.ontouchend=document.ontouchend=function(oEvent){
	document.onmouseup=oThumb.onmouseup=null;
	end(oEvent);
}
if(options.snaptodots&&options.hidedots){
	oDot.stop(true,true).fadeIn('slow');
}
return false;
}
;
	function end(oEvent){
	$(document).unbind('mousemove');
	document.ontouchmove=document.ontouchend=document.onmouseup=oThumb.onmouseup=oThumb.ontouchend=null;
	clearTimeout(oTimer2);
	if(options.snaptodots){
	if(options.hidedots){
	oDot.stop(true,true).fadeOut('slow');
}
calculateMove();
}
;
	if(options.interval){
	setTimer();
}
return false;
}
;
	function setCircular(){
	oOverview.append($(oChildren[0]).clone());
	oChildren=oOverview.children();
}
;
	function setTimer(bFirst){
	oTimer3=setTimeout(function(){
	gotoSlide(iChildsLength*Math.random(),true)}
,(bFirst?50:options.intervaltime));
}
;
	function setDots(){
	oDot=$('.dot',oCircle);
	var posX,posY;
	var oDotX=oDot.outerWidth(),oDotY=oDot.outerHeight();
	var iLength=(oChildren.length-1);
	var angle=(360/iLength)*(Math.PI/180);
	for(var i=1;
	i<=iLength;
	i++){
	posY=Math.round(-Math.cos(i*angle-angle)*options.radius+(oCircleY/2-oDotY/2));
	posX=Math.round(Math.sin(i*angle-angle)*options.radius+(oCircleX/2-oDotX/2));
	oDot.clone().addClass('dot-'+i).css({
	left:posX,top:posY}
).html('<span>'+i+'</span>').insertAfter(oDot);
}
oDot.remove();
	oDot=$('.dot',oCircle);
}
;
	function gotoSlide(iNum,bTimed){
	var angle=Math.ceil(iNum)*(360/iChildsLength)*(Math.PI/180);
	iFramerate=Math.max(1,Math.round(Math.abs((angle*100)-(iOrginalAngle*100))/10));
	var iRatio=((angle*100)-(iOrginalAngle*100))/iFramerate;
	stepMove(iRatio,bTimed);
}
;
	function drag(oEvent){
	oEvent.preventDefault();
	if(typeof(oEvent.touches)!='undefined'&&oEvent.touches.length==1){
	var oEvent=oEvent.touches[0];
}
var oPos={
	x:oEvent.pageX-oCircle.offset().left-(oCircleX/2),y:oEvent.pageY-oCircle.offset().top-(oCircleY/2)}
iOrginalAngle=Math.atan2(oPos.x,-oPos.y);
	setCSS(iOrginalAngle);
	return false;
}
;
	function calculateMove(){
	var iDropped=(iOrginalAngle*180/Math.PI)/(360/iChildsLength)*100;
	var iDot=Math.round((iOrginalAngle*180/Math.PI)/(360/iChildsLength))*100;
	iFramerate=Math.max(1,Math.round(Math.abs(iDot-iDropped)/10));
	var iStep=((iOrginalAngle*iDot/iDropped*100)-(iOrginalAngle*100))/iFramerate;
	oTimer2=setTimeout(function(){
	stepMove(iStep,false);
}
,100);
}
;
	function stepMove(iStep,bInterval){
	iCounter++var angle=iOrginalAngle+((iCounter*iStep)/100);
	setCSS(angle,iCounter==iFramerate);
	if(iCounter<iFramerate){
	oTimer2=setTimeout(function(){
	stepMove(iStep,bInterval);
}
,50);
}
else{
	iCounter=0;
	iOrginalAngle=angle;
	if(bInterval){
	setTimer();
}
}
}
;
	function setCSS(angle,bFireCallback){
	var iDegrees=Math.round(angle*180/Math.PI);
	iDegrees=iDegrees<0?iDegrees+360:iDegrees;
	oOverview[0].style.left=-(iDegrees/360*((iPageX*(iChildsLength))))+'px';
	oThumb.style.top=Math.round(-Math.cos(angle)*options.radius+(oCircleY/2-oThumbY/2))+'px';
	oThumb.style.left=Math.round(Math.sin(angle)*options.radius+(oCircleX/2-oThumbX/2))+'px';
	iCurrent=(Math.min(iChildsLength-1,Math.round(iDegrees/360*iChildsLength)));
	if(typeof options.callback=='function'&&bFireCallback)options.callback.call(this,oChildren[iCurrent],iCurrent);
}
;
}
;
}
)(jQuery);

CSS代码(website.css):

img{border:0;}
/* Tiny Circleslider */
#rotatescroll{height:300px;position:relative;width:300px;}
#rotatescroll .viewport{height:300px;position:relative;margin:0 auto;overflow:hidden;width:300px}
#rotatescroll .overview{position:absolute;width:798px;list-style:none;margin:0;padding:0;left:0;top:0;}
#rotatescroll .overview li{height:300px;width:300px;float:left;position:relative;}
#rotatescroll .overlay{background:url(../images/bg-rotatescroll.png) no-repeat 0 0;position:absolute;left:0;top:0;height:300px;width:300px;}
#rotatescroll .thumb{background:url(../images/bg-thumb.png) no-repeat 50% 50%;position:absolute;top:-3px;cursor:pointer;left:137px;width:100px;z-index:200;height:100px;}
#rotatescroll .dot{background:url(../images/bg-dot.png) no-repeat 0 0;display:none;height:12px;width:12px;position:absolute;left:155px;top:3px;z-index:100;}
#rotatescroll .dot span{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)