jq 幻灯片插件制作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="博客名：仙梦之飘 QQ:894547549">
<meta name="Keywords" content="">
<meta name="Description" content="">
<head>
<title>幻灯片插件制作</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{ width:800px; margin:0 auto;}
.slider{width: 400px;height: 300px; position: relative;margin: 10px auto;overflow: hidden;border:2px #c0c9cf solid;}
.slider_pic li{width:400px;height: 300px;font:700 40px/300px "微软雅黑";text-align: center;color: #fff;list-style: none;}
.num{width: 160px;position: absolute;right: 10px;bottom: 10px; z-index:10;}
.num span{display: inline-block;color:#fff;font-weight:bold;cursor:pointer;margin-right: 5px;background: #db7093;width: 24px;height: 24px;text-align: center;line-height: 24px;border-radius: 10px;}
.num span.cur{background:#000;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
//jq 的easing效果添加，可以选择需要的效果来添加
jQuery.extend(jQuery.easing,{
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
});
(function($){
$.fn.extend({
mySlider:function(options){
var that=$(this);
var configs={
'slideCon':"ul",//容器
'slideTag':"li",//图片
'direction': 'vertical',//切换效果
'method' : 'click',//鼠标事件
'speed' : 5000 ,//切换时间
'animateSpeed':600,//运动速度
'auto':true//自动播放
};
options= $.extend(configs,options);
var slide=that.find(configs.slideCon);
var oLi=slide.find(configs.slideTag);
var oLen=oLi.length;
var oWidth=oLi.width();
var oHeight=oLi.height();
var oNum=$("<div class='num'></div>");
var iTimer=null;
var index=0;
var peel = 0;
for(var i=0;i<oLen;i++){
oNum.append('<span>'+(i+1)+'</span>');
}
slide.css({
'position': 'absolute',
'top' : '0',
'left' : '0'
});
that.append(oNum);
var oSpan=oNum.find('span');
oSpan.eq(0).addClass("cur");
function SlideImg(n){
switch(options.direction){
case 'vertical':
peel=parseInt(n * oHeight);
slide.stop(true,false).animate({'top':-peel},configs.animateSpeed,"easeOutBounce");
break;
case 'horizontal':
oLi.css('float', 'left');
peel=parseInt(n*oWidth);
slide.css({width:oLen*parseInt(oWidth)}).stop(true,false).animate({'left':-peel},configs.animateSpeed,"easeOutBounce");
break;
case 'none':
oLi.hide().eq(n).show();
break;
case 'fade':
oLi.css({
'position': 'absolute',
'top' : '0',
'left' : '0'
})
oLi.stop(true,false).animate({opacity: 0}, 800).css('z-index',1).eq(n).css('z-index',9).stop(true,false).animate({opacity: 1}, 800);
break;
}
oSpan.removeClass("cur").eq(n).addClass("cur");
}
if(configs.auto){
autoPlay();
}
function autoPlay(){
iTimer=setInterval(function(){
SlideImg(index);
index++;
if(index==oLen){
index=0;
}
},configs.speed);
}
that.hover(function(){
clearInterval(iTimer);
},function(){
if(configs.auto){ autoPlay();}
});
oSpan.bind(options.method,function(){
if(configs.auto){clearInterval(iTimer);}
index=oSpan.index(this);
SlideImg(index);
});
return this;
}
})
})(jQuery);
$(function(){
$('#slider').mySlider({
'direction': 'vertical',
'method' : 'mouseenter',
'speed' : 2000
});
$('#slider2').mySlider({
'direction': 'fade',
'slideCon':"ol",
'method' : 'mouseenter',
'speed' : 3000
});
$('#slider3').mySlider({
'direction': 'horizontal',
'method' : 'mouseenter',
'slideCon':"ol",
'speed' : 3000
});
$('#slider4').mySlider({
'direction': 'none',
'method' : 'mouseenter',
'slideCon':"ol",
'speed' : 3000
});
})
</script>
</head>
<body>
<div class="wrap">
<code> $('#slider').mySlider({
'slideCon':"ul",//默认容器，可以选择自己需要的<br>
'slideTag':"li",//默认图片切换标签元素，可以选择自己需要的<br>
'direction': 'vertical', //默认是垂直方向，总共有4种vertical，horizontal，fade，none<br>
'method' : 'mouseenter',//默认是点击事件，根据自己需要的事件来填click，mouseenter<br>
'speed' : 2000 , //默认是切换时间5000<br>
'animateSpeed':600,//运动速度<br>
'auto':true//默认自动播放，不自动播放的值，false<br>
如果是设置fade效果按钮是在图片上面的需要设置.num的z-index：10以上的数值
});
</code>
<h1>滚动垂直方向效果</h1>
<div class="slider" id="slider">
<div class="slider_pic">
<ul>
<li style="background: #228b22">1</li>
<li style="background:#4169e1">2</li>
<li style="background: #ffc0cb">3</li>
<li style="background: #daa520">4</li>
</ul>
</div>
</div>
<h1>渐变效果效果</h1>
<div class="slider" id="slider2">
<div class="slider_pic">
<ol>
<li style="background: #228b22">1</li>
<li style="background:#4169e1">2</li>
<li style="background: #ffc0cb">3</li>
<li style="background: #daa520">4</li>
</ol>
</div>
</div>
<h1>滚动水平方向效果</h1>
<div class="slider" id="slider3">
<div class="slider_pic">
<ol>
<li style="background: #228b22">1</li>
<li style="background:#4169e1">2</li>
<li style="background: #ffc0cb">3</li>
<li style="background: #daa520">4</li>
</ol>
</div>
</div>
<h1>切换方向效果</h1>
<div class="slider" id="slider4">
<div class="slider_pic">
<ol>
<li style="background: #228b22">1</li>
<li style="background:#4169e1">2</li>
<li style="background: #ffc0cb">3</li>
<li style="background: #daa520">4</li>
</ol>
</div>
</div>
</div>
</body>
</html>
关注web前端
