js面向对象---无缝轮播图（附面向过程代码）
<html>
<head>
<meta charset="UTF-8">
<title>轮播图title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
#box{
width: 800px;
height: 500px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#imgs{
position: relative;
width: 800px;
height: 500px;
}
#imgs li{
float: left;
width: 800px;
height: 500px;
}
#dots{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -92px;
overflow: hidden;
}
#dots li{
float: left;
width: 15px;
height: 15px;
margin: 5px;
border: 1px solid #000;
border-radius: 10px;
cursor: pointer;
background: #e8e8e8;
}
#dots li.active{width: 45px;}
#pre,#next{
position: absolute;
top: 50%;
margin-top: -12px;
width: 22px;
height: 24px;
cursor: pointer;
}
#pre{
background: url(img/prev.png);
left: 20px;
}
#next{
background: url(img/next.png);
right: 20px;
}
style>
head>
<body>
<div id="box">
<ul id="imgs">
<li><img src="img/0003.jpg"/>li>
<li><img src="img/0002.jpg"/>li>
<li><img src="img/thumb_003.jpg"/>li>
<li><img src="img/0004.jpg"/>li>
<li><img src="img/0001.jpg"/>li>
ul>
<ul id="dots">
<li class="active">li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
<div id="pre">div>
<div id="next">div>
div>
body>
<script type="text/javascript">
window.onload = function(){
var t1 = new Lb("box");
t1.l(); //设置包含图片的ul宽度
t1.dot(); //点哪个圆,相对应的图片显示
t1.pre(); //向左
t1.next(); //向右
t1.auto(); //自动播放
t1.over(); //鼠标移入
t1.out() //鼠标移出
}
// 构造函数
function Lb(id){
oBox = document.getElementById(id);
this.oUl = oBox.getElementsByTagName("ul");
this.oImg = this.oUl[0];
this.oImg.innerHTML += this.oImg.innerHTML; //无缝轮播的关键
this.aImgList = this.oImg.getElementsByTagName("li");
this.oDot = this.oUl[1];
this.aDotList = this.oDot.getElementsByTagName("li");
this.oDiv = oBox.getElementsByTagName("div")
this.oPre = this.oDiv[0];
this.oNext = this.oDiv[1];
this.left = this.oImg.offsetLeft;
this.now = 0;
this.timer = null;
this.timer2 = null;
var _this = this;
// 向左
this.oPre.onclick = function(){
_this.pre(this);
}
//向右
this.oNext.onclick = function(){
_this.next(this);
}
//鼠标移入
oBox.onmouseover = function(){
_this.over();
}
//鼠标移出
oBox.onmouseout = function(){
_this.out();
}
}
//方法
//设置包含图片的ul宽度
Lb.prototype.l = function(){
return this.oImg.style.width = this.aImgList[0].offsetWidth * this.aImgList.length + "px";
}
//点哪个圆,相对应的图片显示,选项卡事件
Lb.prototype.dot = function(){
var _this = this;
for(var i=0;i<this.aDotList.length;i++){
this.aDotList[i].index = i;
this.aDotList[i].onclick = function(){
_this.now = this.index;
_this.tab();
}
}
}
Lb.prototype.tab = function(){
for(var i=0;i<this.aDotList.length;i++){
this.aDotList[i].className = "";
}
this.aDotList[this.now].className = "active";
this.oImg.style.left = -this.aImgList[0].offsetWidth * this.now +"px";
// this.move(-this.aImgList[0].offsetWidth * oBtn.index);
if(this.oImg.style.left <= -this.oImg.style.width/2){
this.oImg.style.left = 0;
}
}
//向左
Lb.prototype.pre = function(){
var _this = this;
_this.now--;
if(_this.now==-1){
_this.now =this.aDotList.length - 1;
}
_this.tab();
}
//向右
Lb.prototype.next = function(){
var _this = this;
_this.now++;
if(_this.now==this.aDotList.length){
_this.now = 0;
}
_this.tab();
}
//自动播放
Lb.prototype.auto = function(){
var _this = this;
_this.timer2 = setInterval(function(){
_this.now++;
_this.now = _this.now%_this.aDotList.length;
_this.tab();
},2000);
}
//鼠标移入
Lb.prototype.over = function(){
clearInterval(this.timer2);
}
//鼠标移出
Lb.prototype.out = function(){
this.auto();
}
script>
html>
面向过程代码
<html>
<head>
<meta charset="UTF-8">
<title>轮播图title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
#box{
width: 800px;
height: 500px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#imgs{
position: relative;
width: 800px;
height: 500px;
}
#imgs li{
float: left;
width: 800px;
height: 500px;
}
#dots{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -92px;
overflow: hidden;
}
#dots li{
float: left;
width: 15px;
height: 15px;
margin: 5px;
border: 1px solid #000;
border-radius: 10px;
cursor: pointer;
background: #e8e8e8;
}
#dots li.active{width: 45px;}
#pre,#next{
position: absolute;
top: 50%;
margin-top: -12px;
width: 22px;
height: 24px;
cursor: pointer;
}
#pre{
background: url(img/prev.png);
left: 20px;
}
#next{
background: url(img/next.png);
right: 20px;
}
style>
head>
<body>
<div id="box">
<ul id="imgs">
<li><img src="img/0003.jpg"/>li>
<li><img src="img/0002.jpg"/>li>
<li><img src="img/thumb_003.jpg"/>li>
<li><img src="img/0004.jpg"/>li>
<li><img src="img/0001.jpg"/>li>
ul>
<ul id="dots">
<li class="active">li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
<div id="pre">div>
<div id="next">div>
div>
body>
<script type="text/javascript">
var oBox = document.getElementById("box");
var oImg = document.getElementById("imgs");
oImg.innerHTML += oImg.innerHTML; //无缝轮播的关键
var aImgList = oImg.getElementsByTagName("li");
var oDot = document.getElementById("dots");
var aDotList = oDot.getElementsByTagName("li");
var oPre = document.getElementById("pre");
var oNext = document.getElementById("next");
var now = 0;
var timer = null;
var timer2 = null;
//设置包含图片的ul宽度
oImg.style.width = aImgList[0].offsetWidth * aImgList.length + "px";
//缓冲运动
function Move(targ){
timer = setInterval(function(){
var left = oImg.offsetLeft;
var speed = (targ - left)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(speed != 0){
oImg.style.left = left + speed + "px";
}
else{
clearInterval(timer);
}
},1000);
}
function Tab(){
for(var i=0;i"" ;
}
aDotList[now].className = "active";
Move(-aImgList[0].offsetWidth * now);
if(oImg.style.left <= -oImg.style.width/2){
oImg.style.left = 0;
}
}
//点哪个圆,相对应的图片显示
for(var i=0;ifunction(){
now = this.index;
Tab();
}
}
//向左
oPre.onclick = function(){
now--;
if(now==-1){
now = aDotList.length - 1;
}
Tab();
}
//向右
oNext.onclick = function(){
now++;
if(now == aDotList.length){
now = 0;
}
Tab();
}
//自动播放
function auto(){
timer2 = setInterval(function(){
now++;
now = now%aDotList.length;
Tab();
},2000);
}
auto();
oBox.onmouseover = function(){
clearInterval(timer2);
}
oBox.onmouseout = function(){
auto()
}
script>
html>