jquery百叶窗图片轮播切换特效轮播滚动切换特效代码

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

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

以下是 jquery百叶窗图片轮播切换特效轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery百叶窗图片轮播切换特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
jQuery(function($){
$(window).load(function() {
  $('#slider').nivoSlider({
    directionNav: true,
    captionOpacity: 0.4,
    controlNav: true,
    boxCols: 8,
    boxRows: 4,
    slices: 15,
    effect:'random',
    animSpeed: 500,
    pauseTime: 3000 });
  });
});
</script>
</head>
<body>
<br>
<center>
<div id="slider-wrap">
  <div id="slider" class="nivoSlider">
	  <a href="#" class="nivo-imageLink">
		<img src="images/adde8400gw1ebewarzynaj20ri09amzx.jpg" alt="" title="a" width="990" height="334">
	  </a>
	  <a href="#" class="nivo-imageLink">
		<img src="images/adde8400gw1ebewapkgl1j20ri09aq75.jpg" alt="" width="990" title="b"  height="334" >
	  </a>
  </div>
</div>
</center>
</body>
</html>

JS代码(jquery.nivo.slider.pack.js):

/* * jQuery Nivo Slider v2.5.2 * http://nivo.dev7studios.com * * Copyright 2011,Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */
(function($){
	var NivoSlider = function(element,options){
	//Defaults are belowvar settings = $.extend({
}
,$.fn.nivoSlider.defaults,options);
	//Useful variables. Play carefully. var vars ={
	currentSlide:0,currentImage:'',totalSlides:0,randAnim:'',running:false,paused:false,stop:false}
