html菜鸟教程轮播图自动播放,关于js实现图片轮播

大家好,我是一个大一的学生,最近想自学下前端的简单知识。我是个菜鸟,入门级都没达到的菜鸟。

最近在模仿一个网站,http://www.mizhe.com/ 我想实现这个网上首页的那种多个图片轮播的效果。

我在网上找到了其他实现这种效果的代码,但是跟这个网站上的实现方法好像都不一样?

麻烦各位前辈指导指导,这个网站的实现原理是什么样子的?

核心代码应该是这一部分吧?

this.switchImg=function(b,a,d)

{

this.currentImg=(a=!a)?(b+1)%this.realLen:Math.abs(b+this.realLen-1)%this.realLen;

this.switchType.call(this,a,d)

};

this.switchType=function(b,a)

{

this.switchFunc.call(this,b,a);

this.switchDot.call(this)

};

this.switchDot=function()

{

var b=this.options.dotList.children("li");

b.removeClass("hover-li");

$(b[this.currentImg]).addClass("hover-li")

};

this.autoRun=function()

{

var e=this;

b.inter=setInterval(function(){e.switchImg(e.currentImg,!1,!0)},this.options.switchMin)

};

this.switchType()

}

b.rollFunc=function(b,f)

{

var h=this.currentImg,a=0,d=this.options.unitWidth,c=this.options.switchSpeed;

f?0==h&&b?(a=this.realLen*d,this.largeBoxView.stop().animate({marginLeft:-a+"px"},c)):

h==this.realLen-1&&!b?(a=h*d,this.largeBoxView.css("margin-left",-(this.realLen*d)+"px"),this.largeBoxView.stop().animate({marginLeft:-a+"px"},c)):h<=this.realLen-1&&0<=h&&(a=h*d,1==h&&b&&this.largeBoxView.css("margin-left","0px"),this.largeBoxView.stop().animate({marginLeft:-a+"px"},c)):(a=h*d,this.largeBoxView.stop().animate({marginLeft:-a+"px"},c))

};

b.fadeFunc=function()

{

this.largeBoxView.find("a").hide();

$(this.largeBoxView.find("a")[this.currentImg]).show()

};

b.prototype={};

amsControl([26,27,28,29],function(e) {

e.success?(e={unitWidth:580,unitHeight:320,switchFunc:b.rollFunc,useArrow:!0,useDot:!0,switchMin:4E3,switchSpeed:300,itemView:$(".promo-largebox").find(".promo-item"),container:$(".promo-wrap")},(new b(e)).init(),f.call()):($(".promo-largebox .go-out-click").remove(),$(".repair").show(),$(".dot-list").hide())

}

)

可是,为什么我在本地模仿着实现以后,页面上不显示轮播的图片呢?我查看网页源码的时候,那些图片确实是可以打开的?

bVvFcz

谢谢大家啦。请多多指教。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值