HTML部分
注：HTML内只需要在需要轮播图的地方写：
<div id="slide1" class="container">
<ul>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
</ul>
</div>
CSS部分
*{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
#slide1.container{
width: 500px;
height: 300px;
margin: 50px auto;
position: relative;
}
#slide1 #msg{
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 10px;
position: absolute;
bottom: 0px;
left: 0;
color: white;
font-size: 16px;
background: rgba(0,0,0,.8);
cursor: pointer;
z-index: 1;
}
#slide1 a {
display: block;
}
#slide1 ul,#slide1 li,#slide1 a,#slide1 img{
width: 100%;
height: 100%;
}
#slide1 ol{
position: absolute;
bottom: 10px;
left: 50%;
-webkit-transform: translateX(-50%);
background: rgba(255,255,255,.6);
border-radius: 7px;
padding: 3px;
z-index: 2;
}
#slide1 ol li{
background: red;
float: left;
width: 8px;
height: 8px;
margin-left: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin-right: 7px;
}
#slide1 span{
width: 30px;
height: 45px;
line-height: 45px;
font-size: 40px;
color: white;
background: rgba(255,255,255,.3);
cursor: pointer;
position: absolute;
font-weight: bold;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transition: all 1s ease 0s;
}
#slide1 #rtBtn{
right: 0;
left: auto;
}
#slide1 span:hover{
-webkit-transform: rotateY(40deg) translateX(-3px) scale(1.2);
}
JS部分
//获取指定id的对象
function $(id){
return document.getElementById(id);
}
//获取指定元素名称的对象集
function $get(containerId,tagName){
if(typeof containerId == "string" && $(containerId)){
return $(containerId).getElementsByTagName(tagName);
}
else if(typeof containerId == "object"){
return containerId.getElementsByTagName(tagName);
}else{
throw("你写的第一个参数不是一个ID");
}
}
//创建元素对象
function $create(TagName,attr){
var dom = document.createElement(TagName);
for(var p in attr){
dom[p] = attr[p];
}
return dom;
}
//创建构造函数
function Slider(containerId){
//获取页面中的大盒子
this.containerId = $(containerId);
//获取ul中的li
this.ullis = $get($get(containerId,"ul")[0],"li");
//获取ullis的数组长度
this.num = this.ullis.length;
//创建并获取ol中所有的li
this.ollis = this.createList();
//指定索引为1
this.indexA = 1;
this.timer;
//调用init函数
this.init(this.indexA);
//获取左按钮
this.ltBtn = $("ltBtn");
//获取右按钮
this.rtBtn = $("rtBtn");
//调用mouseenter方法
this.mouseenter();
//调用自动轮播
this.autoplay(this.indexA);
}
//创建ol
Slider.prototype.createList = function(){
//创建ol标签 相当于document.createElement("ol");
var ol = $create("ol");
//用来放置创建的所有li标签
var lis = [];
//创建ol中的li
for(var i = 0; i < this.num; i ++){
//创建li标签
var li = $create("li");
//将li标签添加到ol中
ol.appendChild(li);
//将li元素加到lis数组中
lis.push(li);
}
//将ol添加到指定的盒子中
this.containerId.appendChild(ol);
/**
* 设置左span
*/
//创建span元素
var spanleft = $create("span");
//给span元素中添加内容<
spanleft.innerHTML = "<";
//给span添加id属性
spanleft.id = "ltBtn";
//将左span添加到指定的盒子中
this.containerId.appendChild(spanleft);
/**
* 设置右span
*/
//创建右span元素
var spanright = $create("span");
//给右spanf元素添加内容>
spanright.innerHTML = ">";
//给右span添加id属性
spanright.id = "rtBtn";
//将右span添加到指定的盒子中
this.containerId.appendChild(spanright);
/**
* 设置显示文字的div
*/
//创建div元素
var div = $create("div");
//设置div的id属性
div.id = "msg";
//将div添加到指定的盒子中
this.containerId.appendChild(div);
return lis;
}
//初始化方法
Slider.prototype.init = function(index){
this.moveto(index);
}
Slider.prototype.mouseenter = function(){
//记录当前this对象
var that = this;
for(var i = 0; i < this.num; i ++){
//记录当前ol中li的下标
this.ollis[i].index = i;
//给ol中所有li元素添加鼠标移入事件
this.ollis[i].onmouseenter = function(){
//调用moveto方法
that.moveto(this.index);
}
}
//给左按钮添加点击事件
this.ltBtn.onclick = function(){
//当索引值大于0时
if(that.indexA > 0){
that.indexA --;
that.moveto(that.indexA);
}else{
that.indexA = that.num - 1;
that.moveto(that.indexA);
}
}
//给右按钮添加点击事件
this.rtBtn.onclick = function(){
if(that.indexA < that.num - 1){
that.indexA ++;
that.moveto(that.indexA);
}else{
that.indexA = 0;
that.moveto(that.indexA);
}
}
}
Slider.prototype.moveto = function(index){
for(var i = 0;i < this.num; i ++){
//将ul中的li元素全部隐藏
this.ullis[i].style.display = "none";
//ol中的li元素全部设置背景为红色
this.ollis[i].style.backgroundColor = "red";
}
//ul中当前的li元素display为block
this.ullis[index].style.display = "block";
//ol中当前的li元素背景为蓝色
this.ollis[index].style.backgroundColor = "blue";
//给div中的添加内容为图片的alt属性值
$("msg").innerHTML = this.ullis[index].firstChild.firstChild.alt;
}
//自动轮播
Slider.prototype.autoplay = function(indexA){
//记录当前this对象
var that = this;
//设置计时器
that.timer = setInterval(function(){
//让索引值产生循环
indexA %= that.num;
//调用moveto方法
that.moveto(indexA);
indexA ++;
},3000);
//当鼠标移入大Div时，停止计时器
that.containerId.onmouseenter = function(){
clearInterval(that.timer);
console.info(that.containerId);
}
//当鼠标移出时，开始自动轮播
that.containerId.onmouseleave = function(){
that.autoplay(indexA);
}
}
new Slider("slide1");
网友评论