以下是 jQuery焦点图片轮播插件Juicy Slider代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta charset="utf-8">
<title>jQuery焦点图片轮播插件Juicy Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link href="css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/juicyslider.css" type="text/css" />
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
background-color: #ebebeb;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding-top: 60px;
}
.container .credit {
margin: 20px 0;
}
code {
font-size: 80%;
}
/* Some adjustments for Bootstrap */
.lead {
font-size: 18px;
}
.btn {
margin: 5px 2px;
}
</style>
</head>
<body>
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="row-fluid">
<div class="pagination-centered">
<div id="myslider0" class="juicyslider">
<ul>
<li><img src="data/0.jpg" alt=""></li>
<li><img src="data/2.jpg" alt=""></li>
<li><img src="data/4.jpg" alt=""></li>
</ul>
<div class="nav next"></div>
<div class="nav prev"></div>
<div class="mask"></div>
</div>
</div>
</div>
<hr>
<div class="row-fluid">
<div class="pagination-centered span4">
<div id="myslider1" class="juicyslider">
<ul>
<li><img src="data/2.jpg" alt=""></li>
<li><img src="data/3.jpg" alt=""></li>
<li><img src="data/4.jpg" alt=""></li>
</ul>
<div class="nav next"></div>
<div class="mask"></div>
</div>
</div>
<div class="pagination-centered span4">
<div id="myslider2" class="juicyslider">
<ul>
<li><img src="data/3.jpg" alt=""></li>
<li><img src="data/4.jpg" alt=""></li>
<li><img src="data/5.jpg" alt=""></li>
</ul>
<div class="nav next"></div>
<div class="nav prev"></div>
<div class="mask"></div>
</div>
</div>
<div class="pagination-centered span4">
<div id="myslider3" class="juicyslider">
<ul>
<li><img src="data/4.jpg" alt=""></li>
<li><img src="data/3.jpg" alt=""></li>
<li><img src="data/2.jpg" alt=""></li>
</ul>
<div class="nav prev"></div>
<div class="mask"></div>
</div>
</div>
</div>
<hr>
</div>
<br><br>
<div id="push"></div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/juicyslider.js"></script>
<!-- initialize Juicy Slider with a jQuery doc ready -->
<script type="text/javascript">
// start to run when document ready
$(function() {
$('#myslider0').juicyslider({
width: '100%',
height: 400,
mask : 'none',
autoplay: false,
shuffle: true,
});
$('#myslider1').juicyslider({
width: '100%',
height: 200,
});
$('#myslider2').juicyslider({
width: '100%',
height: 200,
mask: 'square',
show: {effect: 'drop', duration: 3000},
hide: {effect: 'drop', duration: 3000},
});
$('#myslider3').juicyslider({
width: '100%',
height: 200,
mask: 'strip',
show: {effect: 'puff', duration: 3000},
hide: {effect: 'puff', duration: 3000},
});
});
</script>
<!-- end of Juicy Slider -->
</body>
</html>
JS代码(juicyslider.js):
/* * Juicy Slider Core * * (c) 2013 by Van Ting * * Implment as jQuery plugin. * */
(function($){
$.fn.juicyslider = function(options){
var settings = $.extend({
// these are the defaults. mode:"cover",// "cover" or "contain" width:'100%',// set null to make the slider as wide/tall as the window,height:'100%',// otherwise set any other values in px or % unit mask:"raster",// "raster","square","strip" or "none" bgcolor:"#000",autoplay:4000,// 0 for no autoplay,any other postive number for play interval in (ms) shuffle:false,// set true to shuffle the picture order show:{
effect:'fade',duration:1500}
,// effect params refer to jQuery UI hide:{
effect:'fade',duration:1500}
,// try 'puff' or 'drop' for the effect arg}
,options),slides = this.find('li'),amount = slides.length,current = 0,turnSlide = function(event){
var step = 1;
if (event){
event.preventDefault();
step = event.data.step;
}
if (settings.shuffle) step = Math.floor(Math.random()*(amount - 1) + 1);
$(slides[current]).hide(settings.hide);
current = (((current + step) % amount) + amount) % amount;
// must make displayable before detecting the dimension $(slides[current]).css({
display:'block'}
);
resizeImg();
$(slides[current]).css({
display:'none'}
);
$(slides[current]).show(settings.show);
}
,theWindow = $(window),viewport = this;
// set bg color this.css('background-color',settings.bgcolor);
// set mask this.find('.mask').css('background-image',settings.mask == 'none' ? 'none':'url(./img/' + settings.mask + '.png)');
// set the next button this.find('.nav.next').click({
step:1}
,turnSlide);
this.find('.nav.prev').click({
step:-1}
,turnSlide);
// set autoplay interval if (settings.autoplay > 0) setInterval(turnSlide,settings.autoplay);
/* * handling bg images resize */
function resizeImg(){
// set width and height of the slider viewport.width(settings.width == null ? theWindow.width():settings.width);
viewport.height(settings.height == null ? theWindow.height():settings.height);
vieww = viewport.width();
viewh = viewport.height();
viewRatio = vieww / viewh;
bgimg = $(slides[current]).find("img");
// the current visible image var doResize = function(){
imgRatio = bgimg.width() / bgimg.height();
if ((viewRatio < imgRatio && settings.mode == 'contain') || (viewRatio >= imgRatio && settings.mode == 'cover')){
bgimg.removeClass('maxh').addClass('maxw').css({
/* get new height after adjust above */
top:(viewh - vieww / imgRatio) / 2,left:0}
);
}
else{
bgimg.removeClass('maxw').addClass('maxh').css({
/* get new width after adjust above */
top:0,left:(vieww - imgRatio * viewh) / 2}
);
}
}
;
bgimg.get(0).complete ? doResize():bgimg.load(doResize);
}
theWindow.resize(resizeImg).trigger('resize');
// for chaining return this;
}
;
}
(jQuery));
CSS代码(juicyslider.css):
/** * Juicy Slider styles sheet * * (c) 2013 by Van Ting * */
html,body{/* CSS reset */
margin:0;padding:0;border:0;}
.juicyslider{position:relative;padding:0;margin:0;border:0;}
.juicyslider ul{width:100%;height:100%;position:absolute;overflow:hidden;list-style:none outside none;padding:0;margin:0;}
.juicyslider li{width:100%;height:100%;position:absolute;top:0px;left:0px;display:none;/* all hidden initially */
}
.juicyslider li:first-child{display:block;}
.juicyslider .nav{position:absolute;top:45%;padding:20px;opacity:0;filter:alpha(opacity=0);cursor:pointer;z-index:1000;-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;background-image:url(../img/nav-40.png);}
.juicyslider:hover .nav{opacity:.5;filter:alpha(opacity=50);}
.juicyslider .nav.next{right:3%;}
.juicyslider .nav.prev{left:3%;background-position:40px 0;}
.juicyslider .mask{background-image:none;position:absolute;width:100%;height:100%;z-index:100;}
.juicyslider img.maxw{width:100%;height:auto;max-height:none;position:absolute;filter:inherit;/* for ie8 to inherit parent opacity */
}
.juicyslider img.maxh{width:auto;max-width:none;height:100%;position:absolute;filter:inherit;/* for ie8 to inherit parent opacity */
}
分享到QQ
分享到微博
微信扫一扫
