js学习总结----轮播图之渐隐渐现版
YPE html>
标签：jpg ons pointer point ddc false default pen ati
具体代码如下:
‘;
i===0?str2+="":str2+="
"
}
}
bannerInner.innerHTMl = str;
bannerTip.innerHTML = str2;
}()
//3、图片的延迟加载
window.setTimeout(lazyImg,500)
function lazyImg(){
for(var i = 0,len = imgList.length;i){
~
function(i){
var curImg =
imgList[i];
var oImg =
new Image;
oImg.src = curImg.getAttribute(‘trueImg‘
);
oImg.onload =
function(){
curImg.src =
this.src;
curImg.style.display =
block;
//只对第一张处理
if(i===0
){
var curDiv =
curImg.parentNode;
curDiv.style.zIndex = 1
;
myAnimate(curDiv,{opacity:1},200
);
}
oImg =
null;
}
}(i)
}
}
//4、自动轮播
var interval = 3000,autoTimer =
null,step = 0
;
autoTimer =
window.setInterval(autoMove,interval);
function autoMove(){
//当已经把最后一张展示完成后(step等于最后一张的索引),我们应该展示第一张，我们让step = -1,这样再经过一次累加，step就变为0，来展示第一张
if(step === jsonData.length-1
){
step = -1
}
step++
;
setBanner();
}
//实现轮播图切换效果的代码
function setBanner(){
//1、让step索引对应的那个DIV的zIndex的值为1，其他的zIndex为0
for(
var i = 0,len = divList.length;i
){
var curDiv = divList[i];
if(i===step){
utils.css(curDiv,"zIndex",1)
//2、让当前的透明度从0变为1,当动画结束，我们需要让其他的div的透明度的值直接变为0
myAnimate(curDiv,{opacity:1},200,function(){
var curDivSib = utils.siblings(this);
for(var k = 0,len = curDivSib.length;k){
utils.css(curDivSib[k],‘opacity‘,0)
}
})
continue
}
utils.css(curDiv,"zIndex",0)
}
//实现焦点对其
for(i = 0,len = oLis.length;i){
var curLi = oLis[i];
i === step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");
}
}
//5、实现鼠标悬停停止自动轮播和离开在开启自动轮播
banner.onmouseover = function(){
window.clearInterval(autoTimer);
bannerLeft.style.display = bannerRight.style.display = "block"
}
banner.onmouseout = function(){
autoTimer = window.setInterval(autoMove,interval);
bannerLeft.style.display = bannerRight.style.display = "none"
}
//6、实现点击焦点切换
~function(){
for(var i = 0,len = oLis.length;i){
var curLi = oLis[i];
curLi.index = i;
curLi.onclick = function(){
step = this.index;
setBanner();
}
}
}()
//7、实现左右切换
bannerRight.onclick = autoMove;
bannerLeft.onclick = function(){
if(step === 0){
step = jsonData.length;
}
step--;
setBanner();
}
Document
js学习总结----轮播图之渐隐渐现版
标签：jpg ons pointer point ddc false default pen ati
原文地址：http://www.cnblogs.com/diasa-fly/p/7188671.html
评论
