简单的JS轮播

1:做好事前准备:先创建几个文件夹来放一下文件,比如”css,images,js”之类的,在images文件夹里面放几张图片,然后再打开DW,在DW中创建一个css放到css文件夹里面,然后再引用就OK了,同样的创建一个js放到js文件夹里面,然后引用;
2:把该准备的都准备好了以后,先在css样式里面的“body”里面设置一张全屏的背景图片,再去源代码里面写HTML的代码,放一个总的div盒子,去css里面设置它的样式:宽400px,高550px,然后用相对定位调整一下位置,让它保持居中的效果;再放一个ul标签,同样的给它一个类,以便设置css样式,还要给它一个ID,方便等下在js中获取到这个ul,先给这个ul设置宽度为2400px,然后设置一个绝对定位,等下也会用到,再到刚刚的div盒子里面设置一个超出部分隐藏;接下来就是在ul里面放一些li标签,li标签里面再放一张图片,因为我们是要让4张图片轮播,所以就需要放6张图片,因为等下js的时候还需要两张图片来过渡空白的地方,然后把ul里面的li里面的img图片的宽高都设为400px ,500px并且设置一个左浮动,然后还要隐藏ul里面的li的样式,不然排序就有点毛病了;再放一个ul,在ul里面放几个li,li里面放一些文字,然后再设置一些这些文字的大小,粗细,颜色就OK了,这个ul主要作用就是起到一个装饰的样式,整体完成以后,就能看到以下的效果了:
浏览器css总效果截图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值