;
	//Get this slider var slider = $(element);
	slider.data('nivo:vars',vars);
	slider.css('position','relative');
	slider.addClass('nivoSlider');
	//Find our slider children var kids = slider.children();
	kids.each(function(){
	var child = $(this);
	var link = '';
	if(!child.is('img')){
	if(child.is('a')){
	child.addClass('nivo-imageLink');
	link = child;
}
child = child.find('img:first');
}
//Get img width & height var childWidth = child.width();
	if(childWidth == 0) childWidth = child.attr('width');
	var childHeight = child.height();
	if(childHeight == 0) childHeight = child.attr('height');
	//Resize the slider if(childWidth > slider.width()){
	slider.width(childWidth);
}
if(childHeight > slider.height()){
	slider.height(childHeight);
}
if(link != ''){
	link.css('display','none');
}
child.css('display','none');
	vars.totalSlides++;
}
);
	//Set startSlide if(settings.startSlide > 0){
	if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
	vars.currentSlide = settings.startSlide;
}
//Get initial image if($(kids[vars.currentSlide]).is('img')){
	vars.currentImage = $(kids[vars.currentSlide]);
}
else{
	vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
//Show initial link if($(kids[vars.currentSlide]).is('a')){
	$(kids[vars.currentSlide]).css('display','block');
}
//Set first background slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
	//Create caption slider.append( $('<div class="nivo-caption"><p></p></div>').css({
	display:'none',opacity:settings.captionOpacity}
) );
	// Process caption functionvar processCaption = function(settings){
	var nivoCaption = $('.nivo-caption',slider);
	if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
	var title = vars.currentImage.attr('title');
	if(title.substr(0,1) == '#') title = $(title).html();
	if(nivoCaption.css('display') == 'block'){
	nivoCaption.find('p').fadeOut(settings.animSpeed,function(){
	$(this).html(title);
	$(this).fadeIn(settings.animSpeed);
}
);
}
else{
	nivoCaption.find('p').html(title);
}
nivoCaption.fadeIn(settings.animSpeed);
}
else{
	nivoCaption.fadeOut(settings.animSpeed);
}
}
//Process initial caption processCaption(settings);
	//In the words of Super Mario "let's a go!" var timer = 0;
	if(!settings.manualAdvance && kids.length > 1){
	timer = setInterval(function(){
	nivoRun(slider,kids,settings,false);
}
,settings.pauseTime);
}
//Add Direction nav if(settings.directionNav){
	slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>');
	//Hide Direction nav if(settings.directionNavHide){
	$('.nivo-directionNav',slider).hide();
	slider.hover(function(){
	$('.nivo-directionNav',slider).show();
}
,function(){
	$('.nivo-directionNav',slider).hide();
}
);
}
$('a.nivo-prevNav',slider).live('click',function(){
	if(vars.running) return false;
	clearInterval(timer);
	timer = '';
	vars.currentSlide -= 2;
	nivoRun(slider,kids,settings,'prev');
}
);
	$('a.nivo-nextNav',slider).live('click',function(){
	if(vars.running) return false;
	clearInterval(timer);
	timer = '';
	nivoRun(slider,kids,settings,'next');
}
);
}
//Add Control nav if(settings.controlNav){
	var nivoControl = $('<div class="nivo-controlNav"></div>');
	slider.append(nivoControl);
	for(var i = 0;
	i < kids.length;
	i++){
	if(settings.controlNavThumbs){
	var child = kids.eq(i);
	if(!child.is('img')){
	child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel){
	nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
}
else{
	nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch,settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
}
else{
	nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
//Set initial active link $('.nivo-controlNav a:eq('+ vars.currentSlide +')',slider).addClass('active');
	$('.nivo-controlNav a',slider).live('click',function(){
	if(vars.running) return false;
	if($(this).hasClass('active')) return false;
	clearInterval(timer);
	timer = '';
	slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
	vars.currentSlide = $(this).attr('rel') - 1;
	nivoRun(slider,kids,settings,'control');
}
);
}
//Keyboard Navigation if(settings.keyboardNav){
	$(window).keypress(function(event){
	//Left if(event.keyCode == '37'){
	if(vars.running) return false;
	clearInterval(timer);
	timer = '';
	vars.currentSlide-=2;
	nivoRun(slider,kids,settings,'prev');
}
//Right if(event.keyCode == '39'){
	if(vars.running) return false;
	clearInterval(timer);
	timer = '';
	nivoRun(slider,kids,settings,'next');
}
}
);
}
//For pauseOnHover setting if(settings.pauseOnHover){
	slider.hover(function(){
	vars.paused = true;
	clearInterval(timer);
	timer = '';
}
,function(){
	vars.paused = false;
	//Restart the timer if(timer == '' && !settings.manualAdvance){
	timer = setInterval(function(){
	nivoRun(slider,kids,settings,false);
}
,settings.pauseTime);
}
}
);
}
//Event when Animation finishes slider.bind('nivo:animFinished',function(){
	vars.running = false;
	//Hide child links $(kids).each(function(){
	if($(this).is('a')){
	$(this).css('display','none');
}
}
);
	//Show current link if($(kids[vars.currentSlide]).is('a')){
	$(kids[vars.currentSlide]).css('display','block');
}
//Restart the timer if(timer == '' && !vars.paused && !settings.manualAdvance){
	timer = setInterval(function(){
	nivoRun(slider,kids,settings,false);
}
,settings.pauseTime);
}
//Trigger the afterChange callback settings.afterChange.call(this);
}
);
	// Add slices for slice animations var createSlices = function(slider,settings,vars){
	for(var i = 0;
	i < settings.slices;
	i++){
	var sliceWidth = Math.round(slider.width()/settings.slices);
	if(i == settings.slices-1){
	slider.append($('<div class="nivo-slice"></div>').css({
	left:(sliceWidth*i)+'px',width:(slider.width()-(sliceWidth*i))+'px',height:'0px',opacity:'0',background:'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'}
));
}
else{
	slider.append($('<div class="nivo-slice"></div>').css({
	left:(sliceWidth*i)+'px',width:sliceWidth+'px',height:'0px',opacity:'0',background:'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'}
));
}
}
}
// Add boxes for box animationsvar createBoxes = function(slider,settings,vars){
	var boxWidth = Math.round(slider.width()/settings.boxCols);
	var boxHeight = Math.round(slider.height()/settings.boxRows);
	for(var rows = 0;
	rows < settings.boxRows;
	rows++){
	for(var cols = 0;
	cols < settings.boxCols;
	cols++){
	if(cols == settings.boxCols-1){
	slider.append($('<div class="nivo-box"></div>').css({
	opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:(slider.width()-(boxWidth*cols))+'px',height:boxHeight+'px',background:'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'}
));
}
else{
	slider.append($('<div class="nivo-box"></div>').css({
	opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:boxWidth+'px',height:boxHeight+'px',background:'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'}
));
}
}
}
}
// Private run methodvar nivoRun = function(slider,kids,settings,nudge){
	//Get our varsvar vars = slider.data('nivo:vars');
	//Trigger the lastSlide callback if(vars && (vars.currentSlide == vars.totalSlides - 1)){
	settings.lastSlide.call(this);
}
// Stopif((!vars || vars.stop) && !nudge) return false;
	//Trigger the beforeChange callbacksettings.beforeChange.call(this);
	//Set current background before changeif(!nudge){
	slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
