html====
<div id="banner">
<div id="left" class="left"><span></span></div>
<div id="right" class="right"><span></span></div>
<ul class="pic">
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
</ul>
<div class="dot">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
css=====
*{
margin: 0;
padding: 0;
}
li{list-style: none}
#banner {
width: 600px;
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
#banner .left {
width: 60px;
height: inherit;
position: absolute;
left: 0;
z-index: 3;
opacity: 0.3;
}
#banner .left span {
width: 60px;
height: 70px;
position: absolute;
top: 150px;
left: 0;
display: block;
background: url(../images/arrow.jpg) no-repeat 0 -10px;
z-index: 4;
}
#banner .right {
width: 60px;
height: inherit;
position: absolute;
right: 0;
z-index: 3;
opacity: 0.3;
filter: alpha(opacity=30);
}
#banner .right span {
width: 60px;
height: 70px;
position: absolute;
top: 150px;
right: 0;
display: block;
background: url(../images/arrow.jpg) no-repeat 0 -95px;
}
#banner .pic {
height: 300px;
position: absolute;
left: 0;
z-index: 2;
}
#banner .pic li{
width: 600px;
height: 300px;
float: left;
}
#banner .dot {
position: absolute;
bottom: 0px;
left: 280px;
width: 100px;
height: 20px;
z-index: 3;
}
#banner .dot span {
margin-left: 15px;
border-radius: 50%;
width: 10px;
height: 10px;
display: block;
float: left;
background:#ccc;
}
#banner .dot span.active{
background: red;
}
js========
(function () {
var ulpic=document.getElementsByTagName('ul')[0];
var lipic=ulpic.getElementsByTagName('li');
ulpic.style.width=parseInt(css(lipic[0],'width'))*lipic.length+'px';
var dot=document.getElementsByClassName('dot')[0];
var span=dot.getElementsByTagName('span');
var left=document.getElementById('left');
var right=document.getElementById('right');
var iNow=0;
var timer=null;
left.onmouseover=function(){
fade(this,100);
}
left.onmouseout=function(){
fade(this,30);
}
right.onmouseover=function(){
fade(this,100);
}
right.onmouseout=function(){
fade(this,30);
}
left.onclick=function(){
iNow=(iNow <= 0)?2:--iNow;
banner();
}
right.onclick=function(){
iNow=(iNow >=2)?0:++iNow;
banner();
}
for(var i= 0,len=span.length;i<len;i++){
span[i].index=i;
span[i].onclick=function(){
iNow=this.index;
banner();
}
}
function move(obj,json) {
obj.timer&& clearInterval(obj.timer);
obj.timer=setInterval(function () {
var stop=true;
for(var i in json){
var tar=json[i];
var cur=parseInt(css(obj,i));
var speed=(tar-cur)/7;
speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
if(i=='zIndex'){
obj.style[i]=tar;
} else{
if(cur!=tar){
stop=false;
obj.style[i]=cur+speed+'px';
}
}
}
if(stop){
clearInterval(obj.timer);
obj.timer=null;
}
},40);
}
function fade(obj,tar){
obj.timer&& clearInterval(obj.timer);
obj.timer=setInterval(function () {
var cur=css(obj,'opacity')*100;
var speed=(tar-cur)/7;
if(cur!=tar){
obj.style.opacity=(cur+speed)/100;
obj.style.filter='alpha(opacity='+(cur+speed)+')';
}else{
clearInterval(obj.timer);
obj.timer=null;
}
},50)
}
function css(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,false)[attr];
}else{
return obj.currentStyle[attr];
}
}
function banner(){
move(ulpic,{'left':-iNow*parseInt(css(lipic[0],'width'))});
for(var i= 0;i<span.length;i++){
span[i].className=span[i].className.replace(/active/g,'');
}
span[iNow].className+=' '+'active';
}
setInterval(function () {
iNow=(iNow>=2)?0:++iNow;
banner();
},3000)
})()
基于JQ的调用参数轮播
function Banner(config){
this.container=$(config.container);
this.config=config;
var c=config.container;
this.prev=$(c+config.prev);
this.next=$(c+config.next);
this.pic=$(c+config.pic);
this.picList=$(c+config.picList);
this.picWidth=config.picWidth;
this.btn=$(c+config.btn);
this.btnList=$(c+config.btnList);
this.index=0;
this.timer=null;
this.auto=config.auto;
this.interval=config.interval;
this.init();
}
/*click next button*/
Banner.prototype.nextMove= function () {
var self=this;
if(self.index==self.btnList.length-1){
if(!self.pic.is(':animated')){
self.index=0;
this.showBtn(0);
this.pic.animate({
"left":-self.picWidth*4+'px'
}, function () {
self.pic.css("left",-self.picWidth+'px');
})
}
}else{
if(!self.pic.is(':animated')){
self.index++;
self.showBtn(self.index);
self.pic.animate({
"left":-(self.index+1)*self.picWidth+'px'
})
}
}
};
/*click prev button*/
Banner.prototype.prevMove = function () {
var self = this;
if (self.index == 0) {
if (!self.pic.is(':animated')) {
self.index = self.btnList.length - 1;
self.showBtn(self.btnList.length - 1);
self.pic.animate({
"left": 0
}, function () {
self.pic.css("left", -self.picWidth*self.btnList.length + 'px');
})
}
} else {
if (!self.pic.is(':animated')){
console.log(self.index);
self.index--;
self.showBtn(self.index);
self.pic.animate({"left": -(self.index+1) * self.picWidth + 'px'});
}
}
}
/*show buttons*/
Banner.prototype.showBtn = function (index) {
this.btnList.removeClass('act');
this.btnList.eq(index).addClass('act');
};
/*autoplay */
Banner.prototype.autoPlay= function () {
var self=this;
self.timer = setInterval(function () {
self.nextMove();
}, self.interval);
};
/*init part*/
Banner.prototype.init= function () {
/*clone part*/
var firstPic=this.picList.eq(0).clone(true,true);
var lastPic=this.picList.eq(this.picList.length-1).clone(true,true);
firstPic.appendTo(this.pic);
lastPic.prependTo(this.pic);
this.pic.css("left",-this.picWidth+'px');
/* prev & next clickEvent*/
var self=this;
this.prev.on('click', function () {
self.prevMove();
});
this.next.on('click', function () {
self.nextMove();
});
/*autoPlay*/
if(this.auto){
this.autoPlay();
}
/*stopPlay*/
self.pic.on('mouseover',function(){
clearInterval(self.timer);
}).on('mouseout', function () {
self.autoPlay();
})
};
/*创建一个轮播*/
new Banner({
"container": ".banner",
"prev": " .prev",
"next": " .next",
"pic": " .pic",
"picWidth": 1000,
"picList": " .pic li",
"btn": " .btn",
"btnList": " .btn li",
"interval":3000,
"auto":true
});
css
*{margin:0;padding:0;}
li{list-style:none;}
.banner{position:relative;width:1000px;height:400px;margin:0 auto;overflow:hidden;}
.banner .arrow{position:absolute;z-index:2;top:45%;width:40px;height:40px;background:#000;opacity:0.5;filter:alpha(opacity=50);}
.banner .prev{left:0;}
.banner .next{right:0;}
.banner .pic{position:absolute;z-index:1;left:0;top:0;width:9999px;height:400px;}
.banner .pic li{float:left;width:1000px;height:400px;}
.banner .btn{position:absolute;z-index:2;bottom:10px;left:45%;}
.banner .btn li{float:left;width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin-left:10px;text-indent:-9999px;background:grey;}
.banner .btn .act{background:red;}
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/demo.css"/>
</head>
<body>
<div class="banner">
<div class="prev arrow"></div>
<div class="next arrow"></div>
<ul class="pic">
<li><img width="1000" height="400" src="images/ad2.png" alt=""/></li>
<li><img width="1000" height="400" src="images/ad3.png" alt=""/></li>
<li><img width="1000" height="400" src="images/ad4.png" alt=""/></li>
</ul>
<ul class="btn">
<li class="act">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/demo.js"></script>
