以下是 jquery卡通圆圈可旋转特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>13141618.taobao.com</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--[if lte IE 6]>
<style type="text/css">
/* Internet Explorer 6 PNG transparency fix */
#rotatescroll1 .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-rotatescroll.png", sizingmethod='scale'); }
#rotatescroll1 .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-thumb.png", sizingmethod='scale'); }
</style>
<![endif]-->
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycircleslider.js"></script>
<script type="text/javascript" src="js/website.js"></script>
</head>
<body>
<div id="content" class="content">
<!-- OPEN ROTATE UI -->
<div id="rotatescroll1">
<div class="viewport">
<ul class="overview">
<li><img src="images/SF1.jpg" alt="Chun-Li" /></li>
<li><img src="images/SF2.jpg" alt="VEGA" /></li>
<li><img src="images/SF3.jpg" alt="DHAISIM" /></li>
<li><img src="images/SF4.jpg" alt="KEN" /></li>
<li><img src="images/SF5.jpg" alt="BALROG" /></li>
<li><img src="images/SF6.jpg" alt="CAMMY" /></li>
<li><img src="images/SF7.jpg" alt="GOUKI" /></li>
<li><img src="images/SF8.jpg" alt="BLANKA" /></li>
<li><img src="images/SF9.jpg" alt="HONDA" /></li>
<li><img src="images/SF10.jpg" alt="FEI LONG" /></li>
<li><img src="images/SF11.jpg" alt="GUILE" /></li>
<li><img src="images/SF12.jpg" alt="RYU" /></li>
<li><img src="images/SF13.jpg" alt="SAGAT" /></li>
<li><img src="images/SF14.jpg" alt="THWAK" /></li>
<li><img src="images/SF15.jpg" alt="ZANGIEF" /></li>
</ul>
</div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<!-- CLOSE ROTATE UI -->
<br><br>
</div>
</body>
</html>
JS代码(website.js):
var Website ={
run:function(){
var oCircleslider1 = $('#rotatescroll1');
if(oCircleslider1.length > 0){
oCircleslider1.tinycircleslider();
}
}
}
;
//Initialize$(document).ready(function(){
Website.run();
}
);
CSS代码(index.css):
/*Theme Name:Airos ChouTheme URI:http://www.sunflowamedia.com/Description:Web Design examples*/
*{margin:0;padding:0;}
body{background:#FFF;font-size:12px;text-shadow:1px 1px 1px #000;font-family:"Trebuchet MS","Myriad Pro",Arial,sans-serif;color:#666;}
img{border:0;}
h2.title_name{font-family:"Trebuchet MS","Myriad Pro",Arial,sans-serif;font-weight:normal;font-size:4em;margin:0;padding:50px 0 20px 0;text-align:center;}
h2.title_name span{font-family:normal Georgia,'Times New Roman',Times,serif;color:#c01313;font-size:0.9em;}
h2.title_name small{display:block;font-family:normal Verdana,Arial,Helvetica,sans-serif;font-size:0.3em;font-weight:bold;letter-spacing:0.5em;text-transform:uppercase;}
p.copy_right{width:750px;margin:0 auto;padding:100px 0 0 0;clear:both;font-size:1.1em;letter-spacing:1px;text-align:center;overflow:hidden;font-weight:bold;}
p.copy_right a{color:#c01313;text-shadow:none;}
p.copy_right a:hover{text-decoration:none;}
/* Content Begin */
#content{width:750px;margin:50px auto 0 auto;clear:both;}
#rotatescroll1{width:300px;height:300px;margin:0 auto;position:relative;}
#rotatescroll1 .viewport{width:300px;height:300px;position:relative;margin:0 auto;overflow:hidden;}
#rotatescroll1 .overview{width:798px;position:absolute;list-style:none;margin:0;padding:0;left:0;top:0;}
#rotatescroll1 .overview li{width:300px;height:300px;float:left;position:relative;}
#rotatescroll1 .overlay{height:300px;width:300px;background:url(../images/bg-rotatescroll.png) no-repeat 0 0;position:absolute;left:0;top:0;}
#rotatescroll1 .thumb{width:26px;height:26px;z-index:200;background:url(../images/bg-thumb.png) no-repeat 50% 50%;position:absolute;top:0px;cursor:pointer;left:0px;}
#rotatescroll1 .dot{background:url(../images/bg-dot2.png) no-repeat 0 0;display:none;height:12px;width:12px;position:absolute;left:155px;top:3px;z-index:100;}
#rotatescroll1 .dot span{display:none;}
分享到QQ
分享到微博
微信扫一扫
