2016/1/21--代码
2016-01-21 20:18
405 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Parallax Slider with jQuery" />
<meta name="keywords" content="parallax, jquery, slider, slideshow, rotation, perspective"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
<script src = "2016-1-21/cufon-yui.js" type="text/javascript"></script>
<script src = "2016-1-21/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{textShadow:'1px 1px #000'});
Cufon.replace('h2',{textShadow:'1px 1px #000'});
Cufon.replace('.footer',{textShadow:'1px 1px #000'});
Cufon.replace('.pxs_loading',{textShadow:'1px 1px #000'});
</script>
</head>
<body>
<div class="wrapper">
Parallax Slider
</div>
<div id = "pxs_container" class="pxs_container">
<div pxs_bg>
<div class = "pxs_bg1"></div>
<div class = "pxs_bg2"></div>
<div class = "pxs_bg3"></div>
</div>
<div>Loading images...</div>
<div class="pxs_slider-wrapper">
<ul class="pxs_slider">
<li><img src="images/1.jpg" alt="First Image"></li>
<li><img src="images/2.jpg" alt="Second Image"></li>
<li><img src = "images/3.jpg" alt = "Third Image"></li>
<li><img src = "images/4.jpg" alt="Forth Image"></li>
<li><img src = "images/5.jpg" alt="Fifth Image"></li>
<li><img src="images/6.jpg" alt="Sixth Image"></li>
</ul>
<div class="pxs_navigation">
<span class="pxs_next"></span>
<span class="pxs_prev"></span>
</div>
<ul class="pxs_thumbnails">
<li><img src="images/thumbs/1.jpg" alt="First Image"></li>
<li><img src="images/thumbs/2.jpg" alt="Second Image"></li>
<li><img src="images/thumbs/3.jpg" alt="Third Image"></li>
<li><img src="images/thumbs/4.jpg" alt="Forth Image"></li>
<li><img src="images/thumbs/5.jpg" alt="Fifth Image"></li>
<li><img src="images/thumbs/6.jpg" alt="Sixth Image"></li>
</ul>
</div>
</div>
<div class="footer_banner" style="width: 728px;margin: 30px auto;"></div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(function($){
$.fn.parallaxSlider = function(options){
var opts = $.extend({}, $.fn.parallaxSlider.defaults,options);
return this.each(function(){
var $pxs_container = $(this),$.meta? $.extend({}, opts,$pxs_container.data()):opts;
//the main slider
var $pxs_container = $(".pxs_slider"),$pxs_container;
//the elements in the slider
$elems = $pxs_slider.children();
//total number of elements
total_elems = $elems.length;
//the navigation buttons
$pxs_next = $('.pxs_next',$pxs_container);
$pxs_prev = $('.pxs_prev',$pxs_container);
//the bg images
$pxs_bg1 = $('.pxs_bg1',$pxs_container);
$pxs_bg2 = $('.pxs_bg2',$pxs_container);
$pxs_bg3 = $('.pxs_bg3',$pxs_container);
//current images
current = 0;
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container);
//the thumbs
$pxs_thumb = $pxs_thumbnails.children();
//the interval for the autoplay mode
slideshow;
//the loading images
$pxs_loading = $('.pxs_loading',$pxs_container);
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
//first preload all the images
var loaded = 0;
$images = $pxs_slider_wrapper.find('img');
$images.each(function(){
var $img = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == total_elems*2){
$pxs_loading.hide();
$pxs_slider_wrapper.show();
//one images width
var one_image_w = $pxs_slider.find('img:first').width();
/*
need to set width of the slider,
of each one of its elements, and of the
navigation buttons
*/
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
/*
set the width of the thumbs
and spread them evenly
*/
$pxs_thumbnails({
'width':one_image_w + "px"
'margin_left':-one_image_w/2 + "px"
});
var spaces = one_image_w/(total_elems + 1);
$thums.each(function(i){
var $this = $(this);
var left = spaces*(i + 1) - $this.width/2;
this.css ('left',left + "px");
if(o.thumbRotation){
var angle = Math.floor(Math.random()*41)-20;
$this.css({
'-webkit-transform':'rotate(' + angle + 'deg)'
'-moz-transform':'rotate(' + angle + 'deg)'
'transform':'rotate(' + angle + 'deg)'
})
}
//hovering the thumbs animates them up and down
$this.bind( 'mouseenter',function(){
$(this).stop().animate({top:'-10px'},100);
}).bind('mouseleave',function(){
$(this).stop().ainmate({top:'0px'},100);
});
//make the first thumb be selected
highlight($thumbs,eq(0));
//slide when clicking the navigation buttons
$pxs_next.bind('click',function(){
++current;
if(current>=total_elems){
if(o.circular){
current = 0;
}else{
--current;
return false;
}
highlight($thumbs,eq(current));
slide{
current,$pxs_bg1,$pxs_bg2,$pxs_bg3, o.speed, o.easing, o.easingBg,$pxs_slider;
}
}
});
$pxs_prev.bind('click',function(){
--current;
if(current < 0){
if(o.circular){
current = total_elems - 1;
}
else{
++current;
return false;
}
}
highlight($thumbs.eq(current));
slide{
current,$pxs_slider,$pxs_bg1,$pxs_bg2,$pxs_bg3, o.speed, o.easing, o.easingBg
}
});
/*
clicking a thumb will slide to the respective image
*/
$thums.bind('click',function(){
var $thumb = $(this);
highlight($thumb);
if(o.auto){
clearInterval(slideshow);
current = $thumb.index();
}
slide{
current,$pxs_bg1,$pxs_bg2,$pxs_bg3, o.speed, o.easing, o.easingBg
}
});
if(o.auto != 0){
o.circular = true;
slideshow = setInterval(function(){
$pxs_next.trigger('click');
},o.auto);
}
$(window).resize(function(){
w_w = $(window).width;
setwidths(current,$pxs_slider,$pxs_bg3,$pxs_bg2,$pxs_bg1,1, o.easing, o.speed, o.easingBg);
}).error(function(){
alert('here');
}).attr('src',$img.attr('src'));
})
}
});
});
var w_w = $(window).width();
var slide = function(current,$pxs_slider,$pxs_bg1,$pxs_bg2,$pxs_bg3,speed,easing,easingBg){
var slide_to = parseInt(-w_w*current);
$pxs_slider.stop().animate({left:slide_to + "px"}.speed,easing);
$pxs_bg3.stop().animate({left:slide_to /2 + "px"}.speed,easing);
$pxs_bg2.stop().animate({left:slide_to / 4 + "px"}.speed,easing);
$pxs_bg1.stop().animate({left:slide_to / 8 + "px"}.speed,easing);
}
var highlight = function($elem){
$elem.siblings().removeClass('selected');
$elem.addClass('selected');
}
var setWidths = function($pxs_bg1,$pxs_bg2,$pxs_bg3,$pxs_next,$pxs_prev,total_elems,one_image_w){
var pxs_slide_w = W_W*total_elems;
$pxs_slider.width (pxs_slider_w + 'px');
$elems.width(w_w + 'px');
$pxs_bg1.width(pxs_slide_w + "px");
$pxs_bg2.width(pxs_slide_w + "px");
$pxs_bg3.width(pxs_slide_w + "px");
var position_nav = w_w/2 - one_image_w/2 + 3;
$pxs_next.css('right',position_nav + "px");
$pxs_prev.css('left',position_nav + "px");
}
})
}
$.fn.parallaxSlider.defaults = {
auto : 0, //how many seconds to periodically slide the content.
//If set to 0 then autoplay is turned off.
speed : 1000,//speed of each slide animation
easing : 'jswing',//easing effect for the slide animation
easingBg : 'jswing',//easing effect for the background animation
circular : true,//circular slider
thumbRotation : true//the thumbs will be randomly rotated
};
//easeInOutExpo,easeInBack
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
var $pxs_container = $('#pxs_container');
$pxs_container.parallaxSlider();
});
</script>
<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
})
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Parallax Slider with jQuery" />
<meta name="keywords" content="parallax, jquery, slider, slideshow, rotation, perspective"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
<script src = "2016-1-21/cufon-yui.js" type="text/javascript"></script>
<script src = "2016-1-21/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{textShadow:'1px 1px #000'});
Cufon.replace('h2',{textShadow:'1px 1px #000'});
Cufon.replace('.footer',{textShadow:'1px 1px #000'});
Cufon.replace('.pxs_loading',{textShadow:'1px 1px #000'});
</script>
</head>
<body>
<div class="wrapper">
Parallax Slider
</div>
<div id = "pxs_container" class="pxs_container">
<div pxs_bg>
<div class = "pxs_bg1"></div>
<div class = "pxs_bg2"></div>
<div class = "pxs_bg3"></div>
</div>
<div>Loading images...</div>
<div class="pxs_slider-wrapper">
<ul class="pxs_slider">
<li><img src="images/1.jpg" alt="First Image"></li>
<li><img src="images/2.jpg" alt="Second Image"></li>
<li><img src = "images/3.jpg" alt = "Third Image"></li>
<li><img src = "images/4.jpg" alt="Forth Image"></li>
<li><img src = "images/5.jpg" alt="Fifth Image"></li>
<li><img src="images/6.jpg" alt="Sixth Image"></li>
</ul>
<div class="pxs_navigation">
<span class="pxs_next"></span>
<span class="pxs_prev"></span>
</div>
<ul class="pxs_thumbnails">
<li><img src="images/thumbs/1.jpg" alt="First Image"></li>
<li><img src="images/thumbs/2.jpg" alt="Second Image"></li>
<li><img src="images/thumbs/3.jpg" alt="Third Image"></li>
<li><img src="images/thumbs/4.jpg" alt="Forth Image"></li>
<li><img src="images/thumbs/5.jpg" alt="Fifth Image"></li>
<li><img src="images/thumbs/6.jpg" alt="Sixth Image"></li>
</ul>
</div>
</div>
<div class="footer_banner" style="width: 728px;margin: 30px auto;"></div>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(function($){
$.fn.parallaxSlider = function(options){
var opts = $.extend({}, $.fn.parallaxSlider.defaults,options);
return this.each(function(){
var $pxs_container = $(this),$.meta? $.extend({}, opts,$pxs_container.data()):opts;
//the main slider
var $pxs_container = $(".pxs_slider"),$pxs_container;
//the elements in the slider
$elems = $pxs_slider.children();
//total number of elements
total_elems = $elems.length;
//the navigation buttons
$pxs_next = $('.pxs_next',$pxs_container);
$pxs_prev = $('.pxs_prev',$pxs_container);
//the bg images
$pxs_bg1 = $('.pxs_bg1',$pxs_container);
$pxs_bg2 = $('.pxs_bg2',$pxs_container);
$pxs_bg3 = $('.pxs_bg3',$pxs_container);
//current images
current = 0;
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container);
//the thumbs
$pxs_thumb = $pxs_thumbnails.children();
//the interval for the autoplay mode
slideshow;
//the loading images
$pxs_loading = $('.pxs_loading',$pxs_container);
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
//first preload all the images
var loaded = 0;
$images = $pxs_slider_wrapper.find('img');
$images.each(function(){
var $img = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == total_elems*2){
$pxs_loading.hide();
$pxs_slider_wrapper.show();
//one images width
var one_image_w = $pxs_slider.find('img:first').width();
/*
need to set width of the slider,
of each one of its elements, and of the
navigation buttons
*/
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
/*
set the width of the thumbs
and spread them evenly
*/
$pxs_thumbnails({
'width':one_image_w + "px"
'margin_left':-one_image_w/2 + "px"
});
var spaces = one_image_w/(total_elems + 1);
$thums.each(function(i){
var $this = $(this);
var left = spaces*(i + 1) - $this.width/2;
this.css ('left',left + "px");
if(o.thumbRotation){
var angle = Math.floor(Math.random()*41)-20;
$this.css({
'-webkit-transform':'rotate(' + angle + 'deg)'
'-moz-transform':'rotate(' + angle + 'deg)'
'transform':'rotate(' + angle + 'deg)'
})
}
//hovering the thumbs animates them up and down
$this.bind( 'mouseenter',function(){
$(this).stop().animate({top:'-10px'},100);
}).bind('mouseleave',function(){
$(this).stop().ainmate({top:'0px'},100);
});
//make the first thumb be selected
highlight($thumbs,eq(0));
//slide when clicking the navigation buttons
$pxs_next.bind('click',function(){
++current;
if(current>=total_elems){
if(o.circular){
current = 0;
}else{
--current;
return false;
}
highlight($thumbs,eq(current));
slide{
current,$pxs_bg1,$pxs_bg2,$pxs_bg3, o.speed, o.easing, o.easingBg,$pxs_slider;
}
}
});
$pxs_prev.bind('click',function(){
--current;
if(current < 0){
if(o.circular){
current = total_elems - 1;
}
else{
++current;
return false;
}
}
highlight($thumbs.eq(current));
slide{
current,$pxs_slider,$pxs_bg1,$pxs_bg2,$pxs_bg3, o.speed, o.easing, o.easingBg
}
});
/*
clicking a thumb will slide to the respective image
*/
$thums.bind('click',function(){
var $thumb = $(this);
highlight($thumb);
if(o.auto){
clearInterval(slideshow);
current = $thumb.index();
}
slide{
current,$pxs_bg1,$pxs_bg2,$pxs_bg3, o.speed, o.easing, o.easingBg
}
});
if(o.auto != 0){
o.circular = true;
slideshow = setInterval(function(){
$pxs_next.trigger('click');
},o.auto);
}
$(window).resize(function(){
w_w = $(window).width;
setwidths(current,$pxs_slider,$pxs_bg3,$pxs_bg2,$pxs_bg1,1, o.easing, o.speed, o.easingBg);
}).error(function(){
alert('here');
}).attr('src',$img.attr('src'));
})
}
});
});
var w_w = $(window).width();
var slide = function(current,$pxs_slider,$pxs_bg1,$pxs_bg2,$pxs_bg3,speed,easing,easingBg){
var slide_to = parseInt(-w_w*current);
$pxs_slider.stop().animate({left:slide_to + "px"}.speed,easing);
$pxs_bg3.stop().animate({left:slide_to /2 + "px"}.speed,easing);
$pxs_bg2.stop().animate({left:slide_to / 4 + "px"}.speed,easing);
$pxs_bg1.stop().animate({left:slide_to / 8 + "px"}.speed,easing);
}
var highlight = function($elem){
$elem.siblings().removeClass('selected');
$elem.addClass('selected');
}
var setWidths = function($pxs_bg1,$pxs_bg2,$pxs_bg3,$pxs_next,$pxs_prev,total_elems,one_image_w){
var pxs_slide_w = W_W*total_elems;
$pxs_slider.width (pxs_slider_w + 'px');
$elems.width(w_w + 'px');
$pxs_bg1.width(pxs_slide_w + "px");
$pxs_bg2.width(pxs_slide_w + "px");
$pxs_bg3.width(pxs_slide_w + "px");
var position_nav = w_w/2 - one_image_w/2 + 3;
$pxs_next.css('right',position_nav + "px");
$pxs_prev.css('left',position_nav + "px");
}
})
}
$.fn.parallaxSlider.defaults = {
auto : 0, //how many seconds to periodically slide the content.
//If set to 0 then autoplay is turned off.
speed : 1000,//speed of each slide animation
easing : 'jswing',//easing effect for the slide animation
easingBg : 'jswing',//easing effect for the background animation
circular : true,//circular slider
thumbRotation : true//the thumbs will be randomly rotated
};
//easeInOutExpo,easeInBack
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
var $pxs_container = $('#pxs_container');
$pxs_container.parallaxSlider();
});
</script>
<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于FragmentPagerAdapter的方法讲解
- github commands
- C++ string类的构造函数
- JAVA多线程之（join)
- MATLAB中，可以用于计算数组或者矩阵元素总个数的方法
- eclipse 单机版 mahout collaborative demo
- PHP 上传文件 Allowed memory size of 134217728 bytes exhausted
- java正则表达式
- JAVA基础（一）重载和复写
- python title()的用法
- 织梦dedecms图片按月存放怎么实现？代码分享
- JAVA内部类使用，什么时候该使用内部类及使用内部类的好处
- 提高软件质量实践――Google 篇
- hibernate Session的几个简单方法
- 【LEETCODE】80-Remove Duplicates from Sorted Array II [Python]
- flask之行（Eclipse+Pydev IDE）
- C++栈和队列
- java基础学习
- Entity Framework 6 Recipes 2nd Edition（10-6）译 -> TPT继承模型中使用存储过程
- 怎么学习C++?