js轮薄涂封装

Question

var img1=document.querySelectorAll(".ppt1 img");
var span1=document.querySelectorAll(".radius1 span");
var img2=document.querySelectorAll(".ppt2 img");
var span2=document.querySelectorAll(".radius2 span");
var img3=document.querySelectorAll(".ppt3 img");
var span3=document.querySelectorAll(".radius3 span");
var img4=document.querySelectorAll(".ppt4 img");
var span4=document.querySelectorAll(".radius4 span");function lunbo(img,span){
function ppt(index){
for(i=0;i<img.length;i++){
span[i].index=i;
img[i].index=i;
img[i].style.opacity = '0';
img[i].style.zIndex=100-i;
}
img[index].style.opacity='1';
}
ppt(0);
var num=1;
function show(){
if(num==img.length){
num=0;
}
ppt(num);
num++;
console.log(num);
}
var run=setInterval('show()',2000);
for(i=0;i<span.length;i++){
span[i].onmouseenter=function(){
clearInterval(run);
num=this.index;
ppt(num);
run=setInterval('show()',2000);
}
}
}
lunbo(img1,span1);

Answer 1

function Lunbo(options){
    this.options = $.extend({},{
imgs:null,
        spans:null
    },options);
    this.imgs= $(this.options.imgs);
    this.spans= $(this.options.spans);
}Lunbo.prototype.ppt = function(){
    console.log(this.imgs, this.spans);
}var myLunbo = new Lunbo({
    imgs:".ppt img",
    spans:".radius span"
})

Answer 2

如果你不想研究，想使用现成的，你可以用别人家的：
http://www.swiper.com.cn/usage/index.html

Answer 3

我不想用swiper想自己弄明白，您给我说详细点，我想自己看懂