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/sti_style.css" type="text/css" media="screen"> 
<style> 
body { margin:0; }
</style> 
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> 
<script type="text/javascript" src="js/jquery.versatileTouchSlider.min.js"></script> 
<script> 
jQuery(document).ready(function() {
$.versatileTouchSlider('#banner', {
slideWidth: 915, // some number. ex: 880 or '100%'
slideHeight: 500, // some number. ex: 220 or 'auto'
showPreviousNext: true,
currentSlide: 0,
scrollSpeed: 600,
autoSlide: false,
autoSlideDelay: 3000,
showPlayPause: true,
showPagination: true,
alignPagination: 'center',
alignMenu: 'left',
swipeDrag: true,
sliderType: 'image_banner', // image_shelf, image_banner, image_text, image_gallery
pageStyle: 'thumbnails', // numbers, bullets, thumbnails
onScrollEvent: function(slideNum) { $('#callback').text('Slide Number: ' + slideNum) }, 
ajaxEvent: function() {}
}
);
});//ready
</script> 
</head> 
<body> 
<div class="sti_container" id="banner" style="margin-top:20px;"> 
<!-- slider --> 
<div class="sti_slider"> 
<div class="sti_items"> 
<div class="sti_slide"> 
<a href="#/" target="_blank"><img class="image" src="img/h1.jpg" alt=""></a> 
<div class="banner_title">Drag and click events enabled without conflict. The link can be directly on the image. <a href="#" target="_blank">Read More</a></div> 
</div> 
<div class="sti_slide"> 
<img class="image" src="img/h2.jpg" alt=""> 
<div class="banner_title">Curabitur augue ante <a href="#">Read More</a></div> 
</div> 
<div class="sti_slide"> 
<img class="image" src="img/h3.jpg" alt=""> 
<div class="banner_title">Vestibulum semper lectus sit <a href="#">Read More</a></div> 
</div> 
<div class="sti_slide"> 
<img class="image" src="img/h4.jpg" alt=""> 
<div class="banner_title">Fusce molestie euismod <a href="#">Read More</a></div> 
</div> 
<div class="sti_slide"> 
<img class="image" src="img/h5.jpg" alt=""> 
<div class="banner_title">Nullam in ligula et magna <a href="#">Read More</a></div> 
</div> 
</div><!-- sti_items --> 
</div>
<!-- sti_slider --> 
<div class="sti_paginate"> 
<div class="sti_page"> 
<img src="image/banner_full_1_thumb.jpg" alt=""> 
<img src="image/banner_full_2_thumb.jpg" alt=""> 
<img src="image/banner_full_3_thumb.jpg" alt=""> 
<img src="image/banner_full_4_thumb.jpg" alt=""> 
<img src="image/banner_full_5_thumb.jpg" alt="">        </div> 

<div class="sti_control"> 
<a href="#" class="sti_btn sti_play"><img src="img/play.png" alt=""></a> 
<a href="#" class="sti_btn sti_pause"><img src="img/pause.png" alt=""></a>        </div> 
</div> 
<div class="sti_clear"></div> 
<div id="callback" style="background:#f4f4f4; width:160px; padding:10px; color:#999; font-size:12px; margin:50px auto 0 auto; text-align:center;">callback onScrollEvent</div> 
</div>
</body> 
</html>

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

