jQuery的NivoSlider

• Live Demo
• Download

A slider 具有多种独特之处 transition effects. 详细规格请访问官方 website http://nivo.dev7studios.com

 

JavaScript

我们应该包括jQuery framework and jquery.nivo.slider.pack.. Js中指向SRC属性 script tag to those .js files.

Initialization script 我们放置在文档的部分中

$(window).负载(函数(){
         $('#slider').nivoSlider();     
});

您还可以定义一些附加参数

        effect:'random'， //指定如下设置:' fold,fade,sliceDown'
        slices:15,
        animSpeed:500,
        pauseTime: 3000,
        startSlide:0， //设置起始幻灯片(0索引)
        directionNav:真的,/ / & Prev
        directionNavHide:true， //只在悬停时显示
        controlNav:真的,/ / 1、2、3...
        controlNavThumbs:false， //为控件导航使用缩略图
        controlNavThumbsFromRel:false， //使用大拇指的图像rel
        controlNavThumbsSearch:“.. jpg'， //将其替换为...
        controlNavThumbsReplace:“_thumb.jpg', //...这在拇指图像src
        keyboardNav:true， //使用左 & right arrows
        pauseOnHover:true， //悬停时停止动画
        manualAdvance:false， //强制手动转换
        captionOpacity: 0.8、//通用标题不透明度
        beforeChange:函数(){},
        afterChange:函数(){},
        slideshowEnd: function(){} //所有幻灯片显示后触发

 

HTML

下面你可以看到一般 HTML script representation. 要为图像添加标题，只需为图像添加title属性. To add an HTML 只需将title属性设置为包含标题的元素的ID(以散列前缀). Note that the HTML 包含标题的元素必须具有CSS类nivo-html-标题已应用，且必须在 slider div.

    
    
    
    



    This 是一个例子吗 HTML caption with a link.

 

CSS

/* Nivo滑块样式*/
.nivoSlider {
	位置:相对;
}
.nivoSlider img {
	位置:绝对的;
	top:0px;
	left:0px;
}
/*如果图像被包装在链接中*/
.nivoSlider a.nivo-imageLink {
	位置:绝对的;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/*滑动条中的切片*/
.nivo-slice {
	display:block;
	位置:绝对的;
	z-index:50;
	height:100%;
}
/*标题样式*/
.nivo-caption {
	位置:绝对的;
	left:0px;
	bottom:0px;
	背景:# 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;
}
/*方向导航样式(例如.g. Next & Prev) */
.nivo-directionNav {
	位置:绝对的;
	top:45%;
	z-index:99;
	光标:指针;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/*控制导航样式(例如.g. 1,2,3...) */
.nivo-controlNav {
	位置:相对;
	z-index:99;
	光标:指针;
}
.nivo-controlNav一.active {
	粗细:大胆的;
}