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

来源：互联网发布：爱思助手 mac 编辑：程序博客网时间：2024/05/16 01:36

今天搞了一天的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;}
#ico_list ul {position:absolute;width:1050px;left:0;top:0;}
#ico_list ul li{
   float:left;
   width:75px
}

#ico_list ul li a{
   width:68px;
   padding-top:6px;
   display:block;
}

#ico_list ul li a img{
   border:2px solid #DFE8E4;height:36px;width:64px;background:#040303;opacity:0.7;
   fliter:alpha(opacity=70);}

#ico_list .active{
   background:url(img/a_hover.gif) no-repeat center 0;
}
#ico_list .active img{opacity:1;fliter:alpha(opacity=100);;border: 3px solid #fff; height:34px;width:62px;}

.btn{background:url(img/btn.gif) no-repeat;height:38px;width:38px;position: absolute;bottom:11px; opacity:0.5;fliter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{ opacity:1;fliter:alpha(opacity=100);cursor:pointer;z-index:4;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}
</style>
<script src="js/miaov.js"></script>
<script>
window.onload = function(){
   var oDiv=document.getElementById('box');
   var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');
   var aTxtLi=document.getElementById('text_list').getElementsByTagName('li');
   var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');
   var aIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];
   var BtnPre=document.getElementById('btn_prev');
   var BtnNext=document.getElementById('btn_next');
   var i,j,iNow=0,iNowUl=0;

   BtnPre.onclick=function(){
       //alert(316);
       if(iNowUl == 0){return ;}
       iNowUl--;
       FicLeft();
   }
   BtnNext.onclick=function(){
       if(iNowUl >= 7){return ;}
       iNowUl++;
       FicLeft();
   }
   function FicLeft(){
       BtnNext.className=iNowUl==7 ? 'btn':'btn showBtn';
       BtnPre.className=iNowUl==0 ? 'btn':'btn showBtn';
       miaovStartMove(aIcoUl,{left:-aIcoLi[0].offsetWidth*iNowUl},MIAOV_MOVE_TYPE.BUFFER);
   }

   for(i=0;i<aIcoLi.length;i++)
   {
       aIcoLi[i].index=i;
       aIcoLi[i].onclick=function ()
       {
           if(iNow==this.index)
           {
               return;
           }

           iNow=this.index;

           tab();
       };
   }

   function tab()
   {
       for(i=0;i<aIcoLi.length;i++)
       {
           aIcoLi[i].className='';
           aTxtLi[i].getElementsByTagName('h2')[0].className='';
           aPicLi[i].style.filter='alpha(opacity:0)';
           aPicLi[i].style.opacity=0;
           miaovStopMove(aPicLi[i]);
       }
       aIcoLi[iNow].className='active';
       aTxtLi[iNow].getElementsByTagName('h2')[0].className='show';
       miaovStartMove(aPicLi[iNow], {opacity: 100}, MIAOV_MOVE_TYPE.BUFFER);
   }

   function autoPlay(){
       iNow++;
       if(iNow >aIcoLi.length-1){
           iNow=0;
       }
       if(iNow < iNowUl){
           iNowUl=iNow;
       }
       else if(iNow > iNowUl+6){
           iNowUl=iNow-6;
       }
       FicLeft();
       tab();
   }
   var timer=setInterval(autoPlay,2000);
   /*oDiv.onmouseover=function(){
       clearInterval(timer);
   }
   oDiv.onmouseout=function(){
       setInterval(autoPlay,2000);
   }*/
   oDiv.onmouseover=function(){
       clearInterval(timer);
   }
   oDiv.onmouseout=function(){
       timer=setInterval(autoPlay,2000);
   }


}
</script>
</head>

<body>

<div id="box">
   <div id="pic_list">
       <ul>
           <li style="opacity:1;alpha:(opacity = 1);"><a href="####"><img src="img/pic_1.jpg"></a></li>
           <li><a href="####"><img src="img/pic_2.jpg"></a></li>
           <li><a href="####"><img src="img/pic_3.jpg"></a></li>
           <li><a href="####"><img src="img/pic_4.jpg"></a></li>
           <li><a href="####"><img src="img/pic_5.jpg"></a></li>
           <li><a href="####"><img src="img/pic_6.jpg"></a></li>
           <li><a href="####"><img src="img/pic_7.jpg"></a></li>
           <li><a href="####"><img src="img/pic_8.jpg"></a></li>
           <li><a href="####"><img src="img/pic_9.jpg"></a></li>
           <li><a href="####"><img src="img/pic_10.jpg"></a></li>
           <li><a href="####"><img src="img/pic_11.jpg"></a></li>
            <li><a href="####"><img src="img/pic_12.jpg"></a></li>
           <li><a href="####"><img src="img/pic_13.jpg"></a></li>
           <li><a href="####"><img src="img/pic_14.jpg"></a></li>

        </ul>
    </div>

        <ul id="text_list">
           <li><h2 class="show"><a href="#">《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...</a></h2></li>
            <li><h2><a href="#">《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a></h2></li>
            <li><h2><a href="#">《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋..</a></h2></li>
            <li><h2><a href="#">《我的女儿是花儿》[至3集]"富二代"冰王子恋上贫家女..</a></h2></li>
            <li><h2><a href="#">《法证先锋3》[至26集]写字楼惊现"女僵尸"尸体！</a></h2></li>
            <li><h2><a href="#">《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战</a></h2></li>
            <li><h2><a href="#">第二届九分钟电影11月20日独家首映视觉盛宴恭迎各位看官</a></h2></li>
            <li><h2><a href="#">《快女微电影》洪辰脸伤痊愈快女微电影收官作复拍</a></h2></li>
            <li><h2><a href="#">《称心如意》京城第一"育婴男"Hold住全场萝莉热舞走光</a></h2></li>
            <li><h2><a href="#">《男人帮》[全30集]悲喜双响炮，一个完美结局</a></h2></li>
            <li><h2><a href="#">《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a></h2></li>
            <li><h2><a href="#">《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a></h2></li>
            <li><h2><a href="#">Justin bieber女友动感热单全球首发。</a></h2></li>
            <li><h2><a href="#">第八届中国（重庆）国际园林博览会</a></h2></li>
        </ul>

        <div id="ico_list">
           <ul>
                <li class="active"><a href="#"><img src="img/ico_1.jpg" /></a></li>
                <li><a href="#"><img src="img/ico_2.jpg" alt="/></a></li>
                <li><a href="#"><img src="img/ico_3.jpg" alt="/></a></li>
                <li><a href="#"><img src="img/ico_4.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/ico_5.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/ico_6.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/ico_7.jpg" alt="/></a></li>
                <li><a href="#"><img src="img/ico_8.jpg" alt="/></a></li>
                <li><a href="#"><img src="img/ico_9.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/ico_10.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/ico_11.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/ico_12.jpg" alt="/></a></li>
                <li><a href="#"><img src="img/ico_13.jpg" alt="/></a></li>
                <li><a href="#"><img src="img/ico_14.jpg" alt=""/></a></li>
            </ul>
        </div>

           <a href="#" id="btn_prev" class="btn"></a>
            <a href="#" id="btn_next" class="btn showBtn"></a>

</div>

</body>
</html>

如果有看不懂的地方，或者我有什么不对的地方，请评论留言

1 0