<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
//CSS部分
<style>
*{margin:0;padding:0;}
ul,li{
list-style: none;
}
#banner{
width: 800px;
height: 400px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#banner>ul>li{
position: absolute;
width: 800px;
height: 400px;
opacity: 0;
}
#banner>ul>li:nth-child(1){
opacity: 1
}
#banner>.dir>a{
width: 80px;
height: 40px;
position: absolute;
text-align: center;
line-height: 40px;
text-decoration: none;
color: #fff;
background: rgba(0,0,0,.5);
top: 50%;
margin-top: -20px;
}
#banner>.dir>a:nth-child(2){
right: 0;
}
.btn{
position: absolute;
bottom: 10px;
width: 120px;
left: 50%;
margin-left: -60px;
}
.btn>a{
float: left;
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
margin-left: 10px;
}
.btn>.active{
background: #c33;
}
</style>
</head>
<body>
//HTML部分
<div id="banner">
//banner图
<ul class="ban_ul">
<li><img src="img1/1.png"></li>
<li><img src="img1/2.png"></li>
<li><img src="img1/3.png"></li>
<li><img src="img1/4.png"></li>
</ul>
//方向按钮
<div class="dir">
<a href="##"><</a>
<a href="##">></a>
</div>
//滑过按钮
<div class="btn">
<a href="##" class="active"></a>
<a href="##"></a>
<a href="##"></a>
<a href="##"></a>
</div>
</div>
//运动框架
<script src="move.js"></script>
<script>
//JavaScript
//获得元素对象
function SlideshowOpacity(container,options){
this.oBanner = document.getElementById(container);
this.aLi = this.oBanner.querySelectorAll(options.li)
this.oBtn = this.oBanner.querySelectorAll(options.btn)
this.aDir = this.oBanner.querySelectorAll(options.dir)
}
//直接调用版
// function SlideshowOpacity(){
// this.oBanner = document.getElementById("banner")
// this.aLi = document.querySelectorAll("#banner>ul>li");
// this.oBtn = document.querySelectorAll(".btn>a")
// this.aDir = document.querySelectorAll(".dir>a")
// this.iNow = 0;
// this.next = 0;
// this.timer = null;
// }
//调用方法
SlideshowOpacity.prototype.init = function(){
this.iNow = 0;
this.next = 0;
this.timer = null;
this.autoPlay()
this.toBanner()
this.toBtn()
this.toDir()
}
//自动轮播
SlideshowOpacity.prototype.autoPlay = function(){
var _this = this;
clearInterval(this.timer)
this.timer = setInterval(function(){
if(_this.next == _this.aLi.length-1){
_this.next = 0;
}else{
_this.next++;
}
_this.toImg()
},2000)
}
//图片透明度切换
//move为运动框架，见我的另一篇文章
SlideshowOpacity.prototype.toImg = function(){
move(this.aLi[this.iNow],{opacity:0})
move(this.aLi[this.next],{opacity:100})
for(var i in this.oBtn){
this.oBtn[i].className = ""
}
this.oBtn[this.next].className = "active"
this.iNow = this.next;
}
//滑过banner停止与开启轮播
SlideshowOpacity.prototype.toBanner = function(){
var _this = this;
this.oBanner.onmouseover = function(){
clearInterval(_this.timer)
}
this.oBanner.onmouseout = function(){
(_this.toImg())
_this.autoPlay()
}
}
//滑过选项卡切换banner
SlideshowOpacity.prototype.toBtn = function(){
for(var i=0;i<this.oBtn.length;i++){
this.oBtn[i].index = i;
var _this = this
this.oBtn[i].onmouseover = function(){
for(var j=0;j<_this.oBtn.length;j++){
_this.oBtn[j].className = ""
}
this.className = "active";
_this.next = this.index;
_this.toImg()
}
}
}
//点击方向键切换轮播
SlideshowOpacity.prototype.toDir = function(){
var _this = this
this.aDir[0].onmousedown = function(){
if(_this.next == 0){
_this.next = _this.aLi.length-1
}else{
_this.next--
}
_this.toImg()
}
this.aDir[1].onmousedown = function(){
if(_this.next == _this.aLi.length-1){
_this.next = 0
}else{
_this.next++
}
_this.toImg()
}
}
//直接调用版
// var demo1 = new SlideshowOpacity()
// demo1.init()
//封装版，如何传入参数
new SlideshowOpacity("banner",{
li:".ban_ul>li",
btn:".btn>a",
dir:".dir>a",
}).init()
</script>
