首先调用 jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
样式代码
* {
padding: 0;
margin: 0;
}
ol,li {
list-style: none;
vertical-align: middle;
}
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
#slider {
width: 750px;
margin: 0 auto;
position: relative;
zoom:1;
}
.nice-change {
height: 320px;
position: relative;
}
.nice-list {
width: 600px;
height: 320px;
position: absolute;
top: 0;
overflow: hidden;
border-radius: 6px;
}
#next,#prev {
position: absolute;
top: 50%;
z-index: 100;
width: 76px;
height: 112px;
margin-top: -56px;
border: 0 none;
}
#prev {
left: 160px;
background: url(http://www.xh-css.cn/wp-content/uploads/2013/06/prev.png) no-repeat;
}
#next {
right: 160px;
background: url(http://www.xh-css.cn/wp-content/uploads/2013/06/next.png) no-repeat;
}
然后加载 js 代码
;(function ($) {
$.fn.cubeSlider = function(options){
$.fn.cubeSlider.defaults = {
element:"li",
wrap:"ol",
auto:true,
styles:[
{width:120, height:175, top:71, left:134, zIndex:1},
{width:130, height:189, top:61, left:0, zIndex:2},
{width:170, height:247, top:37, left:110, zIndex:3},
{width:220, height:320, top:0, left:262, zIndex:4},
{width:170, height:247, top:37, left:468, zIndex:3},
{width:130, height:189, top:61, left:620, zIndex:2},
{width:120, height:175, top:71, left:496, zIndex:1},
{width:120, height:175, top:71, left:262, zIndex:0}
],
"btnPrev":"#prev",
"btnNext":"#next",
"direction":true,
"speed":400,
"interval":3000
}
var opts = $.extend({},$.fn.cubeSlider.defaults,options || {});
//
return this.each(function(){
var $this = $(this);
var oWrap = $this.find(opts.wrap);
var tags = oWrap.find(opts.element);
var prev = $(opts.btnPrev);
var next = $(opts.btnNext);
var timer = null;
//初始化显示
render();
//点击按钮切换
prev.click(function(){
oWrap.find(opts.element).eq(0).appendTo(oWrap);
render();
return false;
});
next.click(function(){
oWrap.find(opts.element).eq(-1).prependTo(oWrap);
render();
return false;
});
//判断是否自动
if(opts.auto){
clearInterval(timer);
timer = setInterval(move,opts.interval);
}
//鼠标移动上面停止运动
$this.on({
"mouseenter":function(){
clearInterval(timer);
},
"mouseleave":function(){
timer = setInterval(move,opts.interval);
}
});
//轮播
function move(){
if(opts.direction){
prev.trigger("click");
}else{
next.trigger("click");
}
}
//渲染
function render(){
tags = $this.find(opts.element);
tags.each(function(i,el){
$(el).animate({
"width":opts.styles[i].width + "px",
"height":opts.styles[i].height + "px",
"top":opts.styles[i].top + "px",
"left":opts.styles[i].left + "px",
"z-index":opts.styles[i].zIndex
},opts.speed);
});
};
});
}
})(jQuery);
//
$(function () {
$("#slider").cubeSlider({
element:".nice-list",
wrap:".nice-change",
direction:false
});
});
下面开始放置图片
<div id="slider">
<button id="prev"></button>
<button id="next"></button>
<ol class="nice-change">
<li class="nice-list"></li>
<li class="nice-list"></li>
<li class="nice-list"></li>
<li class="nice-list"></li>
<li class="nice-list"></li>
<li class="nice-list"></li>
<li class="nice-list"></li>
<li class="nice-list"></li>
</ol>
</div>
演示
查看预览-- 完 --
扫码订阅，第一时间获得更新
微信扫码二维码，订阅我们网站的动态，另外不定时发送 WordPress 小技巧，你可以随时退订，欢迎订阅哦~
