使用html+css+jquery实现3D轮播图

这篇具有很好参考价值的文章主要介绍了使用html+css+jquery实现3D轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

还是先来看看效果图:

html 3d环形轮播图,jquery,html,css

 通过效果图我们先理一下思路:

首先就是需要几张图片,但只有一张是显示在我们眼前的

第二步:把一张图片分成几等份,这样点击转换的时候就会分开转

第三步:就是实现点击按钮切换下一张。

HTML部分

HTML部分首先我们需要一个盒子显示图片,然后在盒子里装入图片,你想装几张图片就可以写几个li,除了图片我们还需要一个按钮来点击。

一个li的图片效果如图所示:

html 3d环形轮播图,jquery,html,css

div是当你点击下一张的时候一个div代表li里的一张图片

 代码如下:

 <div class="box">
            <ul>
                <!-- 一个li代表一张图片的四分之一 -->
                <li>
                    <!-- 一个div代表一张图片 -->
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
            </ul>
        </div>
        <!-- 按钮 -->
        <input type="button" value="下一张" class="btn">

CSS部分

css部分就是设置样式了,首先就是先给盒子一个宽高,盒子是装显示一张图片的,接下来就是li了,给li设置绝对定位,不然图片不会对齐的。

<style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            /* 给盒子设置宽高,用于显示一张图片的 */
            .box{
                position: relative;
                width: 600px;
                height: 360px;
                margin: 80px auto;
                border: 1px solid;
            }
            .box ul li{
                position: absolute;
                top: 0;
                width: 150px;
                height: 360px;
                /* 让转换的子元素位于3D转换空间中 */
                transform-style: preserve-3d;
                perspective: 50000px;
                /* 过渡效果 */
                transition: all 1s ease 0s;
            }
            /*  设置li的左边距和延迟时间*/
            .box ul li:nth-child(1){
                left: 0;
                transition-delay: 0s;
            }
            .box ul li:nth-child(2){
                left: 150px;
                transition-delay: 0.1s;
            }
            .box ul li:nth-child(3){
                left: 300px;
                transition-delay: 0.2s;
            }
            .box ul li:nth-child(4){
                left: 450px;
                transition-delay: 0.3s;
            }
            /* 设置div */
            .box ul li div{
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                /* 图片大小 */
                background-size: 600px 360px;
            }
            /* 设置图片 旋转一次90度*/
            .box ul li div:nth-child(1){
                background-image: url(./img/ruili_img3.jpg);
                transform: rotateX(0deg) translateZ(180px);
            }
            .box ul li div:nth-child(2){
                background-image: url(./img/ruili_img5.jpg);
                transform: rotateX(90deg) translateZ(180px);
            }
            .box ul li div:nth-child(3){
                background-image: url(./img/ruili_img6.jpg);
                transform: rotateX(180deg) translateZ(180px);
            }
            .box ul li div:nth-child(4){
                background-image: url(./img/ruili_img7.jpg);
                transform: rotateX(270deg) translateZ(180px);
            }
            /*  
                background-position:设置或检索对象的背景图像的位置,必须要先制定background-image属性
                一个代表横坐标,一个代表纵坐标
             */
            .box ul li:nth-child(1) div{
                background-position: 0 0 ;
            }
            .box ul li:nth-child(2) div{
                background-position: -150px 0 ;
            }
            .box ul li:nth-child(3) div{
                background-position: -300px 0 ;
            }
            .box ul li:nth-child(4) div{
                background-position: -450px 0 ;
            }
            /* 设置按钮 */
            .btn{
                display: block;
                margin: 0 auto;
            }
        </style>

Jquery部分

这里需要注意的是,如果你不设置一个开过和定时器,当你点击下一张时点击一次没问题,但是连续点击就会出现一点bug,所以我加了一个开关思想,只有一张图片完整的呈现在眼前后,下一张图片才能出来。

 <script src="./js/jquery-1.11.3.js"></script>
 <script>
        var btn = $('.btn')
        var lis = $('.box ul li')
        // 角度
        var deg = 0
        // 开关
        var lock = false
        // 按钮点击事件
        btn.click(function(){
        if(lock) return
        lock = true
        // 点击一次角度-90度
        deg -= 90
         // li的样式改变
        lis.css({
           "transform":"rotateX(" + deg + "deg)"
       })
        // 设置延时定时器            
       var timeout = (1 + 0.1 * lis.length) * 1000
       setTimeout(function(){
             lock = false
         },timeout)
     })
  </script>

