jQuery流水线图片切换插件lensslider特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery流水线图片切换插件lensslider特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery流水线图片切换插件lensslider</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="slider">
  <ul>
    <li> 
      <img src="images/img_01.png"  alt="标题">
        <p><a href="#">标题</a></p>
    </li>
    <li>
      <img src="images/img_02.png"  alt="标题">
        <p><a href="#">标题</a></p>
    </li>
    <li>
      <img src="images/img_03.png"  alt="标题">
        <p><a href="#">标题</a></p>
    </li>
    <li>
      <img src="images/img_04.png"  alt="标题">
        <p><a href="#">标题</a></p>
    </li>
    <li>
      <img src="images/img_05.png"  alt="标题">
        <p><a href="#">标题</a></p>
    </li>
  </ul>
  <div class="control"><a href="javascript:void(0)" class="next">下一张</a> <a href="javascript:void(0)" class="prev">上一张</a></div>
</div>
<script type="text/javascript" src="js/lens-slider.js"></script>
</body>
</html>

JS代码(lens-slider.js):

var n = 1,w,x,l,lw;
	var cont_width = 298,cont_height = 212,speed = 'slow';
	/* Zoom Effect */
var zoom_width = 350,zoom_height = 250;
	$(document).ready(function(e){
	lw = $('.slider ul li').outerWidth() + 60;
	$('.slider ul li:first-child').addClass('show');
	sw = $(window).outerWidth();
	x = (sw - lw)/2 - (zoom_width - cont_width) - 10;
	l = $('.slider ul li').length;
	w = l * lw + (zoom_width - cont_width);
	console.log(l)$('.slider ul').attr('style','left:'+x+'px');
	$('.slider ul').width(w);
}
);
	$('.next').bind('click',function(el,ev){
	anNext($(this),ev)}
)function anNext(obj,ev){
	if(n==l || n > 1){
	obj.unbind(ev);
	$('.slider ul').animate({
	"left":"+="+lw+""}
,speed,function(){
	obj.click( function(){
	anNext(obj)}
)}
);
	n = n - 1;
	show(n)}
}
$('.prev').bind('click',function(el,ev){
	anim($(this),ev)}
)function anim(obj,ev){
	if(n == 1 || n < l){
	obj.unbind(ev);
	$('.slider ul').animate({
	"left":"-="+lw+""}
,speed,function(){
	obj.click( function(){
	anim(obj)}
)}
);
	n = n + 1;
	show(n);
}
}
function show(n){
	$('.slider ul li.show img').animate({
	width:cont_width,height:cont_height}
,speed)$('.slider ul li:nth-child('+n+') img').animate({
	width:zoom_width,height:zoom_height,}
,speed)$('.slider ul li.show').animate({
	marginTop:"0"}
)$('.slider ul li:nth-child('+n+')').animate({
	marginTop:"-20px"}
)$('.slider ul li.show').removeClass('show');
	$('.slider ul li:nth-child('+n+')').addClass('show');
}

CSS代码(slider.css):

.slider{width:100%;height:400px;overflow:hidden;position:relative;padding-top:125px;background:url(../images/bg.jpg) no-repeat 50% 0;}
.slider ul{position:relative;}
.slider li{float:left;margin:0px 30px;list-style:none;position:relative;padding:0;border:8px solid #000;}
.slider li img{width:298px;height:212px;}
.slider li.show{margin-top:-20px;}
.slider li.show img{width:350px;height:250px;}
.slider a.category{font-size:14px;font-weight:bold;background:url(../images/slider-yellow-strip.png) no-repeat 0 0;width:173px;height:25px;text-align:center;position:absolute;padding-top:5px;left:50%;margin-left:-86px;z-index:1234;top:0;}
.slider p{margin:0;text-align:left;position:absolute;left:0;bottom:0;padding:10px;color:#FFF;background-color:rgba(0,0,0,0.8);right:0;font-size:16px;}
.slider p a{color:#FFF;text-decoration:none;}
.slider li div.icon{position:absolute;right:22px;bottom:14px;font-size:14px;}
.slider li div.view{bottom:32px;background:url(../images/ico-glass.png) no-repeat 0 3px;padding-left:32px;}
.slider li div.like{background:url(../images/ico-heart.png) no-repeat 0 3px;padding-left:35px;}
.slider .control{position:absolute;left:50%;margin-left:-175px;width:350px;bottom:95px;}
.slider .control a{display:block;width:34px;height:55px;text-indent:-9999px;overflow:hidden;background:url(../images/np.png) no-repeat 0 0;position:absolute;top:50%;margin-top:-17px;}
.slider .control a.next{background-position:0px 0;left:5%;}
.slider .control a.prev{background-position:100% 0;right:5%;}
.sliderImg{position:absolute;top:0;left:0;bottom:0;right:0;background:no-repeat 0 0;background-size:cover;filter:blur(10px);-webkit-filter:blur(10px);-moz-filter:blur(10px);-o-filter:blur(10px);-ms-filter:blur(10px);filter:blur(10px);}

附件:下载该文件资源,减少时间成本(增值服务)