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

用js写的轮播图,八位女明星,你翻谁的牌!

[复制链接]
来自北方 发表于 2021-1-2 12:17:06 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
本日下午使用摸鱼的时间做了一个图片轮播,嘿嘿,先看看效果,原来想搞动态图的,整出来效果欠好,图片又凌驾了5M不让传,照旧截图吧



 
感觉需
 
实现的功能:

1.定时向右滚动。
2.点击明星切换到最中间。
3.鼠标移入定时器被清除、鼠标移开定时器再次载入。
要改进的地方:

     1.参数img_num 即总图片的数量必须是大于即是5,小于5的话会有清闲。
     2.图片现在设定的宽 262px 高389px 如果尺寸的比例不符合的话效果没那么好。
实现思路:

1.先初始化几张图片(用div,然后div参加img),并将这些div存储到一个array中作为队列。
2.封装一个reset函数(包罗自己先前写的动画函数),专门用来对这些图片设置样式,根据他们的位置设置差异的left top 宽度高度等。
3.当我们点击此中的div时,就同步将他的位置设置到队列的中间,同时它左右双方的同步移动(最前面的谁人再往前移动的话就放到队列的最后,形成循环)。
4.队列设置好以后,调用reset 函数就会再次排版。
5.定时往右移动,鼠标移入清除定时器,移出时再次生成定时器。
 
完整代码

  1.                              *{                margin:0;padding:0;        }        #div_box{width:1100px; margin:0px auto;}        #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;}                                                                     
  2.                
复制代码
 
图片的话自己整,整理不易给个三连吧!!

 

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

使用道具 举报

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

本版积分规则


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

18768367769

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

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

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