js特效之腾讯视频的图片轮播

今天搞了一天的javascript,准备做一个特效图片轮播,现在晚上十二点,中午十二点我开始搞的,到了现在还没有搞好还差一个鼠标移进移出的暂定和播放,其实这是一个很简单的特效,就是从刚开始的css的布局就高了两个小时,因为没搞过这样的布局,所以觉得很难刚开始都不知道怎么入手,后来在看了视频时候,原来是用的透明度(不在范围内的就是透明度为零),当布局完事之后就开始搞真正的了......今天五号晚上了,当看了五次视频,五十次调试之后,还是成功,但是现在还有一个问题就是无法再IE;浏览器上兼容,而视频上的那个就能,总的来说就是fliter的问题(在做这个小特效的时候,我总结出来一些内容

1.不能落下任何一个细节

2.从开始就开始测试,不要等到都完成之后在测试这样会有很多bug会没有办法看全

3.代码风格从小细节开始养成。)

图片就是这个图片 大致的布局是这样的

这个盒子的宽是660px,高是330px

然后图片大图列表也是一样的,但是运用了绝得定位让这么多的图片都在这一个盒子里,第一个li下的图片透明度为1,而其余的都是0,一会为了用js显示出来;

而下面的文字列列表是通过display来控制的,定义了一个class是show,带有这个show就是display为block的,其余的就是none,剩下的通过js来控制;

而下面的小图片列表就像图片轮播是一样的,ul下控制一个宽度,ul的其余部分用overflow:hidden来隐藏 li有宽和高,并且都在ul内;

运行到哪个图片的时候,你会观察到有一个亮的边框,这是有个class为active刚开始只有第一个li有,后来就通过js来控制来交替;

还有就是那个左右按钮是通过上一个我的博客background-position来控制的,其实那两个按钮是一张图片;

以上就是css的布局。

下面说一下js部分

刚开始先每点击下面的小图片的时候,就让active这个属性给谁,当然还要有一个for循环当当前的亮的时候,先让其他的暗掉,并且没有上面的小三角;

控制文字列表是和上面一样的,但是有一点要注意这个是h2下面的文字,如果在刚开始没有声明,在for循环声明一个也是一样的;

控制大图因为是一样的,三个不一样的是控制的属性不同;

然后下一步就是控制左右两个按钮

说这个按钮就有必要说一下HTML框架了

        <a href="##" id="Btn_pre" class="btn" ></a>
        <a href="##" id="Btn_next" class="btn showBtn" ></a>

两个a标签有共同的btn这个class,还各自有各自的ID 比如在最开始的时候向左走是走不了的,所以想做的按键就是暗的,这个通过showBtn这个标签这个标签也是通过透明度控制的;

向左走时利用js使得这个ul走向左走每次走都走得是li的单位,这个样定义一个iNowLeft++然后和每个li宽度的负值相乘然后加上px就是做移的一个单位;

向右走一样,这两个有一个判断值向左走的时候iNowLeft<=0就需要return掉向右走如果iNow>=所有的li前去能显示的li的时候就return掉;

然后就是自动播放了,设置一个定时器,在定义一个iNow,并且iNow每次都要加加,当加到头的时候返回第一个,

当iNow>iNowLeft+6的时候也就是说等于点击按钮的时候也开始动,然后还有iNow <= iNowLeft  这个把iNowLeft改为iNow



基本上就是这样;

下面是我写的代码



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值