实现简易3d轮播图

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

效果图如下

css 3d轮播图,3d,javascript,css

主要构建想法:
1、html与css先将主体框架以及样式写出来,将图片一行排列,然后设置舞台元素的长宽,超出部分隐藏,使用transform: scale(0.5);控制图片的大小
2、当基本样式写完后,要思考使用如何使其发生位置变换,由于学识微薄,使用改变类名的办法使其位置变化,同时使用定时器使其开始自动轮播

html代码

<div id="box1">
    <ul>
        <li class="li1"><img src="003.jpg" alt=""></li>
        <li class="li2"><img src="005.jpg" alt=""></li>
        <li class="li3"><img src="006.jpg" alt=""></li>
        <li class="li4"><img src="ya1.gif" alt=""></li>
        <li class="li5"><img src="ya2.gif" alt=""></li>
        <li class="li6"><img src="ya3.jpg" alt=""></li>
    </ul>
    <div id="nav">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
    </div>
</div>    

CSS代码

*{
    list-style: none;
    margin: 0;
    padding:0;
    }
img{
    width: 500px;
    height: 300px;
}
#box1{
    width: 900px;
    height: 800px;
    position: relative;
    margin: 20px auto;
    overflow: hidden;
}
ul{
    transform-style:preserve-3d ;
}
li{
   position: absolute;
   transition: all 0.5s linear;
}
.li1{
   
    transform: translate(200px,0) scale(1);
    z-index: 4; 

}
.li2{
   
    transform: translate(600px,0) scale(0.8);
    z-index: 3;
}
.li3{
    transform: translate(900px,0) scale(0.5);
    z-index: 2;
}
.li4{
    transform: translate(-600px,0) scale(0.1);
    z-index: 1;
}
.li5{
    transform: translate(-300px,0) scale(0.5);
    z-index: 2; 
}
.li6{
    transform: translate(-50px,0) scale(0.8);
    z-index: 3; 
   
}
#nav{
	position: absolute;
	top: 330px;
				
}
#nav a{
	width:10px;
	height:10px;
	display: inline-block;
	background: #FF0000;
	border-radius:50%;
	margin: 0 5px;
	opacity: 0.5;
}
#nav a:hover{
	background: #000;
}

JS代码文章来源地址https://www.toymoban.com/news/detail-784109.html

window.onload = function(){
    
    /*设置导航条按钮居中*/
    var nav = document.getElementById('nav');
    var box1 = document.getElementById('box1');
    nav.style.left = (box1.offsetWidth - nav.offsetWidth)/2+'px';

    // 图片的路径
    var liArr=this.document.getElementsByTagName('li');
    //索引
    var index = 0;
    //时间节点
    var timer;

    
    
    var allA = document.getElementsByTagName('a');
    allA[index].style.background = '#000';
    
    //点击a显示对应图片
    for (var i = 0 ; i < allA.length ; i++) {
        allA[i].num = i;
        
    allA[i].onclick = function(){
        clearInterval(timer);
        index = this.num % liArr.length;
         
        var li1 = (index+1)%liArr.length
        var li2 = (index+2)%liArr.length
        var li3 = (index+3)%liArr.length
        var li4 = (index+4)%liArr.length
        var li5 = (index+5)%liArr.length
        //选中的a
        setA();
        liArr[index].className="li4";
        liArr[li1].className="li5";
        liArr[li2].className="li6";
        liArr[li3].className="li1";
        liArr[li4].className="li2";
        liArr[li5].className="li3";
        autoChange();
    };
};
autoChange();
function setA(){
    if(index > liArr.length ){
        index = 0; 
    }
    for(var i=0 ; i < allA.length ; i++) {
        allA[i].style.background = '';
    }
    allA[index].style.background = '#000';
};
function autoChange(){
    timer = setInterval(function(){
       index++;
       index = index % liArr.length;
       var li1 = (index+1)%liArr.length
    var li2 = (index+2)%liArr.length
    var li3 = (index+3)%liArr.length
    var li4 = (index+4)%liArr.length
    var li5 = (index+5)%liArr.length
       liArr[index].className="li1";
       liArr[li1].className="li2";
       liArr[li2].className="li3";
       liArr[li3].className="li4";
       liArr[li4].className="li5";
       liArr[li5].className="li6";
       setA();
   },4000);
}
}

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

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

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

相关文章

  • HTML+CSS+JavaScript:轮播图的自动播放、手动播放、鼠标悬停暂停播放

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

    2024年02月14日
    浏览(44)
  • css实现轮播图

    轮播图:就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示图片 1)创建一个容器来进行轮播图的展示 这里的容器就是最外部的盒子 注意最外部盒子设置宽高时要与我们进行展示的图片的宽高保持一致,这样就可以保证一次轮播一张图片 /* overflow: hidden; 溢出

    2023年04月09日
    浏览(50)
  • jQuery实现3D轮播图

    通过CSS3的3D变换和jQuery Transit插件实现了一个3D旋转的图片轮播效果 HTML部分: div id=“banner”:定义了一个id为\\\"banner\\\"的div标签,作为图片轮播的容器。 ul: 在\\\"banner\\\"中定义了一个无序列表,每个列表项li包含一张图片,这些图片将在页面上以3D旋转的方式展示。 CSS部分: #bann

    2024年02月03日
    浏览(41)
  • css实现轮播图弧形

     

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

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

    2024年02月11日
    浏览(40)
  • uni-app小程序折叠3D轮播图效果实现。

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

    2024年02月11日
    浏览(42)
  • vue 实现钉钉官网的轮播图下面功能滚动排版CSS效果

    前言 最近在写PC端的业主端时候,发现传统的菜单栏比较丑,也不符合实际应用(功能页面并不多-展示为主) 偶然发现钉钉官网的效果挺有意思的,想着把这个效果复原过来,然后夸夸搜索了一番。 经过一顿的cv打法,加上修修补补把大概的效果整了出来,时间关系最基础

    2024年02月11日
    浏览(49)
  • day35-Image Carousel(图片轮播图简易版)

    效果 index.html style.css script.js

    2024年02月16日
    浏览(45)
  • JavaScript-----轮播图案例展示

            这一期我们去通过JavaScript的代码实现轮播图的制作,下面有效果展示和代码资源,其中的图片资源和代码资源我都上传上去了,如果需要运行的话,你们可以去直接下载下来。希望各位喜欢! 1694164869515 功能说明 :这个轮播图可以自动轮播(周期2秒),可以点击向

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

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

    2024年01月19日
    浏览(83)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包