一、前言
本实例以“音乐”酒吧为主题设计，响应式web，应用html+css+js，包括图片轮翻效果、视频、音频、留言板等，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！
2000+案例推荐，主题涵盖30+种类型：
二、网页文件
以下为网页正文（节选示例）：
三、网页效果
四、代码展示
1.HTML
代码如下（节选示例）：
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Modern Music Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<!--//fonts-->
<!---->
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<!-- Scroll top -->
<!--End Scroll top -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<!-- Slider -->
<div class="slider">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/2.jpg" data-thumb="images/2.jpg" alt="" />
<img src="images/1.jpg" data-thumb="images/1.jpg" alt="" />
<img src="images/3.jpg" data-thumb="images/3.jpg" alt="" />
<img src="images/1.jpg" data-thumb="images/1.jpg" alt="" />
</div>
</div>
<div class="header_desc">
<div class="logo">
<a href="index.html"><img src="images/log.png" alt="" /></a>
</div>
</div>
</div>
<!--- End Slider --->
<div class="header-bottom">
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""> </span>
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="404.html">专辑</a></li>
<li><a href="blog.html">博客</a></li>
<li><a href="contact.html">接触</a></li>
<div class="clearfix"></div>
</ul>
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle(500, function(){
});
});
</script>
</div>
<div class="social-icons">
<ul class="social">
<li><a ><i> </i> </a></li>
<li><a ><i class="rss"></i></a></li>
<li><a ><i class="twitter"></i></a></li>
<li><a ><i class="dribble"></i></a></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!---->
<div class="container">
<div class="content">
<div class="content-top-grid">
<h3>我的音乐</h3>
<div class="content-top-in">
<div class="col-md-4 grid">
<a href="images/a1.jpg" class="b-link-stripe b-animate-go thickbox swipebox"><img class="img-responsive" src="images/a1.jpg" alt=""/></a>
<div class="simply" >
<h4><a >练习 ullamcorper suscipit</a></h4>
<p>一种美妙的宁静占据了我的整个灵魂练习 ullamcorper suscipit</p>
<a class="hvr-sweep-to-right">更多信息</a>
</div>
</div>
<div class="col-md-4 grid">
<a href="images/a2.jpg" class="b-link-stripe b-animate-go thickbox swipebox"><img class="img-responsive" src="images/a2.jpg" alt=""/></a>
<div class="simply" >
<h4><a >练习 ullamcorper suscipitt</a></h4>
<p>一种美妙的宁静占据了我的整个灵魂练习 ullamcorper suscipit</p>
<a class="hvr-sweep-to-right">更多信息</a>
</div>
</div>
<div class="col-md-4 grid">
<a href="images/a3.jpg" class="b-link-stripe b-animate-go thickbox swipebox"><img class="img-responsive" src="images/a3.jpg" alt=""/></a>
<div class="simply" >
<h4><a >练习 ullamcorper suscipit</a></h4>
<p>一种美妙的宁静占据了我的整个灵魂练习 ullamcorper suscipit</p>
<a class="hvr-sweep-to-right">更多信息</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!---->
<link rel="stylesheet" href="css/swipebox.css" />
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<!---->
<div class="content-bottom">
<div class="col-md-8">
<div class="content-grid">
<h3>鱼被认为是不正确的。</h3>
<p>有些伴侣有不同的痛苦，所以我们害怕帮助他们。</p>
</div>
<div class="col-md-6 grid-top">
<a ><img src="images/pi1.jpg" alt="" class="img-responsive"></a>
<p >
与此同时，他害怕去睡觉，或者如果他是在一个干净的运行。但湖是一杯啤酒在厨房里，这不是一个沥青，但它是一个啤酒沥青。这是一个啤酒沥青，而不是啤酒沥青。这是一个啤酒沥青之间的厨房和厨房。现在，猫谁抓住了橙色的车轮没有冰淇淋。这是不容易的。他点的。
</p>
</div>
<div class="col-md-6 grid-middle">
<ul>
<li><a ><i> </i>瓮中的菜豆</a></li>
<li><a ><i> </i>欢迎来到</a></li>
<li><a ><i> </i>丑陋的补丁</a></li>
<li><a ><i> </i>但是篮球姿势</a></li>
<li><a ><i> </i>瓮中的菜豆</a></li>
<li><a><i> </i>欢迎来到</a></li>
<li><a ><i> </i>丑陋的补丁</a></li>
<li><a ><i> </i>但是篮球姿势</a></li>
<li><a ><i> </i>欢迎来到</a></li>
<li><a><i> </i>丑陋的补丁</a></li>
<li><a ><i> </i>但是篮球姿势</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 sap">
<!---->
<div class="cur-right">
<h3>需要修理</h3>
<div class="product">
<a class="fashion"><img class="img-responsive " src="images/pic.jpg" alt=""></a>
<div class="grid-product">
<p>菜豆巧克力</p>
<a class="more-info">更多信息 <i> </i></a>
</div>
<div class="clearfix"> </div>
</div>
<div class="product">
<a class="fashion"><img class="img-responsive " src="images/pic1.jpg" alt=""></a>
<div class="grid-product">
<p>菜豆巧克力</p>
<a class="more-info">更多信息 <i> </i></a>
</div>
<div class="clearfix"> </div>
</div>
<div class="product">
<a class="fashion"><img class="img-responsive" src="images/pic2.jpg" alt=""></a>
<div class="grid-product">
<p>菜豆巧克力</p>
<a class="more-info">更多信息 <i> </i></a>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="container">
<!---->
<div class="footer">
<div class="footer-top">
<div class="col-md-4 amet-sed ">
<h4>推特提要</h4>
<p><a >@ Music</a> Lorem ipsum 只是虚拟文本 hid Lorem ipsum 只是虚拟文本隐藏变量 3 小时前</p>
<p><a >@ Music</a> Lorem ipsum 只是虚拟文本 hid Lorem ipsum 只是虚拟文本隐藏变量 3 小时前</p>
<ul class="social-in">
<li><i> </i>第21区，主干道</li>
<li class="phone"><i> </i> +71999-56985</li>
<li class="mail"><a href="mailto:[email protected]"><i> </i> [email protected]</a></li>
</ul>
</div>
<div class="col-md-4 amet-in">
<h4>照片墙</h4>
<ul>
<li><a><img src="images/fi.jpg" alt="" class="img-responsive"></a></li>
<li><a><img src="images/fi2.jpg" alt="" class="img-responsive"></a></li>
<li><a ><img src="images/fi1.jpg" alt="" class="img-responsive"></a></li>
<li><a ><img src="images/fi3.jpg" alt="" class="img-responsive"></a></li>
<li><a ><img src="images/fi4.jpg" alt="" class="img-responsive"></a></li>
<li><a ><img src="images/fi5.jpg" alt="" class="img-responsive"></a></li>
<li><a ><img src="images/fi6.jpg" alt="" class="img-responsive"></a></li>
<li><a ><img src="images/fi3.jpg" alt="" class="img-responsive"></a></li>
</ul>
</div>
<div class="col-md-4 amet-sed ">
<h4>关注我们</h4>
<ul class="social">
<li><a><i> </i> </a></li>
<li><a ><i class="rss"></i></a></li>
<li><a ><i class="twitter"></i></a></li>
<li><a ><i class="dribble"></i></a></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="copy">
......
2.CSS
代码如下（节选示例）：
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: .67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
legend {
padding: 0;
border: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
@media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
select {
background: #fff !important;
}
.navbar {
display: none;
}
.table td,
.table th {
background-color: #fff !important;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
......
3.JS
代码如下（节选示例）：
(function($) {
var NivoSlider = function(element, options){
// Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
// Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
// Get this slider
var slider = $(element);
slider.data('nivo:vars', vars).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 = (childWidth === 0) ? child.attr('width') : child.width(),
childHeight = (childHeight === 0) ? child.attr('height') : child.height();
if(link !== ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
// If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * 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
var sliderImg = $('<img/>').addClass('nivo-main-image');
sliderImg.attr('src', vars.currentImage.attr('src')).show();
slider.append(sliderImg);
// Detect Window Resize
$(window).resize(function() {
slider.children('img').width(slider.width());
sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.stop().height('auto');
$('.nivo-slice').remove();
$('.nivo-box').remove();
});
//Create caption
slider.append($('<div class="nivo-caption"></div>'));
// Process caption function
var 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'){
setTimeout(function(){
nivoCaption.html(title);
}, settings.animSpeed);
} else {
nivoCaption.html(title);
nivoCaption.stop().fadeIn(settings.animSpeed);
}
} else {
nivoCaption.stop().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>');
$(slider).on('click', 'a.nivo-prevNav', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
});
$(slider).on('click', 'a.nivo-nextNav', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
// Add Control nav
if(settings.controlNav){
vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
slider.after(vars.controlNavEl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
vars.controlNavEl.addClass('nivo-thumbs-enabled');
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
} else {
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
//Set initial active link
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
$('a', vars.controlNavEl).bind('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
//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(){
sliderImg.attr('src', vars.currentImage.attr('src'));
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) {
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();
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" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
left:(sliceWidth*i)+'px',
width:(slider.width()-(sliceWidth*i))+'px',
height:sliceHeight+'px',
opacity:'0',
overflow:'hidden'
})
);
} else {
slider.append(
$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({
left:(sliceWidth*i)+'px',
width:sliceWidth+'px',
height:sliceHeight+'px',
opacity:'0',
overflow:'hidden'
})
);
}
}
$('.nivo-slice', slider).height(sliceHeight);
sliderImg.stop().animate({
height: $(vars.currentImage).height()
}, settings.animSpeed);
};
// Add boxes for box animations
var createBoxes = function(slider, settings, vars){
if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
$('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
var boxWidth = Math.round(slider.width()/settings.boxCols),
boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').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" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:(slider.width()-(boxWidth*cols))+'px'
})
);
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
} else {
slider.append(
$('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:boxWidth+'px'
})
);
$('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
}
}
}
sliderImg.stop().animate({
height: $(vars.currentImage).height()
}, settings.animSpeed);
};
// Private run method
var nivoRun = function(slider, kids, settings, nudge){
// Get our vars
var vars = slider.data('nivo:vars');
// Trigger the lastSlide callback
if(vars && (vars.currentSlide === vars.totalSlides - 1)){
settings.lastSlide.call(this);
}
// Stop
if((!vars || vars.stop) && !nudge) { return false; }
// Trigger the beforeChange callback
settings.beforeChange.call(this);
// Set current background before change
if(!nudge){
sliderImg.attr('src', vars.currentImage.attr('src'));
} else {
if(nudge === 'prev'){
sliderImg.attr('src', vars.currentImage.attr('src'));
}
if(nudge === 'next'){
sliderImg.attr('src', vars.currentImage.attr('src'));
}
}
vars.currentSlide++;
// Trigger the slideshowEnd callback
if(vars.currentSlide === vars.totalSlides){
vars.currentSlide = 0;
settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) { vars.currentSlide = (vars.totalSlides - 1); }
// Set vars.currentImage
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Set active links
if(settings.controlNav){
$('a', vars.controlNavEl).removeClass('active');
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
}
// Process caption
processCaption(settings);
// Remove any slices from last transition
$('.nivo-slice', slider).remove();
// Remove any boxes from last transition
$('.nivo-box', slider).remove();
var currentEffect = settings.effect,
anims = '';
// Generate random effect
if(settings.effect === 'random'){
anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
// Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') !== -1){
anims = settings.effect.split(',');
currentEffect = anims[Math.floor(Math.random()*(anims.length))];
if(currentEffect === undefined) { currentEffect = 'fade'; }
}
// Custom transition as defined by "data-transition" attribute
if(vars.currentImage.attr('data-transition')){
currentEffect = vars.currentImage.attr('data-transition');
}
// Run effects
vars.running = true;
var timeBuff = 0,
i = 0,
slices = '',
firstSlice = '',
totalBoxes = '',
boxes = '';
if(currentEffect === 'sliceDown' || currentEffect === 'sliceDownRight' || currentEffect === 'sliceDownLeft'){
createSlices(slider, settings, vars);
timeBuff = 0;
i = 0;
slices = $('.nivo-slice', slider);
if(currentEffect === '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({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
......
五、总结
1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
2. 所有页面相互超链接，可到二级或三级页面，有5-10个页面组成；
3. 页面样式风格统一布局显示正常，不错乱，使用HTML5+CSS3+JS技术；
4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
5. 要有JS特效，如定时切换和手动切换图片新闻；
6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
7. 页面清爽、美观、大方，不雷同；
8. 网站前端程序不仅要能够把用户要求的内容呈现，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
标签：web,attr,vars,settings,37,js,slider,currentImage,nivo From： https://blog.csdn.net/A240307/article/details/137042080