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

极客小俊

已于 2023-09-26 23:35:12 修改

阅读量912

点赞数

分类专栏：代码实例效果精选文章标签： javascript 产品展示效果 jquery 代码实例 html+css基础

于 2022-07-08 20:02:54 首次发布

本文链接：https://blog.csdn.net/windowsxp2018/article/details/125684810

版权

jQuery 3D旋转图片轮播前端开发 DOM操作

关键词由CSDN通过智能技术生成

代码实例效果精选专栏收录该内容

11 篇文章 2 订阅

订阅专栏

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

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

准备工作

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

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

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);
            }
        })
    })