<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Parallax Slider - 视差滚动滑块</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="stylesheet" href="lib/css/init.css">
<link rel="stylesheet" href="lib/css/style.css">
<!-- <script src="../res/static/js/jquery-3.5.1.min.js"></script> -->
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="./lib/js/jquery.easing.1.3.js"></script>
<!-- <script src="lib/js/ChunkFive_400.font.js"></script> -->
<script src="lib/js/cufon-yui.js"></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">
<!-- <h1>Parallax Slider </h1> -->
</div>
<div id="pxs_container" class="pxs_container" style="margin-top:160px">
<div class="pxs_bg">
<div class="pxs_bg1"></div>
<div class="pxs_bg2"></div>
<div class="pxs_bg3"></div>
</div>
<div class="pxs_loading">Loading images...</div>
<div class="pxs_slider_wrapper">
<ul class="pxs_slider">
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/1.jpg" alt="First Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/3.jpg" alt="Third Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/4.jpg" alt="Forth Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/2.jpg" alt="Second Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/5.jpg" alt="Fifth Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/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="http://www.yyyweb.com/demo/parallax-slider/images/thumbs/1.jpg" alt="First Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/thumbs/2.jpg" alt="Second Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/thumbs/3.jpg" alt="Third Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/thumbs/4.jpg" alt="Forth Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/thumbs/5.jpg" alt="Fifth Image" /></li>
<li><img src="http://www.yyyweb.com/demo/parallax-slider/images/thumbs/6.jpg" alt="Sixth Image" /></li>
</ul>
</div>
</div>
<div class="footer-banner" style="width:728px; margin:30px auto"></div>
<!-- The JavaScript -->
<!-- <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),
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
//the main slider
var $pxs_slider = $('.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 image
current = 0,
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails', $pxs_container),
//the thumbs
$thumbs = $pxs_thumbnails.children(),
//the interval for the autoplay mode
slideshow,
//the loading image
$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 (assuming all images have the same sizes)
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.css({
'width': one_image_w + 'px',
'margin-left': -one_image_w / 2 + 'px'
});
var spaces = one_image_w / (total_elems + 1);
$thumbs.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({
'-moz-transform': 'rotate(' + angle + 'deg)',
'-webkit-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().animate({ 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_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
视差轮播图-高级质感切换特效-HTML源码
版权申诉
75 浏览量
2023-09-22
20:58:52
上传
评论
收藏 503KB RAR 举报
视差轮播图-高级质感切换特效-HTML源码.rar （11个子文件） 
视差轮播图-高级质感切换特效-HTML源码 lib js 
cufon-yui.js 18KB jquery.easing.1.3.js 8KB css style.css 3KB init.css 716B images 
pre.png 513B bg2.png 99KB nex.png 533B bg3.png 223KB bg1.png 163KB bg.png 544B
test.html 13KB资源评论
