新年快乐!我们将利用视差原理将不同背景当我们滑到一个图像为了创建一些不错的视角。HTML结构将由一个主要的容器类“pxs_container”。我们将添加一个包装器的三个不同的背景,我们将创建动画不同视差。背景图像将有一些透明,因为我们希望看到他们彼此上移动。我们还将添加一个加载元素和两个无序列表完整图像的缩略图。进一步,我们将添加的导航元素。
CSS.pxs_container{ width:100%; height:420px; position:relative; border-top:7px solid #333; border-bottom:7px solid #333; overflow:hidden; -moz-box-shadow:0px 0px 7px #000; -webkit-box-shadow:0px 0px 7px #000; box-shadow:0px 0px 7px #000;}包装器的div将包含视差背景重复背景图像。.pxs_bg{ background:transparent url(../images/bg.png) repeat top left;}里面的div的包装将分享以下样式属性:.pxs_bg div{ position:absolute; top:0px; left:0px; height:420px; background-repeat:repeat; background-position:top left; background-color:transparent;}单一背景div将都有一个不同的背景图片:.pxs_bg .pxs_bg1{ background-image:url(../images/bg1.png);}.pxs_bg .pxs_bg2{ background-image:url(../images/bg2.png);}.pxs_bg .pxs_bg3{ background-image:url(../images/bg3.png);}我们还将设置左值的动态div。但我们会稍后回来。让我们看看其他元素的风格。.pxs_slider_wrapper{ display:none;}它包含所有的元素,我们希望加载开始,所以一旦加载完成,我们将展示包装器及其所有内容。让我们重置的样式列表:.pxs_container ul{ margin:0px; padding:0px; list-style:none;}滑块列表的主要想法是,我们列出一个很长的的li元素在整个窗口的宽度。所以,你所看到的在屏幕上的滑块实际上是一个整体。我们将设置的宽度ul动态窗口宽度倍数量的图像列表中。li元素左浮动,正确的ul的宽度将确保对方旁边的li元素排列:ul.pxs_slider{ position:absolute; left:0px; top:0px; height:420px;}ul.pxs_slider li{ height:420px; float:left; position:relative;}ul.pxs_slider li img{ display:block; margin:35px auto 0px auto; -moz-box-shadow:0px 0px 7px #222; -webkit-box-shadow:0px 0px 7px #222; box-shadow:0px 0px 7px #222; border: 8px solid transparent; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}添加一个透明的边框和一盒阴影将创建一个玻璃一样效果的图像。缩略图列表将绝对定位。我们添加了50%,因为我们想中心,通过动态地设置宽度和消极的左边框的JavaScript:ul.pxs_thumbnails{ height:35px; position:absolute; top:320px; left:50%;}ul.pxs_thumbnails li{ position:absolute; display:block;}我们将添加一个白边的缩略图,给他们一个浮油盒阴影:ul.pxs_thumbnails li img{ border: 5px solid #FFFFFF; -moz-box-shadow:1px 1px 7px #555; -webkit-box-shadow:1px 1px 7px #555; box-shadow:1px 1px 7px #555; cursor:pointer; display:block; opacity:0.7;}当前图像的缩略图应该是完全不透明的:ul.pxs_thumbnails li.selected img{ opacity:1.0;}共同风格两个导航范围如下:.pxs_navigation span{ position:absolute; width:30px; height:60px; -moz-box-shadow:0px 0px 2px #000; -webkit-box-shadow:0px 0px 2px #000; box-shadow:0px 0px 2px #000; top:145px; opacity:0.6; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:pointer;}.pxs_navigation span:hover{ opacity:0.9;}让我们添加一个箭头导航跨越:.pxs_navigation span.pxs_prev{ background:#000 url(../images/prev.png) no-repeat center center;}.pxs_navigation span.pxs_next{ background:#000 url(../images/next.png) no-repeat center center;}我们将设置左(pxs_prev)和右(pxs_next)值动态为了坚持左侧和右侧的图像。最后,我们将风格加载元素将为中心:.pxs_loading{ color:#fff; font-size:20px; padding:15px 15px 15px 50px; position:absolute; background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; opacity:0.7; width:180px; position:absolute; top:150px; left:50%; margin-left:-90px;}JAVASCRIPT 我们还添加以下脚本启动我们的滑块:$(function() { var $pxs_container = $('#pxs_container'); $pxs_container.parallaxSlider();}); ![jQuery视差图片幻灯片播放]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······
... 
...