请选择 进入手机版 | 继续访问电脑版

用js写的旋转木马,在新年的第一天,献给各位刚登基的皇帝,让你的后宫转起

[复制链接]
漫舞飞天 发表于 2021-1-2 19:01:12 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
目次
效果图:
实现的内容:
代码奉上:
实现原理我就不写了,代码注释的比力详细,欢迎指正!!
效果图:



 
实现的内容:

1.自动向右旋转。
2.点击图片自动把点击的图片旋转到最前面。
3.点击向左向右,分别向左向右旋转。
4.这个样式做的比力简朴哈,可以多设置一些样式,看起来更炫酷,模子都有了,加起来就很容易了。
代码奉上:

 
  1.                              *{                margin:0;padding:0;        }        #div_box{margin:0px auto;position:absolute;left:28%;width:680px;height:530px}        #div_box div{position:absolute;width:0;height:0;z-index:0;cursor:pointer;overflow:hidden;top:152px; left:10px;}                #div_box div img{width:100%;height:100%;vertical-align:top; float:left; border:0;}                .left{                        position:absolute;                        width: 100px;                    height: 100px;                    top: 40%;                    left: 26%;                    opacity:0;                }                .right{                        position:absolute;                        width: 100px;                    height: 100px;                    top: 40%;                    left: 78%;                    opacity:0;                }                                                                                                     
  2.                                [align=center][img]https://www.jianchenwangluo.com/'../images/2/left.png'[/img][/align]                               [align=center][img]https://www.jianchenwangluo.com/'../images/2/right.png'[/img][/align]                      
  3.                
复制代码
实现原理我就不写了,代码注释的比力详细,欢迎指正! 给个三连哈,谢谢!

 

来源:https://blog.csdn.net/dkm123456/article/details/112059073
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )