js slider

	<!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>Nivoslider多种焦点图切换效果</title>
	<meta name="keywords" content="焦点图,Nivoslider" />
	<meta name="description" content="Nivoslider是一款能实现多种切换效果的图片切换插件，能和flash焦点图切换相媲美。Nivoslider为我们提供了十几种切换效果，支持多种参数配置和方法函数调用，而且非常简洁方便。" />
	<link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
	<link rel="stylesheet" type="text/css" href="nivo-slider.css" />
	<style type="text/css">
	#slider{width:680px; height:272px; margin:40px auto;background:url(images/loading.gif) no-repeat 50% 50%;}
	#slider img {position:absolute;top:0px;left:0px;display:none;}
	.nivo-controlNav{position:absolute;left:300px;bottom:-42px;}
	.nivo-controlNav a {display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}
	.nivo-controlNav a.active {background-position:0 -22px;}
	.nivo-directionNav a {display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;}
	a.nivo-nextNav {background-position:-30px 0;right:15px;}
	a.nivo-prevNav {left:15px;}
	.nivo-caption {text-shadow:none; font-family: Helvetica, Arial, sans-serif;}
	.nivo-caption a {color:#efe9d1;text-decoration:underline;}
	</style>
	</head>
	<body>
	<div class="head">
	<div class="head_inner clearfix">
	<ul id="nav">
	<li><a href="http://www.sucaihuo.com">首页</a></li>
	<li><a href="http://www.sucaihuo.com/templates">网站模板</a></li>
	<li><a href="http://www.sucaihuo.com/js">网页特效</a></li>
	</ul>
	<a class="logo" href="http://www.sucaihuo.com"><img src="http://www.sucaihuo.com/Public/images/logo.jpg" alt="素材火logo" /></a>
	</div>
	</div>
	<div class="container">
	<div class="demo">
	<h2 class="title"><a href="http://www.sucaihuo.com/js/81.html">Nivoslider多种焦点图切换效果教程</a></h2>
	<div id="slider" class="nivoSlider">
	<img src="images/s1.jpg" alt="" title="非常可爱的狗狗..." />
	<a href="http://www.sucaihuo.com"><img src="images/s2.jpg" alt="素材火" title="素材火" /></a>
	<img src="images/s3.jpg" alt="" title="#htmlcaption" />
	</div>
	<div id="htmlcaption" class="nivo-html-caption">
	<strong>图片标题</strong>，支持HTML标签 <a href="http://www.sucaihuo.com">sucaihuo.com</a>.
	</div>
	</div>
	</div>
	<div class="foot">
	Powered by sucaihuo.com 本站皆为作者原创，转载请注明原文链接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
	</div>
	<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
	<script type="text/javascript">
	$(function() {
	$('#slider').nivoSlider();
	});
	</script>
	</body>
	</html>

jquery.nivo.slider.pack.js

(function(a){var A=function(s,v){var f=a.extend({},a.fn.nivoSlider.defaults,v),g={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false},e=a(s);e.data("nivo:vars",g);e.css("position","relative");e.addClass("nivoSlider");var j=e.children();j.each(function(){var b=a(this),h="";if(!b.is("img")){if(b.is("a")){b.addClass("nivo-imageLink");h=b}b=b.find("img:first")}var c=b.width();if(c==0)c=b.attr("width");var o=b.height();if(o==0)o=b.attr("height");c>e.width()&&

e.width(c);o>e.height()&&e.height(o);h!=""&&h.css("display","none");b.css("display","none");g.totalSlides++});if(f.startSlide>0){if(f.startSlide>=g.totalSlides)f.startSlide=g.totalSlides-1;g.currentSlide=f.startSlide}g.currentImage=a(j[g.currentSlide]).is("img")?a(j[g.currentSlide]):a(j[g.currentSlide]).find("img:first");a(j[g.currentSlide]).is("a")&&a(j[g.currentSlide]).css("display","block");e.css("background",'url("'+g.currentImage.attr("src")+'") no-repeat');for(var k=0;k<f.slices;k++){var p=

Math.round(e.width()/f.slices);k==f.slices-1?e.append(a('<div class="nivo-slice"></div>').css({left:p*k+"px",width:e.width()-p*k+"px"})):e.append(a('<div class="nivo-slice"></div>').css({left:p*k+"px",width:p+"px"}))}e.append(a('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:f.captionOpacity}));if(g.currentImage.attr("title")!=""){k=g.currentImage.attr("title");if(k.substr(0,1)=="#")k=a(k).html();a(".nivo-caption p",e).html(k);a(".nivo-caption",e).fadeIn(f.animSpeed)}var l=

0;if(!f.manualAdvance&&j.length>1)l=setInterval(function(){r(e,j,f,false)},f.pauseTime);if(f.directionNav){e.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');if(f.directionNavHide){a(".nivo-directionNav",e).hide();e.hover(function(){a(".nivo-directionNav",e).show()},function(){a(".nivo-directionNav",e).hide()})}a("a.nivo-prevNav",e).live("click",function(){if(g.running)return false;clearInterval(l);l="";g.currentSlide-=2;r(e,j,f,"prev")});

a("a.nivo-nextNav",e).live("click",function(){if(g.running)return false;clearInterval(l);l="";r(e,j,f,"next")})}if(f.controlNav){p=a('<div class="nivo-controlNav"></div>');e.append(p);for(k=0;k<j.length;k++)if(f.controlNavThumbs){var t=j.eq(k);t.is("img")||(t=t.find("img:first"));f.controlNavThumbsFromRel?p.append('<a class="nivo-control" rel="'+k+'"><img src="'+t.attr("rel")+'" alt="" /></a>'):p.append('<a class="nivo-control" rel="'+k+'"><img src="'+t.attr("src").replace(f.controlNavThumbsSearch,

f.controlNavThumbsReplace)+'" alt="" /></a>')}else p.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>");a(".nivo-controlNav a:eq("+g.currentSlide+")",e).addClass("active");a(".nivo-controlNav a",e).live("click",function(){if(g.running)return false;if(a(this).hasClass("active"))return false;clearInterval(l);l="";e.css("background",'url("'+g.currentImage.attr("src")+'") no-repeat');g.currentSlide=a(this).attr("rel")-1;r(e,j,f,"control")})}f.keyboardNav&&a(window).keypress(function(b){if(b.keyCode==

"37"){if(g.running)return false;clearInterval(l);l="";g.currentSlide-=2;r(e,j,f,"prev")}if(b.keyCode=="39"){if(g.running)return false;clearInterval(l);l="";r(e,j,f,"next")}});f.pauseOnHover&&e.hover(function(){g.paused=true;clearInterval(l);l=""},function(){g.paused=false;if(l==""&&!f.manualAdvance)l=setInterval(function(){r(e,j,f,false)},f.pauseTime)});e.bind("nivo:animFinished",function(){g.running=false;a(j).each(function(){a(this).is("a")&&a(this).css("display","none")});a(j[g.currentSlide]).is("a")&&

a(j[g.currentSlide]).css("display","block");if(l==""&&!g.paused&&!f.manualAdvance)l=setInterval(function(){r(e,j,f,false)},f.pauseTime);f.afterChange.call(this)});var w=function(b,h){var c=0;a(".nivo-slice",b).each(function(){var o=a(this),d=Math.round(b.width()/h.slices);c==h.slices-1?o.css("width",b.width()-d*c+"px"):o.css("width",d+"px");c++})},r=function(b,h,c,o){var d=b.data("nivo:vars");d&&d.currentSlide==d.totalSlides-1&&c.lastSlide.call(this);if((!d||d.stop)&&!o)return false;c.beforeChange.call(this);

if(o){o=="prev"&&b.css("background",'url("'+d.currentImage.attr("src")+'") no-repeat');o=="next"&&b.css("background",'url("'+d.currentImage.attr("src")+'") no-repeat')}else b.css("background",'url("'+d.currentImage.attr("src")+'") no-repeat');d.currentSlide++;if(d.currentSlide==d.totalSlides){d.currentSlide=0;c.slideshowEnd.call(this)}if(d.currentSlide<0)d.currentSlide=d.totalSlides-1;d.currentImage=a(h[d.currentSlide]).is("img")?a(h[d.currentSlide]):a(h[d.currentSlide]).find("img:first");if(c.controlNav){a(".nivo-controlNav a",

b).removeClass("active");a(".nivo-controlNav a:eq("+d.currentSlide+")",b).addClass("active")}if(d.currentImage.attr("title")!=""){var u=d.currentImage.attr("title");if(u.substr(0,1)=="#")u=a(u).html();a(".nivo-caption",b).css("display")=="block"?a(".nivo-caption p",b).fadeOut(c.animSpeed,function(){a(this).html(u);a(this).fadeIn(c.animSpeed)}):a(".nivo-caption p",b).html(u);a(".nivo-caption",b).fadeIn(c.animSpeed)}else a(".nivo-caption",b).fadeOut(c.animSpeed);var m=0;a(".nivo-slice",b).each(function(){var i=

Math.round(b.width()/c.slices);a(this).css({height:"0px",opacity:"0",background:'url("'+d.currentImage.attr("src")+'") no-repeat -'+(i+m*i-i)+"px 0%"});m++});if(c.effect=="random"){h=["sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade","slideInRight","slideInLeft"];d.randAnim=h[Math.floor(Math.random()*(h.length+1))];if(d.randAnim==undefined)d.randAnim="fade"}if(c.effect.indexOf(",")!=-1){h=c.effect.split(",");d.randAnim=h[Math.floor(Math.random()*

h.length)];if(d.randAnim==undefined)d.randAnim="fade"}d.running=true;if(c.effect=="sliceDown"||c.effect=="sliceDownRight"||d.randAnim=="sliceDownRight"||c.effect=="sliceDownLeft"||d.randAnim=="sliceDownLeft"){var n=0;m=0;w(b,c);h=a(".nivo-slice",b);if(c.effect=="sliceDownLeft"||d.randAnim=="sliceDownLeft")h=a(".nivo-slice",b)._reverse();h.each(function(){var i=a(this);i.css({top:"0px"});m==c.slices-1?setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},c.animSpeed,"",function(){b.trigger("nivo:animFinished")})},

100+n):setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},c.animSpeed)},100+n);n+=50;m++})}else if(c.effect=="sliceUp"||c.effect=="sliceUpRight"||d.randAnim=="sliceUpRight"||c.effect=="sliceUpLeft"||d.randAnim=="sliceUpLeft"){m=n=0;w(b,c);h=a(".nivo-slice",b);if(c.effect=="sliceUpLeft"||d.randAnim=="sliceUpLeft")h=a(".nivo-slice",b)._reverse();h.each(function(){var i=a(this);i.css({bottom:"0px"});m==c.slices-1?setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},c.animSpeed,"",

function(){b.trigger("nivo:animFinished")})},100+n):setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},c.animSpeed)},100+n);n+=50;m++})}else if(c.effect=="sliceUpDown"||c.effect=="sliceUpDownRight"||d.randAnim=="sliceUpDown"||c.effect=="sliceUpDownLeft"||d.randAnim=="sliceUpDownLeft"){var x=m=n=0;w(b,c);h=a(".nivo-slice",b);if(c.effect=="sliceUpDownLeft"||d.randAnim=="sliceUpDownLeft")h=a(".nivo-slice",b)._reverse();h.each(function(){var i=a(this);if(m==0){i.css("top","0px");m++}else{i.css("bottom",

"0px");m=0}x==c.slices-1?setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},c.animSpeed,"",function(){b.trigger("nivo:animFinished")})},100+n):setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},c.animSpeed)},100+n);n+=50;x++})}else if(c.effect=="fold"||d.randAnim=="fold"){m=n=0;w(b,c);a(".nivo-slice",b).each(function(){var i=a(this),y=i.width();i.css({top:"0px",height:"100%",width:"0px"});m==c.slices-1?setTimeout(function(){i.animate({width:y,opacity:"1.0"},c.animSpeed,"",function(){b.trigger("nivo:animFinished")})},

100+n):setTimeout(function(){i.animate({width:y,opacity:"1.0"},c.animSpeed)},100+n);n+=50;m++})}else if(c.effect=="fade"||d.randAnim=="fade"){var q=a(".nivo-slice:first",b);q.css({height:"100%",width:b.width()+"px"});q.animate({opacity:"1.0"},c.animSpeed*2,"",function(){b.trigger("nivo:animFinished")})}else if(c.effect=="slideInRight"||d.randAnim=="slideInRight"){q=a(".nivo-slice:first",b);q.css({height:"100%",width:"0px",opacity:"1"});q.animate({width:b.width()+"px"},c.animSpeed*2,"",function(){b.trigger("nivo:animFinished")})}else if(c.effect==

"slideInLeft"||d.randAnim=="slideInLeft"){q=a(".nivo-slice:first",b);q.css({height:"100%",width:"0px",opacity:"1",left:"",right:"0px"});q.animate({width:b.width()+"px"},c.animSpeed*2,"",function(){q.css({left:"0px",right:""});b.trigger("nivo:animFinished")})}},z=function(b){this.console&&typeof console.log!="undefined"&&console.log(b)};this.stop=function(){if(!a(s).data("nivo:vars").stop){a(s).data("nivo:vars").stop=true;z("Stop Slider")}};this.start=function(){if(a(s).data("nivo:vars").stop){a(s).data("nivo:vars").stop=

false;z("Start Slider")}};f.afterLoad.call(this)};a.fn.nivoSlider=function(s){return this.each(function(){var v=a(this);if(!v.data("nivoslider")){var f=new A(this,s);v.data("nivoslider",f)}})};a.fn.nivoSlider.defaults={effect:"random",slices:15,animSpeed:500,pauseTime:3E3,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,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};a.fn._reverse=[].reverse})(jQuery);
css

