首页 > 关于js实现图片轮播

关于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())
        }
    )

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

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


如果你只是想实现效果,可以直接用插件,很方便,有很多。要是学东西的话,还是得好好学js,原理懂了就很容易做了。你这个效果实现不了,可能是没引入js库,或代码不全。你可以打开浏览器的调试工具查看,这部分内容网上有许多教程。


不知你查看源代码可以打开是什么意思,你可以把你的代码放在jsfiddle上,这样别人才能看到问题。

轮播图的实现归根到底连续放一长串图片,然后显示一张,隐藏掉其他,然后通过移动位置改变显示的图片。无论用CSS实现还是JS实现,还是加些什么效果,原理都类似。

你用的这个例子都一样,你可以看看F12里,它banner随着图片切换改变的都只是margin-left,而且里面有三张照片,两张相同的,这就是最基础的轮播图实现方法。


原理基本很简单的,加上现在CSS的transition过度效果,可以直接用原生js写出jquery.animate的动画效果;原理基本都是左右移动dom元素,操作css,进栈出栈实现隐藏与显示;
自己写原生js的话兼容性很蛋疼,各种浏览器会烦死的,但是这必须面对的问题。
我写过两个类似的图片切换效果,需要研究的话可以发你。

【热门文章】
【热门文章】