原生js封装轮播图
对于初学js的同学来说，轮播图还是一个难点，尤其是原生js封装轮播图代码，下面是我之前做的一个轮播图项目中封装好的一些代码，有需要的同学可以看一下，有什么不懂的可以看注释，注释看不懂的可以直接私信我
slide.js
/*
* 轮播图
*/
function Slide(elem, ms, d, ind){
this.el = elem;
this.w = parseInt(getStyle(elem, "width"));
this.h = parseInt(getStyle(elem, "height"));
var a = this.el.children;
this.ul = a[0];
this.ol = a[1];
this.lBtn = a[2];
this.rBtn = a[3];
this.olspan = this.ol.getElementsByTagName("span");
this.l = this.olspan.length;
this.ul.style.width = this.w*(this.l+1)+"px"; // ul的宽度
this.lBtn.style.top = this.rBtn.style.top = (this.h-this.rBtn.offsetHeight)/2+"px";
this.ms = ms; // 每隔多久执行一次滚动
this.d = d; // 轮播时方向
this.ul.innerHTML += this.ul.children[0].outerHTML; //将第一张图片复制到最后一个位置上
var that = this;
this.now = ind;
that.prev = -that.now*that.w;
this.run = function(){
var i=0, l=that.l, btns=that.olspan, btn;
for( ; i<l; i++){
btn = btns[i];
btn.i = i;
btn.onclick = function(){
that.now = this.i;
that.tab();
}
}
that.timer = setInterval(that.next, that.ms);
that.el.onmouseover = that.over;
that.el.onmouseout = that.out;
that.lBtn.onclick = function(){
that.now--;
that.d = -1;
that.tab();
}
that.rBtn.onclick = function(){
that.now++;
that.d = 1;
that.tab();
}
that.lBtn.onmousedown = that.rBtn.onmousedown = function(){
return false;
}
}
this.tab = function(){
that.ul.style.left = that.prev+"px"; // 每次运动时，先瞬间定位到上一次的目标值，然后再执行本次运动
if( that.now == that.l ){
that.prev = 0;
startMove(that.ul, {"left":-that.now*that.w}, function(){
that.ul.style.left = "0px";
});
that.now = 0;
}else if( that.now == -1 ){
that.now = that.l-1;
that.ul.style.left = -that.l*that.w+"px";
that.prev = -that.now*that.w;
startMove(that.ul, {"left":that.prev});
}else{
that.prev = -that.now*that.w;
startMove(that.ul, {"left":that.prev});
}
// 样式
for( var i=0,l=that.l; i<l; i++ ){
that.olspan[i].className = "";
}
that.olspan[that.now].className = "selected";
}
this.next = function(){
that.now += that.d;
that.tab();
}
this.over = function(){
clearInterval(that.timer);
startMove(that.lBtn, {"opacity":100});
startMove(that.rBtn, {"opacity":100});
}
this.out = function(){
that.timer = setInterval(that.next, that.ms);
startMove(that.lBtn, {"opacity":0});
startMove(that.rBtn, {"opacity":0});
}
this.tab();
this.run();
}
startMove.js(运动函数)
/*
* 运动函数
* 参数：
* elem 指操作的元素
* obj 指操作的元素节点上的css属性及它的目标值
* attr 指操作的元素节点上的css属性
* target 指操作的元素节点上的css属性的目标值
* fn 指运动函数执行完，执行哪一个函数
*/
function startMove(elem, obj, fn){
// 清除定时器
clearInterval(elem.timer);
// 多属性同时运动时，是否每一个属性都到了目标值
// 开启定时器
elem.timer = setInterval(function(){
var flag = true; // 默认时认为到了目标值
// 支持多属性同时运动
for( var attr in obj ){
// 目标值
var target = obj[attr];
// 判断属性是否为透明度
var v; // 获取当前值
if( attr == "opacity" ){
v = getStyle(elem, attr);
v = Math.round(v*100);
}else{
v = parseInt(getStyle(elem, attr));
}
//console.log(v);
// 目标值与当前值的间距
var dist = target - v;
// 求步长
var speed = dist/6;
// 步长取整数
if(speed>0){
speed = Math.ceil(speed);
}else{
speed = Math.floor(speed);
}
// 更新
if( attr == "opacity" ){
elem.style.opacity = (v+speed)/100;
if(/MSIE/.test(navigator.userAgent)){// 如果当前浏览器为IE，则执行兼容代码
elem.style.filter = "alpha(opacity="+(v+speed)+")"; // 兼容低版本IE
}
}else{
elem.style[attr] = v+speed+"px";
}
// 如果没有到达目标值
if(v!=target){
flag = false;
}
//console.log(0);
}
// 如果已经到达目标值，则停止定时器
if( flag ){
clearInterval(elem.timer);
if( fn ){ // 如果给定了第三个参数，则执行该函数
fn();
}
}
}, 50);
}
/*
* 获取行间样式
*/
function getStyle(elem, attr){
if( window.getComputedStyle ){
return getComputedStyle(elem, null)[attr];
}else{
return elem.currentStyle[attr];
}
}
接下来是一些简单的css代码
/*
* 轮播图
*/
.slide{
position: relative;
overflow: hidden;
}
.slide *{
margin: 0;
padding: 0;
}
.slide li{
float: left;
list-style: none;
}
.slide>ul{
position: absolute;
left: 0;
top: 0;
}
.slide>ul>li{
}
.slide>ol{
position: absolute;
right: 0;
bottom: 0;
}
.slide>ol>li{
padding: 10px;
}
.slide>ol>li>span{
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background: white;
cursor: pointer;
}
.slide .selected{
background: greenyellow;
}
.slide>p{
position: absolute;
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 25px;
border-radius: 15px;
background: white;
cursor: pointer;
opacity: 0;
}
.slide>p:hover{
background: greenyellow;
}
.slide>p:nth-child(3){
left: 10px;
}
.slide>p:nth-child(4){
right: 10px;
}
使用方法
<div id="div1" class="slide">
<ul>
<li><img src="img/001.jpg"/></li>
<li><img src="img/002.jpg"/></li>
<li><img src="img/003.jpg"/></li>
<li><img src="img/004.jpg"/></li>
</ul>
<ol>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ol>
<p><</p>
<p>></p>
</div>
接下来在script中直接new一个实例,new Slide(div1, 3000, 1, 1);就可以实现轮播效果
代码很简单，细心观察，你也是大神