HTML code:
Copy Code code as follows:
<! DOCTYPE html>
<title></title>
<style>
*{padding:0;margin:0}
Ul{list-style:none}
. slider-focus{width:670px;height:240px;overflow:hidden;position:relative;margin:100px Auto}
. slider-focus. slider{width:3500px; position:absolute; left:0px; top:0px; height:240px}
. slider-focus. Slider Li{float:left;
. slider-focus. Btns{position:absolute; right:0px; bottom:5px}
. slider-focus. Btns li{width:18px;height:18px float:left; background: #fff; margin-right:5px; Cursor:pointer}
. Slider-focus. Btns li.cur{background: #f60}
</style>
<body>
<div class= "Slider-focus" >
<ul class= "Slider" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class= "Btns" >
<li class= "cur" ></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src= "Jquery-1.9.1.js" ></script>
<script src= "Slider.js" ></script>
</body>
Javasscript Code:
Copy Code code as follows:
function Sliderfocus (options) {
This.focus = Options.focus;
This.slider = Options.slider;
This.btns = Options.btns;
This.width = Options.width;
This.speed = Options.speed | | 800;
This.curindex = Options.curindex | | 0;
This.size = This.btns.size ();
This.init ();
This.timeout = null;
This.stoptemp = 1;
}
Sliderfocus.prototype = {
Init:function () {
This.auto ();
This.bind ();
},
Play:function () {
This.slider.stop (). Animate ({
Left:-this.curindex * This.width
},this.speed);
},
Auto:function () {
var that = this;
This.timeout = settimeout (function () {
if (that.stoptemp = = 0) {
Return
}else{
That.next ();
That.auto ();
}
},4000);
},
Prev:function () {
This.curindex =--this.curindex<0? This.size-1: This.curindex;
This.play ();
},
Next:function () {
This.curindex = ++this.curindex>this.size-1? 0:this.curindex;
Console.log (This.curindex)
This.play ();
},
Stop:function () {
this.stoptemp = 0;
},
Bind:function () {
var that = this;
This.focus.bind ("MouseOver", function () {
That.stop ();
}. Bind ("Mouseout", function () {
That.stoptemp = 1;
That.auto ();
});
This.letsgo ();
},
Letsgo:function () {
var that = this;
This.btns.bind ("click", Function () {
var index = $ (this). index ();
That.curindex = index;
That.play ();
});
}
};
New Sliderfocus ({
focus:$ (". Slider-focus"),
slider:$ (". Slider-focus. Slider"),
btns:$ (". Btns li"),
width:670
});
