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 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>
如果有看不懂的地方，或者我有什么不对的地方，请评论留言