javascript效果：手风琴、轮播图、图片滑动
最近都没有更，就来几个效果充实一下。
都没有进行美化这步。
手风琴：
纯css：
; ;<pre><!DOCTYPE ;html>
<html ;lang="en">
<head>
; ; ; ;<meta ;charset="UTF-8">
; ; ; ;<title>手风琴css</title>
; ; ; ;<style>
; ; ; ;.showBox{
; ; ; ; ; ; ; ;width: ;660px;
; ; ; ; ; ; ; ;overflow: ;hidden;
; ; ; ;}
; ; ; ; ; ; ; ;ul{
; ; ; ; ; ; ; ; ; ; ; ;list-style: ;none;
; ; ; ; ; ; ; ; ; ; ; ;margin: ;0;
; ; ; ; ; ; ; ; ; ; ; ;padding: ;0;
; ; ; ; ; ; ; ; ; ; ; ;width: ;30000px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li{
; ; ; ; ; ; ; ; ; ; ; ;float: ;left;
; ; ; ; ; ; ; ; ; ; ; ;position: ;relative;
; ; ; ; ; ; ; ; ; ; ; ;height: ;254px;
; ; ; ; ; ; ; ; ; ; ; ;width: ;110px;
; ; ; ; ; ; ; ; ; ; ; ;overflow: ;hidden;
; ; ; ; ; ; ; ; ; ; ; ;transition: ;all ;0.3s;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;/* ;这是css手风琴的核心，就是hover的使用
; ; ; ; ; ; ; ;**首先是ul:hover ;li这个触发了经过ul但没有经过li的变化
; ; ; ; ; ; ; ;**然后是ul ;li:hover这里是被经过li的变化，匹配css3动画效果，
; ; ; ; ; ; ; ;和css3的一些对页面美化的效果，就可以做出一个很好看的手风琴，
; ; ; ; ; ; ; ;如果使用纯js实现可能很麻烦。
; ; ; ; ; ; ; ; ;*/
; ; ; ; ; ; ; ;ul:hover ;li{
; ; ; ; ; ; ; ; ; ; ; ;width:22px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li:hover{
; ; ; ; ; ; ; ; ; ; ; ;width: ;460px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;img{
; ; ; ; ; ; ; ; ; ; ; ;width: ;550px;
; ; ; ; ; ; ; ; ; ; ; ;height: ;254px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span{
; ; ; ; ; ; ; ; ; ; ; ;width: ;22px;
; ; ; ; ; ; ; ; ; ; ; ;position: ;absolute;
; ; ; ; ; ; ; ; ; ; ; ;top: ;0;
; ; ; ; ; ; ; ; ; ; ; ;right: ;0;
; ; ; ; ; ; ; ; ; ; ; ;height: ;204px;
; ; ; ; ; ; ; ; ; ; ; ;padding-top: ;50px;
; ; ; ; ; ; ; ; ; ; ; ;color: ;#fff;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg1{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#333;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg2{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#0f0;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg3{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#ff7500;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg4{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#0ff;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg5{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#00f;
; ; ; ; ; ; ; ;}
; ; ; ;</style>
; ; ; ;<script ;type="text/javascript">
; ; ; ;</script>
</head>
<body>
; ; ; ;<div ;class="showBox">
; ; ; ; ; ; ; ;<ul>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg1">这是第一个</span><img ;src="1.jpg" ;alt=""></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg2">这是第二个</span><img ;src="2.jpeg" ;alt=""></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg3">这是第三个</span><img ;src="3.jpg" ;alt=""></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg4">这是第四个</span><img ;src="4.jpg" ;alt=""></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg5">这是第五个</span><img ;src="5.jpg" ;alt=""></li>
; ; ; ; ; ; ; ;</ul>
; ; ; ;</div>
</body>
</html></pre> ; ;
<span ;style="font-size: ;18px;">css3手风琴：</span>
; ;<pre><!DOCTYPE ;html>
<html ;lang="en">
<head>
; ; ; ;<meta ;charset="UTF-8">
; ; ; ;<title>css3-checked:</title>
; ; ; ;<style>
; ; ; ;/* ;使用了radio的单选特性，实现手风琴效果 ;*/
; ; ; ; ; ; ; ;ul{
; ; ; ; ; ; ; ; ; ; ; ;display: ;none;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ;input{display: ;none;} ;
; ; ; ; ; ; ; ; ;label{display: ;block; ;line-height: ;40px; ;border-bottom: ;1px ;solid ;#ddd; ;cursor:pointer; ;font-size: ;15px; ;font-weight: ;bold;} ;
; ; ; ; ; ; ; ; ;.list ;> ;ul{display: ;none; ;-webkit-transition:all ;.5s ;linear; ;-moz-transition:all ;.5s ;linear; ;-ms-transition:all ;.5s ;linear; ;-o-transition:all ;.5s ;linear; ;transition:all ;.5s ;linear;} ;
; ; ; ; ; ; ; ; ;#list1:checked ;+ ;ul{display: ;block;} ;
; ; ; ; ; ; ; ; ;#list2:checked ;+ ;ul{display: ;block;} ;
; ; ; ; ; ; ; ; ;#list3:checked ;+ ;ul{display: ;block;} ;
; ; ; ; ; ; ; ; ;#list4:checked ;+ ;ul{display: ;block;}
; ; ; ;</style>
</head>
<body>
; ; ; ;<div> ;<label ;for="list1">我的同学</label> ;<input ;type="radio" ;name="list" ;id="list1" ;checked="chekced"/> ;
; ; ; ;<ul> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;</ul> ;<label ;for="list2">我的同学</label> ;
; ; ; ;<input ;type="radio" ;name="list" ;id="list2"/> ;
; ; ; ;<ul> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;</ul> ;<label ;for="list3">我的同学</label> ;<input ;type="radio" ;name="list" ;id="list3"/> ;<ul> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;</ul> ;<label ;for="list4">我的同学</label> ;<input ;type="radio" ;name="list" ;id="list4"/> ;<ul> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;<li><a ;href="">同学名字</a></li> ;</ul> ;</div>
</body>
</html></pre> ; ;
<span ;style="font-size: ;18px;">javascript实现的手风琴：</span>
; ; ; ;<pre><!DOCTYPE ;html>
<html ;lang="en">
<head>
; ; ; ;<meta ;charset="UTF-8">
; ; ; ;<title>手风琴</title>
; ; ; ;<style>
; ; ; ;.showBox{
; ; ; ; ; ; ; ;width: ;660px;
; ; ; ; ; ; ; ;overflow: ;hidden;
; ; ; ;}
; ; ; ; ; ; ; ;ul{
; ; ; ; ; ; ; ; ; ; ; ;list-style: ;none;
; ; ; ; ; ; ; ; ; ; ; ;margin: ;0;
; ; ; ; ; ; ; ; ; ; ; ;padding: ;0;
; ; ; ; ; ; ; ; ; ; ; ;width: ;30000px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li.active{
; ; ; ; ; ; ; ; ; ; ; ;width: ;550px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li{
; ; ; ; ; ; ; ; ; ; ; ;float: ;left;
; ; ; ; ; ; ; ; ; ; ; ;position: ;relative;
; ; ; ; ; ; ; ; ; ; ; ;height: ;254px;
; ; ; ; ; ; ; ; ; ; ; ;width: ;22px;
; ; ; ; ; ; ; ; ; ; ; ;overflow: ;hidden;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;img{
; ; ; ; ; ; ; ; ; ; ; ;width: ;660px;
; ; ; ; ; ; ; ; ; ; ; ;height: ;254px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span{
; ; ; ; ; ; ; ; ; ; ; ;width: ;22px;
; ; ; ; ; ; ; ; ; ; ; ;position: ;absolute;
; ; ; ; ; ; ; ; ; ; ; ;top: ;0;
; ; ; ; ; ; ; ; ; ; ; ;left: ;0;
; ; ; ; ; ; ; ; ; ; ; ;height: ;204px;
; ; ; ; ; ; ; ; ; ; ; ;padding-top: ;50px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg1{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#333;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg2{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#0f0;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg3{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#ff7500;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg4{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#0ff;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;ul ;li ;span.bg5{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#00f;
; ; ; ; ; ; ; ;}
; ; ; ;</style>
; ; ; ;<script ;type="text/javascript">
; ; ; ; ; ; ; ;window.onload=function ;()
; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ;createAccordion('.showBox');
; ; ; ; ; ; ; ;};
; ; ; ; ; ; ; ;function ;createAccordion(name)
; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ;/*获取元素*/
; ; ; ; ; ; ; ; ; ; ; ;var ;oDiv=document.querySelector(name);
; ; ; ; ; ; ; ; ; ; ; ;/*声明最小宽度*/
; ; ; ; ; ; ; ; ; ; ; ;var ;iMinWidth=9999999;
; ; ; ; ; ; ; ; ; ; ; ;/*获取元素*/
; ; ; ; ; ; ; ; ; ; ; ;var ;aLi=oDiv.getElementsByTagName('li');
; ; ; ; ; ; ; ; ; ; ; ;var ;aSpan=oDiv.getElementsByTagName('span');
; ; ; ; ; ; ; ; ; ; ; ;/*定时器容器默认*/
; ; ; ; ; ; ; ; ; ; ; ;oDiv.timer=null;
; ; ; ; ; ; ; ; ; ; ; ;/*循环添加事件和自定义属性索引值*/
; ; ; ; ; ; ; ; ; ; ; ;for(vari=0;i<aSpan.length;i++)
; ; ; ; ; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aSpan[i].index=i;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aSpan[i].onmouseover=function ;()
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;gotoImg(oDiv, ;this.index, ;iMinWidth);
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;};
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*获取最小宽度*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;iMinWidth=Math.min(iMinWidth, ;aLi[i].offsetWidth);
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;};
; ; ; ; ; ; ; ;function ;gotoImg(oDiv, ;iIndex, ;iMinWidth)
; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ;if(oDiv.timer)
; ; ; ; ; ; ; ; ; ; ; ;{ ; ; ; ;/*清除定时器，避免叠加*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;clearInterval(oDiv.timer);
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;/*开启定时器*/
; ; ; ; ; ; ; ; ; ; ; ;oDiv.timer=setInterval
; ; ; ; ; ; ; ; ; ; ; ;(
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;function ;()
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;changeWidthInner(oDiv, ;iIndex, ;iMinWidth);
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}, ;30
; ; ; ; ; ; ; ; ; ; ; ;);
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;/*这里是关键，运动*/
; ; ; ; ; ; ; ;function ;changeWidthInner(oDiv, ;iIndex, ;iMinWidth)
; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ;var ;aLi=oDiv.getElementsByTagName('li');
; ; ; ; ; ; ; ; ; ; ; ;var ;aSpan=oDiv.getElementsByTagName('span');
; ; ; ; ; ; ; ; ; ; ; ;/*获取盒子的大小，这个是总宽度*/
; ; ; ; ; ; ; ; ; ; ; ;var ;iWidth=oDiv.offsetWidth;
; ; ; ; ; ; ; ; ; ; ; ;/*缩进去的图片的宽度声明*/
; ; ; ; ; ; ; ; ; ; ; ;var ;w=0;
; ; ; ; ; ; ; ; ; ; ; ;/*判断的声明,为了清除定时器声明*/
; ; ; ; ; ; ; ; ; ; ; ;var ;bEnd=true;
; ; ; ; ; ; ; ; ; ; ; ;/*循环为了把每个图片都循环一遍，为了获取伸进和缩去的元素*/
; ; ; ; ; ; ; ; ; ; ; ;for(var ;i=0;i<aLi.length;i++)
; ; ; ; ; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*这为获取伸进的索引*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(i==iIndex)
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;continue;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*这里是没有变动的元素，所以都保存最小宽度*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(iMinWidth==aLi[i].offsetWidth)
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*总宽度减去这些宽度,因为他们也在总宽度里*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;iWidth-=iMinWidth;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;continue;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*走以下的循环里代码的是缩去的元素*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*不清除定时器，还没运动完*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;bEnd=false;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*获取速度,先快后慢*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*缩去剩下的宽度*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;w=aLi[i].offsetWidth-speed;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*为避免缩去元素小于最小宽度*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(w<=iMinWidth)
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;w=iMinWidth;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*设置缩去元素的宽度*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aLi[i].style.width=w+'px';
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*减去缩去的宽度，剩下的就是伸进的宽度*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;iWidth-=w;
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;/*伸进元素的宽度*/
; ; ; ; ; ; ; ; ; ; ; ;aLi[iIndex].style.width=iWidth+'px';
; ; ; ; ; ; ; ; ; ; ; ;if(bEnd)
; ; ; ; ; ; ; ; ; ; ; ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;clearInterval(oDiv.timer);
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;oDiv.timer=null;
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;}
; ; ; ;</script>
</head>
<body>
; ; ; ;<div ;class="showBox">
; ; ; ; ; ; ; ;<ul>
; ; ; ; ; ; ; ; ; ; ; ;<li ;class="active"><span ;class="bg1">这是第一个</span><img ;src="1.jpg" ;alt=""></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg2">这是第二个</span><img ;src="2.jpeg" ;alt=""></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg3">这是第三个</span><img ;src="3.jpg" ;alt=""></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg4">这是第四个</span><img ;src="4.jpg" ;alt=""></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><span ;class="bg5">这是第五个</span><img ;src="5.jpg" ;alt=""></li>
; ; ; ; ; ; ; ;</ul>
; ; ; ;</div>
</body>
</html></pre> ; ; ; ; ; ; ; ;
<span ;style="font-size: ;18px;">接下来的都是会使用到动画效果，既然这样就把封装好运动：</span>
; ;<pre>/*使用调用，obj对象，attr属性，speed速度，iTarget想达到的值，fn回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
; ; ; ;其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
; ; ; ; ; ; ; ;function ;doMove(obj,attr,speed,iTarget,fn){
; ; ; ; ; ; ; ; ; ; ; ;if(attr=="opacity"){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
; ; ; ; ; ; ; ; ; ; ; ;}else{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;obj.len=iTarget-parseFloat(getStyle(obj,attr));
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;/*这里判断方向，在初始点后的为负数，在初始点前为正数*/
; ; ; ; ; ; ; ; ; ; ; ;speed=obj.len>0?speed:-speed;
; ; ; ; ; ; ; ; ; ; ; ;clearInterval(obj.timer);
; ; ; ; ; ; ; ; ; ; ; ;obj.timer=setInterval(function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(!obj.num){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;obj.num=0;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(attr=="opacity"){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;obj.num=parseFloat(getStyle(obj,attr))*100+speed;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}else{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;obj.num=parseInt(getStyle(obj,attr))+speed;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*这里是判断到了目标点没有，到了就停止定时器*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(obj.num>=iTarget ;&& ;obj.len>0 ;|| ;obj.num<=iTarget ;&& ;obj.len<0){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;obj.num=iTarget;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;clearInterval(obj.timer);
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(attr=="opacity"){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;obj.style[attr]=obj.num/100;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}else{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;obj.style[attr]=obj.num+"px";
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(obj.num>=iTarget ;&& ;obj.len>0 ;|| ;obj.num<=iTarget ;&& ;obj.len<0){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;fn ;&& ;fn();
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;},30);
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;/*获取css属性值的，会获取表现出现的值*/
; ; ; ; ; ; ; ;function ;getStyle(obj,attr){
; ; ; ; ; ; ; ; ; ; ; ;return ;obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
; ; ; ; ; ; ; ;}</pre> ; ; ; ;
<span ;style="font-size: ;18px;">轮播图：</span>
; ;<pre><!DOCTYPE ;html>
<html ;lang="en">
<head>
; ; ; ;<meta ;charset="UTF-8">
; ; ; ;<title>轮播图</title>
; ; ; ;<!-- ;这是引用封装好运动函数 ;-->
; ; ; ;<script ;type="text/javascript" ;src="doMove.js"></script>
; ; ; ;<script ;type="text/javascript">
; ; ; ; ; ; ; ;window.onload=function(){
; ; ; ; ; ; ; ; ; ; ; ;/*调用实现轮播*/
; ; ; ; ; ; ; ; ; ; ; ;carousel("carousel")
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;function ;carousel(name){
; ; ; ; ; ; ; ; ; ; ; ;var ;oScl=document.getElementById(name);
; ; ; ; ; ; ; ; ; ; ; ;var ;oUl=oScl.querySelector("ul");
; ; ; ; ; ; ; ; ; ; ; ;var ;aLi=oUl.querySelectorAll("li");
; ; ; ; ; ; ; ; ; ; ; ;var ;next=document.getElementById("next");
; ; ; ; ; ; ; ; ; ; ; ;var ;pre=document.getElementById("pre");
; ; ; ; ; ; ; ; ; ; ; ;var ;aIndex=oScl.querySelectorAll(".index ;span");
; ; ; ; ; ; ; ; ; ; ; ;var ;num=0;
; ; ; ; ; ; ; ; ; ; ; ;var ;index=0;
; ; ; ; ; ; ; ; ; ; ; ;/*给第一个图片最高级层级*/
; ; ; ; ; ; ; ; ; ; ; ;aLi[0].style.zIndex=5;
; ; ; ; ; ; ; ; ; ; ; ;/*判断定时器存不存在*/
; ; ; ; ; ; ; ; ; ; ; ;if(!oScl.timer){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;oScl.timer=null;
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;/*这是自动轮播开启*/
; ; ; ; ; ; ; ; ; ; ; ;oScl.timer=setInterval(function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num++;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num%=aLi.length;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;play();
; ; ; ; ; ; ; ; ; ; ; ;},2000);
; ; ; ; ; ; ; ; ; ; ; ;/*上下页显示、隐藏*/
; ; ; ; ; ; ; ; ; ; ; ;oScl.onmouseover=function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*移入停止定时器*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;clearInterval(oScl.timer);
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;next.style.display="block";
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;pre.style.display="block";
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;oScl.onmouseout=function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;next.style.display="none";
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;pre.style.display="none";
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*移出开启定时器*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;oScl.timer=setInterval(function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num++;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num%=aLi.length;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;play();
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;},2000);
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;/*点击上下页*/
; ; ; ; ; ; ; ; ; ; ; ;next.onclick=function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num++;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num%=aLi.length;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;play();
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;pre.onclick=function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(!aLi[index]){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;index=num;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num--;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(num<0){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num=aLi.length-1;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;play();
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;/*索引点*/
; ; ; ; ; ; ; ; ; ; ; ;for(var ;i=0;i<aIndex.length;i++){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aIndex[i].index=i;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aIndex[i].onmouseover=function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;num=this.index;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;play();
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;/*动画执行函数*/
; ; ; ; ; ; ; ; ; ; ; ;function ;play(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*判断是否是相同触发点，如索引点的两次移入都是相同的，
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;如果是不执行,避免连续重复执行
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;if(index!=num){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;for(var ;i=0;i<aLi.length;i++){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*设置全部层级为1*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aLi[i].style.zIndex=1;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*设置上次轮播过的图的层级为2*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aLi[index].style.zIndex=2;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aIndex[index].classname=""; ; ; ; ;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aIndex[num].classname="active";
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;index=num;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*设置这次轮播的图透明度为0*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aLi[num].style.opacity=0;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*设置这是轮播的图的层级为5*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;aLi[num].style.zIndex=5;
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;/*运动函数封装，淡出这次的图*/
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;doMove(aLi[num],"opacity",10,100);
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;}
; ; ; ;</script>
; ; ; ;<style>
; ; ; ; ; ; ; ;a{
; ; ; ; ; ; ; ; ; ; ; ;text-decoration: ;none;
; ; ; ; ; ; ; ; ; ; ; ;color: ;#555;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;#carousel{
; ; ; ; ; ; ; ; ; ; ; ;font-family: ;"微软雅黑";
; ; ; ; ; ; ; ; ; ; ; ;position: ;relative;
; ; ; ; ; ; ; ; ; ; ; ;width: ;800px;
; ; ; ; ; ; ; ; ; ; ; ;height: ;400px;
; ; ; ; ; ; ; ; ; ; ; ;margin: ; ;0 ;auto;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;#carousel ;ul{
; ; ; ; ; ; ; ; ; ; ; ;list-style: ;none;
; ; ; ; ; ; ; ; ; ; ; ;margin: ;0;
; ; ; ; ; ; ; ; ; ; ; ;padding: ;0;
; ; ; ; ; ; ; ; ; ; ; ;position: ;relative;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;#carousel ;ul ;li{
; ; ; ; ; ; ; ; ; ; ; ;position: ;absolute;
; ; ; ; ; ; ; ; ; ; ; ;z-index: ;1;
; ; ; ; ; ; ; ; ; ; ; ;top: ;0;
; ; ; ; ; ; ; ; ; ; ; ;left: ;0;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;.imgBox ;img{
; ; ; ; ; ; ; ; ; ; ; ;width: ;800px;
; ; ; ; ; ; ; ; ; ; ; ;height: ;400px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;.btn{
; ; ; ; ; ; ; ; ; ; ; ;position: ;absolute;
; ; ; ; ; ; ; ; ; ; ; ;z-index: ;10;
; ; ; ; ; ; ; ; ; ; ; ;top: ;50%;
; ; ; ; ; ; ; ; ; ; ; ;width: ;45px;
; ; ; ; ; ; ; ; ; ; ; ;height: ;62px;
; ; ; ; ; ; ; ; ; ; ; ;margin-top: ;-31px;
; ; ; ; ; ; ; ; ; ; ; ;text-align: ;center;
; ; ; ; ; ; ; ; ; ; ; ;line-height: ;62px;
; ; ; ; ; ; ; ; ; ; ; ;font-size: ;40px;
; ; ; ; ; ; ; ; ; ; ; ;background: ;rgba(0,0,0,0.4);
; ; ; ; ; ; ; ; ; ; ; ;opacity: ;alpha(opacity=50);
; ; ; ; ; ; ; ; ; ; ; ;display: ;none;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;#pre{
; ; ; ; ; ; ; ; ; ; ; ;left: ;0;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;#next{
; ; ; ; ; ; ; ; ; ; ; ;right: ;0;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;#carousel ;.index{
; ; ; ; ; ; ; ; ; ; ; ;position: ;absolute;
; ; ; ; ; ; ; ; ; ; ; ;bottom: ;10px;
; ; ; ; ; ; ; ; ; ; ; ;left: ;50%;
; ; ; ; ; ; ; ; ; ; ; ;z-index: ;10;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;#carousel ;.index ;span{
; ; ; ; ; ; ; ; ; ; ; ;width: ;15px;
; ; ; ; ; ; ; ; ; ; ; ;height: ;15px;
; ; ; ; ; ; ; ; ; ; ; ;border-radius: ;50%;
; ; ; ; ; ; ; ; ; ; ; ;background: ;#87CEFA;
; ; ; ; ; ; ; ; ; ; ; ;display: ;inline-block;
; ; ; ; ; ; ; ; ; ; ; ;box-shadow:1px ;1px ;6px ;#4169E1; ;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;#carousel ;.index ;span.active{
; ; ; ; ; ; ; ; ; ; ; ;background: ;#4169E1;
; ; ; ; ; ; ; ; ; ; ; ;box-shadow:1px ;1px ;6px ;#87CEFA ;inset; ;
; ; ; ; ; ; ; ;}
; ; ; ;</style>
</head>
<body>
; ; ; ;<div ;id="carousel">
; ; ; ; ; ; ; ;<ul ;class="imgBox">
; ; ; ; ; ; ; ; ; ; ; ;<li><a ;href="#"><img ;src="1.jpg" ;alt=""></a></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><a ;href="#"><img ;src="2.jpg" ;alt=""></a></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><a ;href="#"><img ;src="3.jpg" ;alt=""></a></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><a ;href="#"><img ;src="4.jpg" ;alt=""></a></li>
; ; ; ; ; ; ; ; ; ; ; ;<li><a ;href="#"><img ;src="5.jpg" ;alt=""></a></li>
; ; ; ; ; ; ; ;</ul>
; ; ; ; ; ; ; ;<a ;href="javascript:;" ;class="btn" ;id="next">></a>
; ; ; ; ; ; ; ;<a ;href="javascript:;" ;class="btn" ;id="pre"><</a>
; ; ; ; ; ; ; ;<div ;class="index">
; ; ; ; ; ; ; ; ; ; ; ;<span ;class="active"></span>
; ; ; ; ; ; ; ; ; ; ; ;<span></span>
; ; ; ; ; ; ; ; ; ; ; ;<span></span>
; ; ; ; ; ; ; ; ; ; ; ;<span></span>
; ; ; ; ; ; ; ; ; ; ; ;<span></span>
; ; ; ; ; ; ; ;</div>
; ; ; ;</div>
</body>
</html></pre> ; ;
<span ;style="font-size: ;18px;">这个是使用插件做的：responsiveslides.js</span>
<span ;style="font-size: ;18px;">基于jquery</span>
; ; ; ;<pre><!DOCTYPE ;html>
<html ;lang="en">
<head>
; ; ; ;<meta ;charset="UTF-8">
; ; ; ;<title>Document</title>
; ; ; ;<!-- ;引入插件js和jquery ;-->
; ; ; ;<script ;src="jquery-2.0.3.js"></script>
; ; ; ;<script ;src="responsiveslides.js"></script>
; ; ; ;<style>
; ; ; ; ; ; ; ;#banner{
; ; ; ; ; ; ; ; ; ; ; ;position: ;relative;
; ; ; ; ; ; ; ; ; ; ; ;width: ;800px;
; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ;/* ;插件的默认css属性 ;*/
; ; ; ; ; ; ; ;.rslides ;{
; ; ; ; ; ; ; ; ; ;position: ;relative;
; ; ; ; ; ; ; ; ; ;list-style: ;none;
; ; ; ; ; ; ; ; ; ;overflow: ;hidden;
; ; ; ; ; ; ; ; ; ;width: ;100%;
; ; ; ; ; ; ; ; ; ;padding: ;0;