素材网 素材网

jQuery点击按钮切换图片效果代码

下载资源()次

阅读次数()次

发布时间:2017-10-27

jQuery点击按钮切换图片效果代码
分享到:

用法简介:

来源:xw素材网


jQuery点击按钮切换图片效果代码。
文件引用:

<script type="text/javascript">

//影像力换一换

var getyxl = jQuery('#picLBxxl li').eq(0).width();

(function($){

    var arartta= window['arartta'] = function(o){

        return new das(o);

    }

    das = function(o){

        this.obj = $('#'+o.obj);

        this.bnt = $('#'+o.bnt);

        this.showLi = this.obj.find('li');

        this.current = 0;

        this.myTimersc = '';

        this.init()

    }

    das.prototype = {

        chgPic:function(n){

            var _this = this;

            for (var i = 0,l= _this.showLi.length; i < l; i++) {

                _this.showLi.eq(i).find(".pic").find('img').eq(n).attr('src',_this.showLi.eq(i).find(".pic").find('img').eq(n).attr('nsrc'));


                $('#picLBxxl dl:not(:animated)').animate({left: -(n * getyxl) + "px"}, {easing:"easeInOutExpo"}, 1500, function(){});

            }

        },

        rotate:function(){

            var _this = this;

            clearInterval(_this.myTimersc);

            _this.bnt.children().css({

                    '-webkit-transform':'rotate(0deg)',

                    '-moz-transform':'rotate(0deg)'

            });

            var tt = 0;

            var getBnts = _this.bnt.children();

            _this.myTimersc = setInterval(function(){

                tt += 10;

                if (tt >= 180) {

                    clearInterval(_this.myTimersc);

                }

                rotateElement(getBnts,tt);

            },25)

        },

        init:function(){

            var _this = this;

            this.bnt.bind("click",function(){

                _this.current++;

                if (_this.current > 2) {

                    _this.current = 0 ;

                }

                _this.chgPic(_this.current);

                _this.rotate();


            })

            this.bnt.mouseenter(function () {

                _this.rotate();

            });


        }

    }

})(jQuery)


arartta({

    bnt:'xxlChg',

    obj:'picLBxxl'

});


function rotateElement(element,angle){

    var rotate = 'rotate('+angle+'deg)';

    if(element.css('MozTransform')!=undefined)

        element.css('MozTransform',rotate);

    else if(element.css('WebkitTransform')!=undefined)

        element.css('WebkitTransform',rotate);

}

</script>


<!--鼠标悬停二维码代码-->

<script type="text/javascript">

var istrueCsr = false;

$("#picLBxxl .ftBox .name").hover(function(){

if (!istrueCsr) {

    $(this).siblings(".qr").fadeIn("slow");

    istrueCsr = true;

}

}, function(){

    $(this).siblings(".qr").fadeOut("slow");

    setTimeout(function(){istrueCsr = false},1000)

});

</script>



   

相关标签:

上一篇:jquery缩略图的幻灯片代码 下一篇:已经是最后一篇数据

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。