else{
	if(nudge == 'prev'){
	slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
if(nudge == 'next'){
	slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
}
vars.currentSlide++;
	//Trigger the slideshowEnd callbackif(vars.currentSlide == vars.totalSlides){
	vars.currentSlide = 0;
	settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
	//Set vars.currentImageif($(kids[vars.currentSlide]).is('img')){
	vars.currentImage = $(kids[vars.currentSlide]);
}
else{
	vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
//Set active linksif(settings.controlNav){
	$('.nivo-controlNav a',slider).removeClass('active');
	$('.nivo-controlNav a:eq('+ vars.currentSlide +')',slider).addClass('active');
}
//Process captionprocessCaption(settings);
	// Remove any slices from last transition$('.nivo-slice',slider).remove();
	// Remove any boxes from last transition$('.nivo-box',slider).remove();
	if(settings.effect == 'random'){
	var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
	vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
	if(vars.randAnim == undefined) vars.randAnim = 'fade';
}
//Run random effect from specified set (eg:effect:'fold,fade') if(settings.effect.indexOf(',') != -1){
	var anims = settings.effect.split(',');
	vars.randAnim = anims[Math.floor(Math.random()*(anims.length))];
	if(vars.randAnim == undefined) vars.randAnim = 'fade';
}
//Run effectsvars.running = true;
	if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){
	createSlices(slider,settings,vars);
	var timeBuff = 0;
	var i = 0;
	var slices = $('.nivo-slice',slider);
	if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.nivo-slice',slider)._reverse();
	slices.each(function(){
	var slice = $(this);
	slice.css({
	'top':'0px'}
);
	if(i == settings.slices-1){
	setTimeout(function(){
	slice.animate({
	height:'100%',opacity:'1.0'}
,settings.animSpeed,'',function(){
	slider.trigger('nivo:animFinished');
}
);
}
,(100 + timeBuff));
}
else{
	setTimeout(function(){
	slice.animate({
	height:'100%',opacity:'1.0'}
,settings.animSpeed);
}
,(100 + timeBuff));
}
timeBuff += 50;
	i++;
}
);
}
else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' ||settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){
	createSlices(slider,settings,vars);
	var timeBuff = 0;
	var i = 0;
	var slices = $('.nivo-slice',slider);
	if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.nivo-slice',slider)._reverse();
	slices.each(function(){
	var slice = $(this);
	slice.css({
	'bottom':'0px'}
);
	if(i == settings.slices-1){
	setTimeout(function(){
	slice.animate({
	height:'100%',opacity:'1.0'}
,settings.animSpeed,'',function(){
	slider.trigger('nivo:animFinished');
}
);
}
,(100 + timeBuff));
}
else{
	setTimeout(function(){
	slice.animate({
	height:'100%',opacity:'1.0'}
,settings.animSpeed);
}
,(100 + timeBuff));
}
timeBuff += 50;
	i++;
}
);
}
else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' ||settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){
	createSlices(slider,settings,vars);
	var timeBuff = 0;
	var i = 0;
	var v = 0;
	var slices = $('.nivo-slice',slider);
	if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.nivo-slice',slider)._reverse();
	slices.each(function(){
	var slice = $(this);
	if(i == 0){
	slice.css('top','0px');
	i++;
}
else{
	slice.css('bottom','0px');
	i = 0;
}
if(v == settings.slices-1){
	setTimeout(function(){
	slice.animate({
	height:'100%',opacity:'1.0'}
,settings.animSpeed,'',function(){
	slider.trigger('nivo:animFinished');
}
);
}
,(100 + timeBuff));
}
else{
	setTimeout(function(){
	slice.animate({
	height:'100%',opacity:'1.0'}
,settings.animSpeed);
}
,(100 + timeBuff));
}
timeBuff += 50;
	v++;
}
);
}
else if(settings.effect == 'fold' || vars.randAnim == 'fold'){
	createSlices(slider,settings,vars);
	var timeBuff = 0;
	var i = 0;
	$('.nivo-slice',slider).each(function(){
	var slice = $(this);
	var origWidth = slice.width();
	slice.css({
	top:'0px',height:'100%',width:'0px'}
);
	if(i == settings.slices-1){
	setTimeout(function(){
	slice.animate({
	width:origWidth,opacity:'1.0'}
,settings.animSpeed,'',function(){
	slider.trigger('nivo:animFinished');
}
);
}
,(100 + timeBuff));
}
else{
	setTimeout(function(){
	slice.animate({
	width:origWidth,opacity:'1.0'}
,settings.animSpeed);
}
,(100 + timeBuff));
}
timeBuff += 50;
	i++;
}
);
}
else if(settings.effect == 'fade' || vars.randAnim == 'fade'){
	createSlices(slider,settings,vars);
	var firstSlice = $('.nivo-slice:first',slider);
	firstSlice.css({
	'height':'100%','width':slider.width() + 'px'}
);
	firstSlice.animate({
	opacity:'1.0'}
,(settings.animSpeed*2),'',function(){
	slider.trigger('nivo:animFinished');
}
);
}
else if(settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight'){
	createSlices(slider,settings,vars);
	var firstSlice = $('.nivo-slice:first',slider);
	firstSlice.css({
	'height':'100%','width':'0px','opacity':'1'}
);
	firstSlice.animate({
	width:slider.width() + 'px'}
,(settings.animSpeed*2),'',function(){
	slider.trigger('nivo:animFinished');
}
);
}
else if(settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft'){
	createSlices(slider,settings,vars);
	var firstSlice = $('.nivo-slice:first',slider);
	firstSlice.css({
	'height':'100%','width':'0px','opacity':'1','left':'','right':'0px'}
);
	firstSlice.animate({
	width:slider.width() + 'px'}
,(settings.animSpeed*2),'',function(){
	// Reset positioning firstSlice.css({
	'left':'0px','right':''}
);
	slider.trigger('nivo:animFinished');
}
);
}
else if(settings.effect == 'boxRandom' || vars.randAnim == 'boxRandom'){
	createBoxes(slider,settings,vars);
	var totalBoxes = settings.boxCols * settings.boxRows;
	var i = 0;
	var timeBuff = 0;
	var boxes = shuffle($('.nivo-box',slider));
	boxes.each(function(){
	var box = $(this);
	if(i == totalBoxes-1){
	setTimeout(function(){
	box.animate({
	opacity:'1'}
,settings.animSpeed,'',function(){
	slider.trigger('nivo:animFinished');
}
);
}
,(100 + timeBuff));
}
else{
	setTimeout(function(){
	box.animate({
	opacity:'1'}
,settings.animSpeed);
}
,(100 + timeBuff));
}
timeBuff += 20;
	i++;
}
);
}
else if(settings.effect == 'boxRain' || vars.randAnim == 'boxRain' || settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
	createBoxes(slider,settings,vars);
	var totalBoxes = settings.boxCols * settings.boxRows;
	var i = 0;
	var timeBuff = 0;
	// Split boxes into 2D arrayvar rowIndex = 0;
	var colIndex = 0;
	var box2Darr = new Array();
	box2Darr[rowIndex] = new Array();
	var boxes = $('.nivo-box',slider);
	if(settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
	boxes = $('.nivo-box',slider)._reverse();
}
boxes.each(function(){
	box2Darr[rowIndex][colIndex] = $(this);
	colIndex++;
	if(colIndex == settings.boxCols){
	rowIndex++;
	colIndex = 0;
	box2Darr[rowIndex] = new Array();
}
}
);
	// Run animationfor(var cols = 0;
	cols < (settings.boxCols * 2);
	cols++){
	var prevCol = cols;
	for(var rows = 0;
	rows < settings.boxRows;
	rows++){
	if(prevCol >= 0 && prevCol < settings.boxCols){
	/* Due to some weird JS bug with loop varsbeing used in setTimeout,this is wrappedwith an anonymous function call */
(function(row,col,time,i,totalBoxes){
	var box = $(box2Darr[row][col]);
	var w = box.width();
	var h = box.height();
	if(settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
	box.width(0).height(0);
}
if(i == totalBoxes-1){
	setTimeout(function(){
	box.animate({
	opacity:'1',width:w,height:h}
,settings.animSpeed/1.3,'',function(){
	slider.trigger('nivo:animFinished');
}
);
}
,(100 + time));
}
else{
	setTimeout(function(){
	box.animate({
	opacity:'1',width:w,height:h}
,settings.animSpeed/1.3);
}
,(100 + time));
}
}
)(rows,prevCol,timeBuff,i,totalBoxes);
	i++;
}
prevCol--;
}
timeBuff += 100;
}
}
}
// Shuffle an arrayvar shuffle = function(arr){
	for(var j,x,i = arr.length;
	i;
	j = parseInt(Math.random() * i),x = arr[--i],arr[i] = arr[j],arr[j] = x);
	return arr;
}
// For debugging var trace = function(msg){
	if (this.console && typeof console.log != "undefined") console.log(msg);
}
// Start / Stop this.stop = function(){
	if(!$(element).data('nivo:vars').stop){
	$(element).data('nivo:vars').stop = true;
	trace('Stop Slider');
}
}
this.start = function(){
	if($(element).data('nivo:vars').stop){
	$(element).data('nivo:vars').stop = false;
	trace('Start Slider');
}
}
//Trigger the afterLoad callback settings.afterLoad.call(this);
	return this;
}
;
	$.fn.nivoSlider = function(options){
	return this.each(function(key,value){
	var element = $(this);
	// Return early if this element already has a plugin instance if (element.data('nivoslider')) return element.data('nivoslider');
	// Pass options to plugin constructor var nivoslider = new NivoSlider(this,options);
	// Store plugin object in this element's data element.data('nivoslider',nivoslider);
}
);
}
;
	//Default settings$.fn.nivoSlider.defaults ={
	effect:'random',slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:'.jpg',controlNavThumbsReplace:'_thumb.jpg',keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,prevText:'Prev',nextText:'Next',beforeChange:function(){
}
,afterChange:function(){
}
,slideshowEnd:function(){
}
,lastSlide:function(){
}
,afterLoad:function(){
}
}
;
	$.fn._reverse = [].reverse;
}
)(jQuery);

