经验分享程序开发文档资料数据资源其它资源

jquery图文焦点广告轮播代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图文焦点广告轮播代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

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" />
<title>jquery图文焦点广告轮播代码</TITLE>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/nivo-slider.css" media="screen">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
//Slider
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
	effect: 'fold',
	slices:15,
	animSpeed:500, //Slide transition speed
	pauseTime:5000,
	controlNav: false,
	directionNavHide: false,
	prevText: 'prev',
	nextText: 'next',
	startSlide:0, //Set starting Slide (0 index)
	directionNav:true, //Next &amp; Prev
	afterLoad: function(){
		jQuery(".nivo-caption").animate({top:"60"}, {easing:"easeOutBack", duration: 500})
		},
		beforeChange: function(){
		jQuery(".nivo-caption").animate({top:"-300"}, {easing:"easeInBack", duration: 500})
		},
		afterChange: function(){
		jQuery(".nivo-caption").animate({top:"60"}, {easing:"easeOutBack", duration: 500})
		}
	});
	
});

</script>

</head>

<body>

<div id="slider-container">

	<div id="slider" class="nivoSlider">
		<img title="#htmlcaption1" alt="" src="images/slider1.jpg">
		<img title="#htmlcaption2" alt="" src="images/slider2.jpg">
		<img title="#htmlcaption3" alt="" src="images/slider3.jpg">
		<img title="#htmlcaption4" alt="" src="images/slider4.jpg">
	</div><!-- #slider -->
	
	<div id="htmlcaption1" class="nivo-html-caption">
		<span class="sdate">December 01, 2011</span>
		<h1>Let´s create your company growth faster...</h1>
		<hr>
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
	</div>
	
	<div id="htmlcaption2" class="nivo-html-caption">
		<span class="sdate">December 05, 2011</span>
		<h1>We can help to solve your company problem...</h1>
		<hr>
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
	</div>
	
	<div id="htmlcaption3" class="nivo-html-caption">
		<span class="sdate">December 07, 2011</span>
		<h1>We always smile to help you...</h1>
		<hr>
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
	</div>
	
	<div id="htmlcaption4" class="nivo-html-caption">
		<span class="sdate">December 07, 2011</span>
		<h1>Discover the places you´ve never been before...</h1>
		<hr>
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
	</div>
</div>
</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"><div class="nivo-caption-inner"></div></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.children('.nivo-caption-inner').fadeOut(settings.animSpeed,function(){
	$(this).html(title);
	$(this).fadeIn(settings.animSpeed);
}
);
}
else{
	nivoCaption.children('.nivo-caption-inner').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代码(nivo-slider.css):

@charset "utf-8";.nivoSlider{position:relative;}
.nivoSlider img{left:0px;top:0px;position:absolute;}
.nivoSlider a.nivo-imageLink{margin:0px;padding:0px;border:0px currentColor;left:0px;top:0px;width:100%;height:100%;display:none;position:absolute;z-index:6;}
.nivo-slice{height:100%;display:block;position:absolute;z-index:5;}
.nivo-box{display:block;position:absolute;z-index:5;}
.nivo-caption{background:rgb(0,0,0);padding:30px 20px 40px;left:85px;top:-300px;width:300px;color:rgb(119,119,119);position:absolute;z-index:8;opacity:0.7;}
.nivo-caption p{margin:0px;padding:0px;}
.nivo-caption a{display:inline !important;}
.nivo-html-caption{display:none;}
.nivo-directionNav a{top:50%;position:absolute;z-index:9;cursor:pointer;}
.nivo-prevNav{background:url("prev.png") no-repeat;left:25px;}
.nivo-nextNav{background:url("next.png") no-repeat;right:25px;}
.nivo-controlNav a{position:relative;z-index:9;cursor:pointer;}
.nivo-controlNav a.active{font-weight:bold;}

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
#slider-container{margin:0px;width:938px;height:408px;overflow:hidden;clear:both !important;position:relative;margin:40px auto 0 auto;}
.nivoSlider{background:url("../images/loading.gif") no-repeat 50% 50% rgb(255,255,255);margin-bottom:10px;position:relative;}
.nivoSlider img{left:0px;top:0px;display:none;position:absolute;}
.nivoSlider a{border:0px currentColor;display:block;}
.nivo-directionNav a{border:0px currentColor;width:22px;height:24px;text-indent:-9999px;display:block;}
#slider{margin:0px auto;width:938px;height:408px;overflow:hidden;position:relative;z-index:9;}
#slider h1{color:rgb(255,255,255);font-size:24px;}
#slider .sdate{padding-bottom:10px;display:block;}
#slider hr{margin:0px 0px 20px;padding:0px;border-bottom-color:rgb(137,137,137);border-bottom-width:1px;border-bottom-style:solid;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
197.09 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
197.09 KB
立即下载
廖桂玲霭
了解
打赏作者 鼓励作者
Html Js 焦点广告
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章