找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
网推大家坛 新闻 网站推广 网站技术 查看内容

jQuery仿途牛网站焦点图代码

2017-7-12 22:37| 发布者: 550896131| 查看: 106| 评论: 0

简介:框架JQ1.7.2/*js开始*/;(function($){ $.fn.lubo=function(options){ var defaults={ } //通过覆盖来传参数 var options=$.extend(defaults,options); return this.each(function(){ var _lubo=jQu ...
框架JQ1.7.2
/*js开始*/
;(function($){
$.fn.lubo=function(options){
var defaults={

}
 //通过覆盖来传参数
var options=$.extend(defaults,options);
return this.each(function(){

var _lubo=jQuery('.lubo');

var _box=jQuery('.lubo_box');

var _this=jQuery(this);  

var luboHei=_box.height();

var Over='mouseover';

var Out='mouseout';

var Click='click';

var Li="li";

var _cirBox='.cir_box';

var cirOn='cir_on';

var _cirOn='.cir_on';

var cirlen=_box.children(Li).length; //圆点的数量  图片的数量

var luboTime=2000; //轮播时间

var switchTime=400;//图片切换时间

cir();

Btn();

//根据图片的数量来生成圆点

function cir(){

_lubo.append('<ul class="cir_box"></ul>');

var cir_box=jQuery('.cir_box');

for(var i=0; i<cirlen;i++){

cir_box.append('<li style="" value="'+i+'"></li>');
}

var cir_dss=cir_box.width();

cir_box.css({

left:'50%',

marginLeft:-cir_dss/2,

bottom:'0' 

});

cir_box.children(Li).eq(0).addClass(cirOn);

}

//生成左右按钮

function Btn(){

_lubo.append('<div class="lubo_btn"></div>');

var _btn=jQuery('.lubo_btn');

_btn.append('<div class="left_btn"><</div><div class="right_btn">></div>');

var leftBtn=jQuery('.left_btn');

var rightBtn=jQuery('.right_btn');

//点击左面按钮

leftBtn.bind(Click,function(){

var cir_box=jQuery(_cirBox);

var onLen=jQuery(_cirOn).val();

_box.children(Li).eq(onLen).stop(false,false).animate({

opacity:0

},switchTime);

if(onLen==0){

onLen=cirlen;

}

_box.children(Li).eq(onLen-1).stop(false,false).animate({

opacity:1

},switchTime);
cir_box.children(Li).eq(onLen-1).addClass(cirOn).siblings().removeClass(cirOn);

})

//点击右面按钮

rightBtn.bind(Click,function(){

var cir_box=jQuery(_cirBox);

var onLen=jQuery(_cirOn).val();

_box.children(Li).eq(onLen).stop(false,false).animate({

opacity:0

},switchTime);

if(onLen==cirlen-1){

onLen=-1;

}

_box.children(Li).eq(onLen+1).stop(false,false).animate({

opacity:1

},switchTime);
cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn);

})
}

//定时器

int=setInterval(clock,luboTime);

function clock(){

var cir_box=jQuery(_cirBox);

var onLen=jQuery(_cirOn).val();

_box.children(Li).eq(onLen).stop(false,false).animate({

opacity:0

},switchTime);

if(onLen==cirlen-1){

onLen=-1;

}

_box.children(Li).eq(onLen+1).stop(false,false).animate({

opacity:1

},switchTime);
cir_box.children(Li).eq(onLen+1).addClass(cirOn).siblings().removeClass(cirOn);
}

// 鼠标在图片上 关闭定时器
_lubo.bind(Over,function(){

clearTimeout(int);

});

_lubo.bind(Out,function(){

int=setInterval(clock,luboTime);

});

//鼠标划过圆点 切换图片

jQuery(_cirBox).children(Li).bind(Over,function(){

var inde = jQuery(this).index();

jQuery(this).addClass(cirOn).siblings().removeClass(cirOn);

_box.children(Li).stop(false,false).animate({

opacity:0

},switchTime);

_box.children(Li).eq(inde).stop(false,false).animate({

opacity:1

},switchTime);

});


});

}
})(jQuery);

/*JS*/

/*css*/ <style type="text/css">
   *{ margin:0; padding:0; }
   img{ display: block; border:none;}
   ul,li{ list-style: none;}
   .lubo{ width: 100%;clear: both; position: relative; height:368px;}
   .lubo_box{ position: relative; width: 100%; height:368px; }
   .lubo_box li{ float: left;position: absolute; top: 0; left: 0; width: 100%; height:368px; opacity: 0;filter:alpha(opacity=0);}
   .lubo_box li img{ width: 100%; height: 368px;}

   /*CSS*/   .cir_box{ overflow: hidden; position: absolute; z-index: 100;}
   .cir_box li{ float: left; width: 30px; height: 5px; margin:0 5px; cursor: pointer; background: #fff; opacity: 0.8;filter:alpha(opacity=80);}
   .cir_on{ background: #000 !important;}

   /*CSS*/   .lubo_btn{ position: absolute; width: 100%; top: 140px;}
   .left_btn, .right_btn{ width: 30px; height: 80px; background: #000;opacity: 0.8;filter:alpha(opacity=80); cursor: pointer; color: #fff; line-height: 80px; font-size: 30px; text-align: center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
   .left_btn{ float: left;}
   .right_btn{ float: right;}
 </style>

/*html*/
<div class="img_box">
<div class="lubo">
  <ul class="lubo_box">
 <li  style='opacity: 1;filter:alpha(opacity=100);'><a href="/cp/51.html"   style="background: url(/d/file/hd/2017-06-30/4c9b0899530a6033bcb82490db7020c9.jpg) center top no-repeat"></a></li>
                    
 <li><a href="/cp/45.html"   style="background: url(/d/file/hd/2017-06-29/3c060ec87295b4e3959a4cede26de574.jpg) center top no-repeat"></a></li>
                    
 <li><a href="/cp/61.html"   style="background: url(/d/file/hd/2017-06-29/ed5d48ce9061c6c32d110157877c5db7.jpg) center top no-repeat"></a></li>
                    
 <li><a href="/cp/60.html"   style="background: url(/d/file/hd/2017-06-30/b0138e504ed861030bd7f1b730fe5f9b.jpg) center top no-repeat"></a></li>
                    
  </ul>
</div>
<script type="text/javascript">

$(function(){

    $(".lubo").lubo({

    });

})

</script>

</div>



收藏 分享 邀请
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋

看过本文的人还看过

已有 0 人参与

会员评论

推荐阅读

返回顶部