居然可以用jQuery实现360度汽车产品3D旋转展示酷炫特效 使用你的小鼠标来试试吧

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

今天我们来看一个用jquery实现360度汽车产品3D旋转展示的效果，其实逻辑很简单, 就是让一堆图片转来转去就行了!😊😊

准备工作

1. 准备一个jquery库，这里我用的是jquery-1.11.3.js 没有的朋友自行官网下载!
2. 准备一堆汽车图片和按钮图片，并且把汽车图的名称改成有序的数值, 如下
   如图
   

好了准备工作做好了， 接下来不废话直接上代码

HTML结构 🏝️

<div id="box">

    <img src="img/1.png" id="img" title="" alt="" width="" height=""/>


    <div class="btn">
        <a href="javascript:;" class="prev" id="prev"></a>
        <a href="javascript:;" class="next" id="next"></a>
    </div>

</div>

CSS样式代码 🏠

*{
   
   
    margin: 0px;
    padding: 0px;
}

a{
   
   
    text-decoration: none;
}

body{
   
   
    font-family: '微软雅黑';
    background: #f9f7f6;
}

ul,ol{
   
   
    list-style: none;
}


#box{
   
   
    width: 1000px;
    height: 447px;
    margin: 50px auto;
    position: relative;
}

#box>.btn{
   
   
    width: 88px;
    height: 44px;
    position: absolute;
    bottom: 10px;
    left: calc(50% - 44px);
}

#box>.btn>a:nth-child(1), #box>.btn>a:nth-child(2){
   
   
    height: 44px;
    width: 44px;
    float: left;
}

#box>.btn>a:nth-child(1){
   
   
    background: url("img/arrows.png") no-repeat;
}

#box>.btn>a:nth-child(2){
   
   
    background: url("img/arrows.png") no-repeat -44px 0px;
}

jQuery 代码逻辑🚀

   $(function(){
   
   
        var i=0; //图片的数字名称
        var timer=null;
        var stop=1;

        function _fnLeft(){
   
   
            i++;
            if(i>=51){
   
   
                i=1;
            }
            $("#img").attr("src","img/"+i+".png");
        }

        function _fnRight(){
   
   
            i--;
            if(i<=1){
   
   
                i=51;
            }
            $("#img").attr("src","img/"+i+".png");
        }

        //当鼠标移动到next上的时候
        $("#next").hover(
            function(){
   
   
                console.log(stop);
                timer=setInterval(_fnLeft,50);
            },
            function(){
   
   
                stop=1;
                clearInterval(timer);
            }
        );

        //当鼠标移动到prev上的时候
        $("#prev").hover(
            function(){
   
   
                timer=setInterval(_fnRight,50);
            },
            function(){
   
   
                stop=1;
                clearInterval(timer);
            }
        );

        $("#next").click(function(){
   
   
            stop*=-1;
            if(stop==-1){
   
   
                clearInterval(timer);
            }else if(stop==1){
   
   
                timer=setInterval(_fnLeft,50);
            }
        })

        $("#prev").click(function(){
   
   
            stop*=-1;
            if(stop==-1){
   
   
                clearInterval(timer);
            }else if(stop==1){
   
   
                timer=setInterval(_fnRight,50);
            }
        })
    })

最终效果🌌

如图

怎么样 是不是很简单呢 ，赶紧试试吧! 😉😉😉 挺好玩的!