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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>帶左右箭頭切換jquery焦點幻燈片代碼</title>
<LINK rel=stylesheet type=text/css href="css/slider.css">
<SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/demo.js"></SCRIPT>
</head>
<script type="text/javascript">
$(document).ready(function(){
$(".area").hover(function(){
$(this).find(".qq").show(100);}
,function(){
$(this).find(".qq").hide(100);
});
var mySlider = new Slider(".box01");
});
</script>
<body>
<div class="area">
<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. src="images/01.jpg">
<img onClick="location. src="images/02.jpg">
<img onClick="location. src="images/03.jpg">
<img onClick="location. src="images/04.jpg">
<img onClick="location. 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;
}