/** touchSwipe - jQuery Plugin* https://github.com/mattbryson/TouchSwipe-Jquery-Plugin* http://labs.skinkers.com/touchSwipe/* http://plugins.jquery.com/project/touchSwipe** Copyright (c) 2010 Matt Bryson (www.skinkers.com)* Dual licensed under the MIT or GPL Version 2 licenses.** $version:1.3.3*/
(function(e){
	function g(t){
	if(t&&t.allowPageScroll===undefined&&(t.swipe!==undefined||t.swipeStatus!==undefined)){
	t.allowPageScroll=s}
if(!t){
	t={
}
}
t=e.extend({
}
,e.fn.swipe.defaults,t);
	return this.each(function(){
	var n=e(this);
	var r=n.data(v);
	if(!r){
	r=new y(this,t);
	n.data(v,r)}
}
)}
function y(m,g){
	function H(t){
	t=t.originalEvent;
	var n,r=d?t.touches[0]:t;
	k=l;
	if(d){
	L=t.touches.length}
else{
	if(t.preventDefault){
	t.preventDefault()}
else{
	t.returnValue=false}
}
x=0;
	T=null;
	N=0;
	if(!d||L===g.fingers||g.fingers===f){
	A.x=O.x=e.browser.msie&&e.browser.version<="8.0"?r.clientX:r.pageX;
	A.y=O.y=e.browser.msie&&e.browser.version<="8.0"?r.clientY:r.pageY;
	_=J();
	if(g.swipeStatus){
	n=I(t,k)}
}
else{
	F(t)}
if(n===false){
	k=p;
	I(t,k);
	return n}
else{
	C.bind(w,B);
	C.bind(E,j)}
}
function B(t){
	t=t.originalEvent;
	if(k===h||k===p)return;
	var n,r=d?t.touches[0]:t;
	O.x=e.browser.msie&&e.browser.version<="8.0"?r.clientX:r.pageX;
	O.y=e.browser.msie&&e.browser.version<="8.0"?r.clientY:r.pageY;
	D=J();
	T=V();
	if(d){
	L=t.touches.length}
k=c;
	U(t,T);
	if(L===g.fingers||g.fingers===f||!d){
	x=W();
	N=z();
	if(g.swipeStatus){
	n=I(t,k,T,x,N)}
if(!g.triggerOnTouchEnd){
	var i=!R();
	if(q()===true){
	k=h;
	n=I(t,k)}
else if(i){
	k=p;
	I(t,k)}
}
}
else{
	k=p;
	I(t,k)}
if(n===false){
	k=p;
	I(t,k)}
}
function j(e){
	e=e.originalEvent;
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
D=J();
	x=W();
	T=V();
	N=z();
	if(g.triggerOnTouchEnd||g.triggerOnTouchEnd===false&&k===c){
	k=h;
	if((L===g.fingers||g.fingers===f||!d)&&O.x!==0){
	var t=!R();
	if((q()===true||q()===null)&&!t){
	I(e,k)}
else if(t||q()===false){
	k=p;
	I(e,k)}
}
else{
	k=p;
	I(e,k)}
}
else if(k===c){
	k=p;
	I(e,k)}
C.unbind(w,B,false);
	C.unbind(E,j,false)}
function F(){
	L=0;
	A.x=0;
	A.y=0;
	O.x=0;
	O.y=0;
	M.x=0;
	M.y=0;
	D=0;
	_=0}
function I(e,s){
	var o=undefined;
	if(g.swipeStatus){
	o=g.swipeStatus.call(C,e,s,T||null,x||0,N||0,L)}
if(s===p){
	if(g.click&&(L===1||!d)&&(isNaN(x)||x===0)){
	o=g.click.call(C,e,e.target)}
}
if(s==h){
	if(g.swipe){
	o=g.swipe.call(C,e,T,x,N,L)}
switch(T){
	case t:if(g.swipeLeft){
	o=g.swipeLeft.call(C,e,T,x,N,L)}
break;
	case n:if(g.swipeRight){
	o=g.swipeRight.call(C,e,T,x,N,L)}
break;
	case r:if(g.swipeUp){
	o=g.swipeUp.call(C,e,T,x,N,L)}
break;
	case i:if(g.swipeDown){
	o=g.swipeDown.call(C,e,T,x,N,L)}
break}
}
if(s===p||s===h){
	F(e)}
return o}
function q(){
	if(g.threshold!==null){
	return x>=g.threshold}
return null}
function R(){
	var e;
	if(g.maxTimeThreshold){
	if(N>=g.maxTimeThreshold){
	e=false}
else{
	e=true}
}
else{
	e=true}
return e}
function U(e,f){
	if(g.allowPageScroll===s){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
else{
	var l=g.allowPageScroll===o;
	switch(f){
	case t:if(g.swipeLeft&&l||!l&&g.allowPageScroll!=u){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
break;
	case n:if(g.swipeRight&&l||!l&&g.allowPageScroll!=u){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
break;
	case r:if(g.swipeUp&&l||!l&&g.allowPageScroll!=a){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
break;
	case i:if(g.swipeDown&&l||!l&&g.allowPageScroll!=a){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
break}
}
}
function z(){
	return D-_}
function W(){
	return Math.round(Math.sqrt(Math.pow(O.x-A.x,2)+Math.pow(O.y-A.y,2)))}
function X(){
	var e=A.x-O.x;
	var t=O.y-A.y;
	var n=Math.atan2(t,e);
	var r=Math.round(n*180/Math.PI);
	if(r<0){
	r=360-Math.abs(r)}
return r}
function V(){
	var e=X();
	if(e<=45&&e>=0){
	return t}
else if(e<=360&&e>=315){
	return t}
else if(e>=135&&e<=225){
	return n}
else if(e>45&&e<135){
	return i}
else{
	return r}
}
function J(){
	var e=new Date;
	return e.getTime()}
function K(){
	C.unbind(b,H);
	C.unbind(S,F);
	C.unbind(w,B);
	C.unbind(E,j)}
var y=d||!g.fallbackToMouseEvents,b=y?"touchstart":"mousedown",w=y?"touchmove":"mousemove",E=y?"touchend":"mouseup",S="touchcancel";
	var x=0;
	var T=null;
	var N=0;
	var C=e(m);
	var k="start";
	var L=0;
	var A={
	x:0,y:0}
;
	var O={
	x:0,y:0}
;
	var M={
	x:0,y:0}
;
	var _=0;
	var D=0;
	try{
	C.bind(b,H);
	C.bind(S,F)}
catch(P){
	e.error("events not supported "+b+","+S+" on jQuery.swipe")}
this.enable=function(){
	C.bind(b,H);
	C.bind(S,F);
	return C}
;
	this.disable=function(){
	K();
	return C}
;
	this.destroy=function(){
	K();
	C.data(v,null);
	return C}
;
}
var t="left",n="right",r="up",i="down",s="none",o="auto",u="horizontal",a="vertical",f="all",l="start",c="move",h="end",p="cancel",d="ontouchstart"in window,v="TouchSwipe";
	var m={
	fingers:1,threshold:50,maxTimeThreshold:null,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,click:null,triggerOnTouchEnd:true,allowPageScroll:"auto",fallbackToMouseEvents:true}
;
	e.fn.swipe=function(t){
	var n=e(this),r=n.data(v);
	if(r&&typeof t==="string"){
	if(r[t]){
	return r[t].apply(this,Array.prototype.slice.call(arguments,1))}
else{
	e.error("Method "+t+" does not exist on jQuery.swipe")}
}
else if(!r&&(typeof t==="object"||!t)){
	return g.apply(this,arguments)}
return n}
;
	e.fn.swipe.defaults=m;
	e.fn.swipe.phases={
	PHASE_START:l,PHASE_MOVE:c,PHASE_END:h,PHASE_CANCEL:p}
;
	e.fn.swipe.directions={
	LEFT:t,RIGHT:n,UP:r,DOWN:i}
;
	e.fn.swipe.pageScroll={
	NONE:s,HORIZONTAL:u,VERTICAL:a,AUTO:o}
;
	e.fn.swipe.fingers={
	ONE:1,TWO:2,THREE:3,ALL:f}
}
)(jQuery);

CSS代码(sti_style.css):

/* ----------------------------------------------------sti slider---------------------------------------------------- */
/* .sti_container{max-width:100%;height:auto;}
*/
.sti_container{font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:18px;color:#333;margin:0px auto;width:550px;min-height:200px;padding:0px;overflow:hidden;}
.sti_container a{text-decoration:none;color:#2d75cd;}
.ajax_content{clear:both;}
.sti_slider{width:550px;overflow:hidden;position:relative;background:#f4f4f4;margin:0;}
.sti_items{float:left;display:none;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:0.5s;-webkit-transition-timing-function:ease-out;padding:0px;margin:0px;width:15000px;-webkit-transform:translate3d(0px,0px,0px);}
.sti_items img{padding:0px;margin:0px;float:left;-webkit-transform:translate3d(0px,0px,0px);-webkit-transform:translate2d(0px,0px);}
.preload_32{background:#fff url(../img/preload_32.gif) center no-repeat;width:32px;height:32px;padding:5px;position:absolute;z-index:1000;border:#ddd solid 1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 0 4px rgba(0,0,0,.3);}
.preload_16{background:#fff url(../img/preload_16.gif) center no-repeat;width:16px;height:16px;padding:5px;position:absolute;z-index:1001;margin-top:28px;left:5px;border:#ddd solid 1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.3);}
.sti_slide{width:550px;height:207px;float:left;padding:0;margin:0;background:#fff url(../img/texture_01.jpg);position:relative;}
.sti_slide img{display:block;border:none !important;margin:0 !important;padding:0 !important;max-width:none !important;max-height:none !important;height:none !important;}
.sti_slide div.banner_title{font-size:13px;background:#000;color:#999;padding:10px;position:absolute;left:0;bottom:30px;opacity:.8;}
.sti_slide div.banner_title a{color:#fff;}
.sti_slide div.banner_title a:hover{text-decoration:underline;}
/* content */
.sti_content_slider{background:#fff;margin:0 auto;color:#777;}
.sti_content_slider .sti_content_inner{padding:0px;}
.sti_content_slider h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;margin-top:0;color:#505050;}
.sti_content_slider h1{font-size:32px;line-height:34px;margin-bottom:20px;clear:both;}
.sti_content_slider h2{font-size:26px;line-height:28px;margin-bottom:20px;clear:both;}
.sti_content_slider h3{font-size:20px;line-height:22px;margin-bottom:20px;clear:both;}
.sti_content_slider h4{font-size:16px;line-height:18px;margin-bottom:20px;clear:both;}
.sti_content_slider h5{font-size:14px;line-height:16px;margin-bottom:20px;clear:both;}
.sti_content_slider h6{font-size:12px;line-height:14px;margin-bottom:20px;clear:both;}
.sti_content_slider p{margin-top:0;margin-bottom:20px;}
.sti_content_slider a:hover{text-decoration:underline;color:#6fa1df;}
.sti_content_slider img{margin:0 0 20px 0 !important;}
.sti_clear{clear:both;}
.sti_line{border-top:#ddd solid 1px;margin-top:20px;clear:both;}
/* ----------------------------------------------------sti product---------------------------------------------------- */
.sti_prod{width:110px;height:150px;display:inline-block;margin:22px 0px -5px 20px;position:relative !important;line-height:30px;/* ie7 fix */
zoom:1;*display:inline;*margin-bottom:0px;}
.sti_prod img{position:absolute !important;bottom:0;display:block !important;border:none !important;margin:0 !important;padding:0 !important;max-width:none !important;max-height:none !important;height:none !important;}
.sti_prod a.link{position:absolute;width:32px;height:32px;background:transparent url(../img/sprite_icons.png) no-repeat;bottom:0;opacity:.8;outline:none;z-index:2;}
.sti_prod a.link.more{background:transparent url(../img/sprite_icons.png) no-repeat 0 0;}
.sti_prod a.link.zoom{background:transparent url(../img/sprite_icons.png) no-repeat -32px 0;}
.sti_prod a.link.video{background:transparent url(../img/sprite_icons.png) no-repeat -64px 0;}
.sti_prod a.link.audio{background:transparent url(../img/sprite_icons.png) no-repeat -96px 0;}
.sti_prod a.link.content{background:transparent url(../img/sprite_icons.png) no-repeat -128px 0;}
.sti_shelf_divider{height:30px;clear:both;background:url(../img/shelf_divider.png) repeat-x;}
.sti_shelf_divider_bottom{width:100%;height:5px;clear:both;background:url(../img/shelf_divider_bottom.png) repeat-x;}
.sti_prod .fx_shadow{width:11px;height:150px;right:-11px;bottom:0;position:absolute;z-index:0;}
.sti_prod .fx_leftside{width:11px;height:150px;left:0;bottom:0;position:absolute;}
/* .sti_prod .ribbon{display:none;}
*/
.sti_prod .ribbon_green{background:url(../img/ribbon_green.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_blue{background:url(../img/ribbon_blue.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_orange{background:url(../img/ribbon_orange.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_red{background:url(../img/ribbon_red.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_black{background:url(../img/ribbon_black.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_gray{background:url(../img/ribbon_gray.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_violet{background:url(../img/ribbon_violet.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_thumb_gallery{margin:12px;margin-top:16px;}
.sti_thumb_gallery img{border:#ddd solid 1px !important;padding:3px !important;box-shadow:0px 0px 3px rgba(0,0,0,.1) !important;}
/* ----------------------------------------------------sti prev/next / paginate---------------------------------------------------- */
.sti_previous{top:44%;left:0;height:40px;width:40px;position:absolute;background:#000 url(../img/nav_next_prev.png) left top no-repeat;opacity:.8;border:#555 solid 1px;box-shadow:3px 3px 5px rgba(0,0,0,.5);cursor:pointer;z-index:2;}
.sti_next{top:44%;right:0;height:40px;width:40px;position:absolute;background:#000 url(../img/nav_next_prev.png) right top no-repeat;opacity:.8;border:#555 solid 1px;box-shadow:-3px 3px 5px rgba(0,0,0,.5);cursor:pointer;z-index:2;}
.sti_paginate{position:relative;display:inline-block;zoom:1;*display:inline;margin-top:20px;min-width:50px;background-color:#fff;text-align:center;overflow:hidden;}
.sti_paginate .sti_page{float:left;}
.sti_paginate .sti_control{float:left;border-left:#eaeaea solid 1px;margin-left:10px;padding-left:8px;}
.sti_paginate .sti_control img{border:none !important;padding:0;}
.sti_paginate .sti_play{padding:0 !important;line-height:0 !important;float:left;margin-left:6px;margin-right:0 !important;}
.sti_paginate .sti_pause{padding:0 !important;line-height:0 !important;float:left;margin-left:6px;margin-right:0 !important;}
.sti_paginate .sti_btn{display:inline-block;zoom:1;*display:inline;padding:4px 11px 4px;margin-right:5px;margin-bottom:5px;font-size:12px;font-family:Arial,Helvetica,sans-serif;line-height:22px;color:#777;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:whiteSmoke;background-image:-ms-linear-gradient(top,white,#E6E6E6);background-image:-webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6));background-image:-webkit-linear-gradient(top,white,#E6E6E6);background-image:-o-linear-gradient(top,white,#E6E6E6);background-image:linear-gradient(top,white,#E6E6E6);background-image:-moz-linear-gradient(top,white,#E6E6E6);background-repeat:repeat-x;border:1px solid #CCC;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-color:#E6E6E6 #E6E6E6 #BFBFBF;border-bottom-color:#B3B3B3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);filter:progid:dximagetransform.microsoft.gradient(enabled=false);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);outline:none;}
.sti_paginate .active{color:#222;background-color:#dddddd;background-image:none;background-image:-ms-linear-gradient(top,#dddddd,#c5c5c5);background-image:-webkit-gradient(linear,0 0,0 100%,from(#dddddd),to(#c5c5c5));background-image:-webkit-linear-gradient(top,#dddddd,#c5c5c5);background-image:-o-linear-gradient(top,#dddddd,#c5c5c5);background-image:linear-gradient(top,#dddddd,#c5c5c5);background-image:-moz-linear-gradient(top,#dddddd,#c5c5c5);border:1px solid #999;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-color:#D6D6D6 #D6D6D6 #BEBEBE;border-bottom-color:#888;}
.sti_paginate .bullets_page{background:url(../img/page_bullets_sprite.png) no-repeat;width:18px;height:18px;margin:6px 6px 0 0;float:left;border:none;outline:none;}
.sti_paginate .bullets_page_active{background:url(../img/page_bullets_sprite.png) no-repeat -18px 0;width:18px;height:18px;margin:6px 6px 0 0;float:left;border:none;outline:none;}
.sti_paginate .thumbnails_page{margin:0 3px 0 0;float:left;border:#fff solid 1px;outline:none;width:60px;height:40px;padding:0px;background:#fff;}
.sti_paginate .thumbnails_page img{border:none !important;}
.sti_paginate .thumbnails_page_active{margin:0 3px 0 0;float:left;border:#555 solid 1px;outline:none;width:60px;height:40px;padding:0px;background:#fff;opacity:.3}
.sti_paginate .thumbnails_page_active img{border:none !important;}
/* ----------------------------------------------------sti menu---------------------------------------------------- */
.sti_menu{position:relative;display:inline-block;zoom:1;*display:inline;margin:0 auto 15px auto;background-color:#fff;font-weight:300;/*background:url(../img/texture_01.jpg);background-position:0 50px;*/
}
.sti_menu .sti_btn{display:inline-block;zoom:1;*display:inline;padding:0px 8px 0px 2px;margin-bottom:0;font-size:12px;font-family:Arial,Helvetica,sans-serif;line-height:14px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;border-right:#ddd solid 1px;outline:none;}
.sti_menu .sti_btn:last-child{border:none;/* padding-right:0;*/
}
.sti_menu .active{color:#b9b9b9;}
/* ----------------------------------------------------sti cursor---------------------------------------------------- */
.grab_cursor{cursor:move;}
.grab_cursor{cursor:url(../img/cursor/mozgrab.png) 8 8,move;}
.grabbing_cursor{cursor:url(../img/cursor/mozgrabbing.png) 8 8,move;}
/* ----------------------------------------------------sti tooltip---------------------------------------------------- */
.sti_tooltip{background:#000;color:#fff;padding:5px 10px;position:absolute;z-index:1001;top:0;max-width:150px;font-size:11px;font-family:Arial,Helvetica,sans-serif;text-align:center;box-shadow:0 0 14px rgba(0,0,0,.5);border:#444 solid 1px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
/* ----------------------------------------------------sti lightbox---------------------------------------------------- */
#mask_lightbox{position:absolute;left:0;top:0;z-index:1001;background-color:#000;display:none;}
#popup_lightbox{position:fixed;left:0;top:0;width:48px;height:48px;display:block;z-index:9999;background:#000;padding:0px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;text-align:left;box-shadow:0 0 30px rgba(0,0,0,.8);}
#preload_lightbox{background:#fff url(../img/preload_16.gif) center no-repeat;width:16px;height:16px;padding:5px;position:absolute;z-index:1001;left:10px;top:10px;border:#ddd solid 1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.3);}
#sti_bar_lightbox{position:absolute;color:#888;font-family:Arial,Helvetica,sans-serif;font-size:12px;bottom:0px;text-align:left;height:30px;background-color:#000;padding:0;text-indent:10px;line-height:32px;border-top:#222 solid 1px;display:none;box-shadow:0 10px 20px rgba(0,0,0,.8);}
#close_btn_lightbox{width:30px;height:30px;top:0px;right:0;position:absolute;float:right;cursor:pointer;background:transparent url(../img/btn_close.png) no-repeat;}
#html_content_lightbox{background:#fff;}
#html_content_lightbox html,body{height:100%;}
#sti_previous_lightbox{top:0;left:-40px;height:100%;width:40px;position:absolute;background:#000 url(../img/nav_next_prev.png) left center no-repeat;opacity:.7;box-shadow:-3px 3px 10px rgba(0,0,0,.8);cursor:pointer;z-index:1002;}
#sti_next_lightbox{top:0;right:-40px;height:100%;width:40px;position:absolute;background:#000 url(../img/nav_next_prev.png) right center no-repeat;opacity:.7;box-shadow:3px 3px 10px rgba(0,0,0,.8);cursor:pointer;z-index:1002;}
/* ----------------------------------------------------sliders description---------------------------------------------------- */
.slider_description{margin:0px auto 40px auto;font-size:11px;color:#777;letter-spacing:1px;font-family:Helvetica,Arial,sans-serif;background:#f9f9f9;padding:5px;}
.slider_description strong{color:#222;font-size:12px;}
.marcador{background:#F00;width:10px;height:10px;position:absolute;z-index:100000;}

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