/*

 * jQuery Nivo Slider v2.4

 * 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

 */

/* The Nivo Slider styles */

.nivoSlider {

	position:relative;

}

.nivoSlider img {

	position:absolute;

	top:0px;

	left:0px;

}

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {

	position:absolute;

	top:0px;

	left:0px;

	width:100%;

	height:100%;

	border:0;

	padding:0;

	margin:0;

	z-index:60;

	display:none;

}

/* The slices in the Slider */

.nivo-slice {

	display:block;

	position:absolute;

	z-index:50;

	height:100%;

}

/* Caption styles */

.nivo-caption {

	position:absolute;

	left:0px;

	bottom:0px;

	background:#000;

	color:#fff;

	opacity:0.8; /* Overridden by captionOpacity setting */

	width:100%;

	z-index:89;

}

.nivo-caption p {

	padding:5px;

	margin:0;

}

.nivo-caption a {

	display:inline !important;

}

.nivo-html-caption {

    display:none;

}

/* Direction nav styles (e.g. Next & Prev) */

.nivo-directionNav a {

	position:absolute;

	top:45%;

	z-index:99;

	cursor:pointer;

}

.nivo-prevNav {

	left:0px;

}

.nivo-nextNav {

	right:0px;

}

/* Control nav styles (e.g. 1,2,3...) */

