面向对象轮播

2018-05-28 本文已影响0人 _嘿嘿_

js文件

function Slider(id,options) {
this.me = $(id); this.prevBtn =$ (".prevBtn");
this.nextBtn = $(".nextBtn"); this.area =$ (".area");
this.showBtn = $(".jsNav"); this.index = 0; this.len = this.me.find("img").length; this.timer; this.opts =$ .extend(true, {}, {
intervalTime:3000,
autoPlay:true

}, options);

//插件初始化
this.init();

}

Slider.prototype.init = function () {
this.mouseenter();
if(this.opts.autoPlay){
this.autoPlay();
}
this.hoverInit();
}
Slider.prototype.hoverInit = function () {
var that = this;
this.area.unbind().hover(function(){
$(that).find(".qq").show(100);} ,function(){$ (that).find(".qq").hide(100);
});
}
Slider.prototype.mouseenter = function () {
var that = this;
this.prevBtn.unbind().click(function () {
if(that.index >0){
that.index--;
}else {
that.index = that.len -1;
}
that.goToPage(that.index);
})
this.nextBtn.unbind().click(function () {
that.moveToNext();
})
this.showBtn.find("a").unbind().click(function () {
that.index = $(this).index();
that.goToPage(that.index);
})

}

Slider.prototype.moveToNext = function () {
var that = this;
if(that.index <that.len-1){
++that.index;
}else {
that.index = 0;
}
that.goToPage(that.index);
}
Slider.prototype.goToPage = function (index) {
this.me.find("img").eq(index).fadeIn().siblings().fadeOut();
$("#jsNav").find("a").eq(index).addClass("imgSelected").siblings().removeClass("imgSelected");
}

Slider.prototype.autoPlay = function () {
var that = this;
that.timer = setInterval(function(){
that.moveToNext();
},that.opts.intervalTime);

that.me.unbind().hover(function(){
    clearInterval(that.timer);
},function(){

    that.autoPlay();
});

}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>带左右箭头切换jquery焦点幻灯片代码</title>

$(document).ready(function(){

$(".area").hover(function(){

  $(this).find(".qq").show(100);}

  ,function(){

    $(this).find(".qq").hide(100);

});

var mySlider = new Slider(".box01");

});

</script>

<body>

<a id=prev class="prevBtn qq" href="javascript:void(0)"></a>

<a id=next class="nextBtn qq" href="javascript:void(0)"></a>

<div id=js class="js">

    <div class="box01">

        <img onClick="location.href='http://www.jq22.com/'"  src="images/01.jpg">

        <img onClick="location.href='http://www.jq22.com/'"   src="images/02.jpg">

        <img onClick="location.href='http://www.jq22.com/'"  src="images/03.jpg">

        <img onClick="location.href='http://www.jq22.com/'"  src="images/04.jpg">

        <img onClick="location.href='http://www.jq22.com/'"  src="images/05.jpg">

    </div>

    <div class="bg"></div>

    <div id=jsNav class=jsNav>  

        <a class="trigger imgSelected" href="javascript:void(0)">1</a>

        <a class="trigger" href="javascript:void(0)">2</a>

        <a class="trigger" href="javascript:void(0)">3</a>

        <a class="trigger" href="javascript:void(0)">4</a>

        <a class="trigger" href="javascript:void(0)">5</a>      

    </div>

</div>

</div>

</body>

</html>

css文件
/* CSS Document */
h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; }
table{border-collapse:collapse;border-spacing:0;}

a{color:#333;text-decoration:none;}
a:hover{color:#c00; text-decoration:underline;}
.area{ margin:20px auto; overflow:hidden; position:relative; cursor:pointer;}
.js{POSITION: relative; WIDTH:625px; HEIGHT: 315px;margin:0 auto;}
.prevBtn{HEIGHT:47px; WIDTH: 32px; display:block; position:absolute; top:120px;}
.prevBtn:hover{BACKGROUND:url(../images/btn01.jpg) no-repeat;display: block !important;border: 1px solid red;}
.nextBtn {HEIGHT:47px; WIDTH: 32px; display:block; position:absolute; right:0; top:120px;}
.nextBtn:hover{BACKGROUND:url(../images/btn02.jpg) no-repeat; display: block !important; border: 1px solid red;}
.imgSelected {BACKGROUND: url(../images/bg01.png) no-repeat;}
.bg{ width:100%; padding-top:1px; background:url(../images/bg01.png) no-repeat;_background:none;/IE6/
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="images/bg01.png");/IE6/
height:34px; left:0; FONT-WEIGHT: bold; bottom: 0px; position:absolute;}
.jsNav{ position:absolute; left:220px; bottom: 0px}
.jsNav a{width:40px; font-size:14px; margin-right:6px; display:inline; height:33px; line-height:33px; display:block;float:left; text-align:center; color:#fff;}
.jsNav a:hover{background:url(../images/bg01.gif) no-repeat;color: #FF1555; text-decoration:none;}
.jsNav .imgSelected { background:url(../images/bg01.gif) no-repeat;color: #FF1555;}
.qq{ z-index:200}

.box01 img:not(:first-child){
display: none;
}

.box01 img.active {
display: block !important;
}

面向对象轮播

猜你喜欢

热点阅读

面向对象 轮播

猜你喜欢

热点阅读

面向对象轮播