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

最新推荐文章于 2022-02-23 17:46:17 发布

原创

最新推荐文章于 2022-02-23 17:46:17 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

本文记录了一天内使用JavaScript制作图片轮播特效的过程，包括布局、CSS和JavaScript实现的详细步骤。遇到的挑战主要是CSS布局和IE浏览器的兼容性问题。作者总结了三点经验：注意细节、及时测试、保持良好的代码风格。文章还提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天搞了一天的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标签有共同的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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播</title>
<style>
body,ul,h2{margin:0;padding:0; font:12px/20px Tahoma,"hiragino sans gb",Helvetica,Arial;}
body{background:#000;}
img{border:0px;}
li {list-style:none;}

#box{position:relative;height:330px;width:660px;margin:60px auto 0; overflow:hidden;}

#box #pic_list{position:relative;z-index:1;}

#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z-index:1;}
#text_list{position:absolute;bottom:60px;left:50px;z-index:5;height:20px;overflow:hidden;}

#text_list h2{display:none;}
#text_list .show{display:block;}
#text_list .show a{color:#fff;font-family:"Comic Sans MS", cursive;text-decoration:none;font-size:18px;font-weight:normal;}

#ico_list{position:absolute;bottom:8px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#i