.nivo-controlNav a {

	position:relative;

	z-index:99;

	cursor:pointer;

}

.nivo-controlNav a.active {

	font-weight:bold;

}

html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}

a{color:#007bc4; text-decoration:none;}

a:hover{text-decoration:underline}

ol,ul{list-style:none}

table{border-collapse:collapse;border-spacing:0}

html{background:url(../images/demo_bg.png)}

body{height:100%; font:12px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C;}

img{border:none}

.clearfix:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: " ";

    clear: both;

    height: 0;

}

.head {border-bottom: 1px solid #dadada;padding: 0 0 5px;}

.head_inner {margin: 0 auto;width: 980px;}

.container{width:980px; min-height:600px; margin:30px auto 0 auto; border:1px solid #d3d3d3; background:#fff; -moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; border-radius:5px;}

h2.title{margin:4px 0 30px;padding:15px 0 10px 20px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#a84c10; background:url(../images/arrow.jpg) no-repeat 2px 14px}

.foot{ height:60px;padding:10px 2px; line-height:24px; text-align:center}

.foot a:hover{color:#51555C}

.btn{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;

     background-color: #ff8400;color: #fff;display: inline-block;height: 28px;line-height: 28px;text-align: center;

     width: 72px;transition: background-color 0.2s linear 0s;border:none;cursor:pointer;}

.demo{width:700px;margin:0 auto}

.btn:hover{background-color: #e95a00;text-decoration: none}

ul.ul_demo li {

    background: url("../images/demo_icon.gif") no-repeat scroll 0 6px;

    line-height: 28px;

    padding-left: 20px;

}

.input{border:1px solid #ccc;padding:0 5px;width:220px; height: 26px;line-height: 26px;}

#nav {

    float: right;

    margin: 30px 0 0;

}

#nav li {

    float: left;

    font-size: 16px;

    margin-right: 20px;

}

js slider的更多相关文章

Magento中调用JS文件的几种方法
一.全局调用方法: 通过该方法每个页面都会引用这个JS文件,除非是类似jQuery这样的系统文件,不然不推荐这种方法. 文件路径:/app/design/frontend/default/Your_T ...
slider插件制作轮播图
html代码: <div id="banner_tabs" class="flexslider"> <ul class="slide ...
原生的js轮播图
图片会照常循环播放,当然也可以通过按钮来进行切换,当切出当前的页面时,等到你在回到当前页面时该轮播的图片还是停留在你之前所切出去的的那张图片的状态. HTML部分: <html> < ...
fullpage.js报如下错的解决办法
控制台报错:fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey ...
思达index网站
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
基于jquery的图片轮播（IE8以上）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Html5如何使我们开发出来的应用或页面大小能适合各种高端手机使用
本文简介:1.手机移动端页面的自适应2.手机触摸手动滑动效果一.header信息的设置(自适应) 1.声明信息 <!DOCTYPE HTML> 2.编码设置 <meta chars ...
一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器
基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...
html渐隐轮播
这是我之前用的时候从一个模板中下载下来用的,现在又用到了,我又重新找了一遍,为防止我下次用到忘记,特写下此文: 下载插件:jquery-2.1.4.min.js和slider.js 首页轮播页面首页i ...

随机推荐

VMWare 在物理机待机后，报错“该虚拟机似乎正在使用中”
在物理机待机后,刚打开虚拟机,就弹出这个画面(这种情况经常出现在远程之后,本机待机之后) 点击确定后,就弹出当点击取消,无反应,而且再次点击VM2又弹出以上窗口,点击获取所有权,则弹出以下窗口上网 ...
Eclipse中配置SVN（步骤简述）
————Eclipse中配置SVN(步骤简述)———— 1.有客户端(tortoiseSVN),服务器端(visualSVN) 两种,根据需要安装,安装后需重启电脑 2.服务器端配置:创建版本库(放工 ...
SQLite 的使用
private void button1_Click(object sender, EventArgs e) { //查询数据库内容并绑定 string sql= "select* from ...
element ui table（表格）点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
实现Modbus ASCII多主站应用
1.更新设计关于原来的协议栈在Modbus ASCII主站应用时所存在的局限性与Modbus RTU也是一样的,所以我们不分析它的不足,只讨论更新设计.我们将主站及其所访问的从站定义为通用的对象,而当 ...
Python—字符串+变量
字符串转义字符格式化内建函数(后延)转义字符用一个特殊的方法表示出一系列不方便写出的内容,比如回车键,换行键,退格键借助反斜杠字符,一旦字符串中出现反斜杠,则反斜杠后面一个火几个字符表示已经不是原来的 ...
BZOJ 1060: [ZJOI2007]时态同步树上问题 + 贪心
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路 ...
【剑指Offer】31、从1到n整数中1出现的次数
题目描述: 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他 ...
【剑指Offer】 24、二叉树中和为某一值的路径
题目描述: 输入一颗二叉树的根结点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中, ...
HLPP算法一种高效的网络最大流算法
#include <algorithm> #include <cstdio> #include <cctype> #include <queue> #d ...

js slider

js slider的更多相关文章

随机推荐

热门专题