整体代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>轮播图</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            /* 给盒子设置宽高,用于显示一张图片的 */
            .box{
                position: relative;
                width: 600px;
                height: 360px;
                margin: 80px auto;
                border: 1px solid;
            }
            .box ul li{
                position: absolute;
                top: 0;
                width: 150px;
                height: 360px;
                /* 让转换的子元素位于3D转换空间中 */
                transform-style: preserve-3d;
                perspective: 50000px;
                /* 过渡效果 */
                transition: all 1s ease 0s;
            }
            /*  设置li的左边距和延迟时间*/
            .box ul li:nth-child(1){
                left: 0;
                transition-delay: 0s;
            }
            .box ul li:nth-child(2){
                left: 150px;
                transition-delay: 0.1s;
            }
            .box ul li:nth-child(3){
                left: 300px;
                transition-delay: 0.2s;
            }
            .box ul li:nth-child(4){
                left: 450px;
                transition-delay: 0.3s;
            }
            /* 设置div */
            .box ul li div{
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                /* 图片大小 */
                background-size: 600px 360px;
            }
            /* 设置图片 旋转一次90度*/
            .box ul li div:nth-child(1){
                background-image: url(./img/ruili_img3.jpg);
                transform: rotateX(0deg) translateZ(180px);
            }
            .box ul li div:nth-child(2){
                background-image: url(./img/ruili_img5.jpg);
                transform: rotateX(90deg) translateZ(180px);
            }
            .box ul li div:nth-child(3){
                background-image: url(./img/ruili_img6.jpg);
                transform: rotateX(180deg) translateZ(180px);
            }
            .box ul li div:nth-child(4){
                background-image: url(./img/ruili_img7.jpg);
                transform: rotateX(270deg) translateZ(180px);
            }
            /*  
                background-position:设置或检索对象的背景图像的位置,必须要先制定background-image属性
                一个代表横坐标,一个代表纵坐标
             */
            .box ul li:nth-child(1) div{
                background-position: 0 0 ;
            }
            .box ul li:nth-child(2) div{
                background-position: -150px 0 ;
            }
            .box ul li:nth-child(3) div{
                background-position: -300px 0 ;
            }
            .box ul li:nth-child(4) div{
                background-position: -450px 0 ;
            }
            /* 设置按钮 */
            .btn{
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <!-- 一个li代表一张图片的四分之一 -->
                <li>
                    <!-- 一个div代表一张图片 -->
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
            </ul>
        </div>
        <!-- 按钮 -->
        <input type="button" value="下一张" class="btn">

        <script src="./js/jquery-1.11.3.js"></script>
        <script>
           


            var btn = $('.btn')
            var lis = $('.box ul li')
            // 角度
            var deg = 0
            // 开关
            var lock = false
            // 按钮点击事件
            btn.click(function(){
                if(lock) return
                lock = true
                // 点击一次角度-90度
                deg -= 90
                // li的样式改变
                lis.css({
                    "transform":"rotateX(" + deg + "deg)"
                })
                // 设置延时定时器            
                var timeout = (1 + 0.1 * lis.length) * 1000
                setTimeout(function(){
                    lock = false
                },timeout)
            })
           </script>
            

          
    </body>
</html>

这样写的话我们会发现其实有的数据都是固定的,想要改的话很麻烦,下面这种方法是使用jquery渲染的方式现实,这样改数据就很简单了,并且代码量也少一点。

     就是把数据通过渲染的方式写出来,而且这种方法也更方便,比如把count改成40,就会一张图片分成40等份,切换下一张图片的时候就会40个切换,而不是四个了。

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>轮播图</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            /* 给盒子设置宽高,用于显示一张图片的 */
            .box{
                position: relative;
                width: 600px;
                height: 360px;
                margin: 80px auto;
                /* border: 1px solid; */
            }
            .box ul li{
                position: absolute;
                top: 0;
                width: 150px;
                height: 360px;
                /* 让转换的子元素位于3D转换空间中 */
                transform-style: preserve-3d;
                perspective: 50000px;
                /* 过渡效果 */
                transition: all 1s ease 0s;
            }
           
            /* 设置div */
            .box ul li div{
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                /* 图片大小 */
                background-size: 600px 360px;
            }
           
            .box ul li div:nth-child(1){
                background-image: url(./img/ruili_img3.jpg);
                transform: rotateX(0deg) translateZ(180px);
            }
            .box ul li div:nth-child(2){
                background-image: url(./img/ruili_img5.jpg);
                transform: rotateX(90deg) translateZ(180px);
            }
            .box ul li div:nth-child(3){
                background-image: url(./img/ruili_img6.jpg);
                transform: rotateX(180deg) translateZ(180px);
            }
            .box ul li div:nth-child(4){
                background-image: url(./img/ruili_img7.jpg);
                transform: rotateX(270deg) translateZ(180px);
            }
            
            /* 设置按钮 */
            .btn{
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                
            </ul>
        </div>
        <!-- 按钮 -->
        <input type="button" value="下一张" class="btn">

        <script src="./js/jquery-1.11.3.js"></script>
        <script>
            

            var box = $('.box')
            var ul = $('.box ul')

            // 设置一张图片分为几等份
            var count = 4
            // 持续时间
            var duration = 1
            // 延迟时间
            var delay = 0.1
            // 图片宽度
            var width = box.width()
            // li的宽度
            var liWidth = width / count
            // 渲染数据
            for(let i = 0;i < count;i++){
                var li = $("<li><div></div><div></div><div></div><div></div></li>")
                // 设置li的样式
                li.css({
                    "width": liWidth,
                    "left": i * liWidth + 'px',
                    "transition-delay":i * delay + 's',
                    "transition-duration":duration + 's',
                }).children().css('background-position',-i * liWidth + 'px 0')
                ul.append(li)
            }


            var btn = $('.btn')
            var lis = $('.box ul li')
            // 角度
            var deg = 0
            // 开关
            var lock = false
            // 按钮点击事件
            btn.click(function(){
                if(lock) return
                lock = true
                // 点击一次角度-90度
                deg -= 90
                // li的样式改变
                lis.css({
                    "transform":"rotateX(" + deg + "deg)"
                })
                // 设置定时器            
                var timeout = (duration + delay * count) * 1000
                setTimeout(function(){
                    lock = false
                },timeout)
            })
           </script>
            
    </body>
</html>

   文章来源地址https://www.toymoban.com/news/detail-720341.html

到了这里,关于使用html+css+jquery实现3D轮播图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app小程序折叠3D轮播图效果实现。

    先来看效果图 实现原理: 通过小程序的触摸事件,来控制图片数组的变化实现动态样式;来改变图片的样式。 贴上轮播组件完整代码 组件使用 如果有自动轮播的需求,可以改造下组件加个定时器处理数组就OK了。

    2024年02月11日
    浏览(42)
  • new mars3d.graphic.Popup({实现插入轮播图组件的思路参考

    需求场景: 官网的示例链接的浮动监控点示例,实现的是播放视频。 但是我的需求场景是播放轮播图,此时该怎么实现呢? 示例地址: 功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 相关代码: function addRandomGraphicByCount(graphicLayer, position) {   const graphicImg = new mars3d.graph

    2024年01月19日
    浏览(83)
  • HTML+CSS+JavaScript:轮播图自动播放

    轮播图如下图所示,需求是每隔一秒轮播图自动切换一次   以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写 1、将代码素材在浏览器中打开,并按F12进入开发者模式,分析各个HTML标签在轮播图中的位置及作用 2、获取相关元素 3、利用间歇函数实现一秒切换一

    2024年02月14日
    浏览(42)
  • 如何使用CSS实现一个响应式轮播图?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(40)
  • 网页轮播图制作(html+css+js)

            目的:用于自己做记录,记录制作的过程以及遇到的一些问题。内容参考来自b站的up主:黑马前端 的pink老师JavaScript基础语法课程。 (1)当鼠标经过轮播图,左右两边的按钮出现,离开则隐藏按钮; (2)点击左侧按钮,图片向右播放一张,以此类推,右侧同理;

    2024年02月08日
    浏览(49)
  • ❤️创意网页:打造简洁美观的网页轮播图(HTML简单实现轮播图)操作简单可以直接使用

    ✨ 博主: 命运之光 🌸 专栏: Python星辰秘典 🐳 专栏: web开发(简单好用又好看) ❤️ 专栏: Java经典程序设计 ☀️ 博主的其他文章: 点击进入博主的主页 前言: 欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界! 🌌 在这里,我将带您穿越时空,揭开属于

    2024年02月17日
    浏览(43)
  • 微信小程序首页、界面布局、3D轮播图效果(示例二)

    使用swiper实现3D轮播图效果,自定义顶部状态栏,具体代码: 1、js代码 2、wxml代码 3、wxss代码 4、json代码 如需要下载完整版,包含监听事件、图片文件等,请前往下方链接,下载完整版,下载后直接使用微信开发者工具打开即可,下载链接为: 小程序完整版界面(示例二)

    2024年02月10日
    浏览(55)
  • HTML+CSS+JavaScript:轮播图的自动播放、手动播放、鼠标悬停暂停播放

    昨天我们做了轮播图的自动播放,即每隔一秒自动切换一次 今天我们增加两个需求: 1、鼠标点击向右按钮,轮播图往后切换一次;鼠标点击向左按钮,轮播图往前切换一次 2、鼠标悬停在轮播图区域中时,轮播图暂停播放   以下是缺失JS部分的代码,感兴趣的小伙伴可以先

    2024年02月14日
    浏览(44)
  • 前端效果积累 |别具一格的3D酷炫轮播图效果收集

    📌 个人主页 :个人主页 ​🧀 推荐专栏 :前端开发成神之路 --【 这是一个为想要 入门和进阶前端开发专门开启的精品专栏 !从 个人到商业的全套开发教程 ,实打实的干货分享,确定不来看看? 😻😻】 📝 作者简介 : 从web开发,再到大数据算法,踩过了无数的坑,用

    2024年02月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包