CSS代码(style.css):

/*Theme Name:Quik GalleryTheme URI:http://wpexplorer.comDescription:Gallery/Blog style theme by <a href="http://www.wpexplorer.com/">WPExplorer</a>Author:AJ ClarkeAuthor URI:http://www.wpexplorer.comVersion:1.0*/
/* ---------------------- Reset Browser A Bit & Clear Floats -------------------------- */
*{margin:0;padding:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
a img,a{outline:0;border:0}
/* ---------------------- Body -------------------------- */
body{font-family:Helvetica,Tahoma,Arial,sans-serif;font-size:14px;line-height:24px;background:#fff}
/* ---------------------- HTML Elements -------------------------- */
a{text-decoration:none;border:0;}
a:hover{text-decoration:none;}
/* ---------------------- 百叶窗banner -------------------------- */
#slider-wrap{width:990px;height:334px;}
/*可以修改宽高*/
#slider{position:relative;width:990px;height:334px;background:#FFF;}
/*可以修改宽高*/
#slider img{position:absolute;top:0;left:0;display:none;width:990px;height:334px;}
/*可以修改宽高*/
.nivoSlider{position:relative;overflow:hidden;}
.nivoSlider img{position:absolute;top:0px;left:0px}
.nivoSlider a.nivo-imageLink{position:absolute;top:0px;display:block;left:0px;width:990px;height:334px;border:0;padding:0;margin:0;z-index:6;}
/*可以修改宽高*/
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;}
.nivo-box{display:block;position:absolute;z-index:5;}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;width:990px;z-index:50;height:40px;}
/*可以修改宽高*/
.nivo-caption p{width:990px;height:40px;text-indent:-9999px}
/*可以修改宽高*/
.nivo-controlNav{position:absolute;left:50%;bottom:10px;z-index:100;}
/*可以修改左右上下间距*/
.nivo-controlNav a{position:relative;z-index:99;cursor:pointer;background:#074d91}
.nivo-controlNav a.active{background:#ff6400;font-weight:bold}
.nivo-controlNav a{display:block;color:#fff;width:30px;height:20px;line-height:20px;text-align:center;margin-right:3px;float:left;overflow:hidden;}
/*可以修改宽高*/
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer;}
/*左右切换按钮，不能删除，如果不需要可以设背景，删除会引起图片错位*/
.nivo-directionNav a{display:block;width:30px;height:30px;text-indent:-9999px;border:0;}
a.nivo-nextNav{right:15px;}
a.nivo-prevNav{left:15px;}

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