javascript经典特效分享手风琴、轮播图、图片滑动

140 阅读 0 评论 93 点赞

我是靠谱客的博主故意嚓茶，最近开发中收集的这篇文章主要介绍javascript经典特效分享手风琴、轮播图、图片滑动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近都没有更，就来几个效果充实一下。
都没有进行美化这步。

纯css的手风琴：

<!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>

css3手风琴：

<!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>

javascript实现的手风琴：

<!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>

接下来的都是会使用到动画效果，既然这样就把封装好运动：

/*使用调用，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];
  }

轮播图：

<!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>

这个是使用插件做的：responsiveslides.js

基于jquery

<!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;
   margin: 0;
   }

  .rslides li {
   -webkit-backface-visibility: hidden;
   position: absolute;
   display: none;
   width: 100%;
   left: 0;
   top: 0;
   }

  .rslides li:first-child {
   position: relative;
   display: block;
   float: left;
   }

  .rslides img {
   display: block;
   height: auto;
   float: left;
   width: 100%;
   border: 0;
   }
   /* ，被修改过的，修改成圆点按钮 */
   ul.rslides_tabs.rslides1_tabs {
   position: absolute;
   bottom: 10px;
   left: 45%;
   list-style: none;
   z-index: 10;
  }
  ul.rslides_tabs.rslides1_tabs li{
   float: left;
   
  }
  ul.rslides_tabs.rslides1_tabs li a{
   display: block;
   border-radius: 50%;
   width: 10px;
   height: 10px;
   margin-right: 10px;
   background: #fff;
  }
  /* .rslides_here 这个相当于active */
  ul.rslides_tabs.rslides1_tabs li.rslides_here a{
   background: #004F88;
  }
  /* 左右按钮的class名 */
  .rslides_nav.rslides1_nav{
   position: absolute;
   top: 50%;
   color: #eee;
   font-size: 40px;
   text-decoration: none;
   z-index: 4;
  }
  .rslides_nav.rslides1_nav.pre{
   left: 10px;
  }
  .rslides_nav.rslides1_nav.next{
   right: 10px;
  }

  .rslides img{
   height: 400px;
  }
 </style>
 <script>
 $(function() {
 $(".rslides").responsiveSlides({
   pager: true,   
   // 默认为false,需要展示时（true）展示索引点，默认为数字12345，去js库里修改就可以了
   nav: true,    // 展示上一张和下一张的导航
   pause: false,   // 鼠标移入移出是否停止
   pauseControls: true, // Boolean: Pause when hovering controls, true or false
   prevText: "<", // 修改左右按钮的符号
   nextText: ">",  // String: Text for the "next" button
   "maxwidth":"800px"
 });
 $(".rslides1_nav").css("display","none"); 
 $("#banner").mouseover(function(){
  $(".rslides1_nav").css("display","block");
 })
  $("#banner").mouseout(function(){
  $(".rslides1_nav").css("display","none");
 })
 
 });
</script>
 </script>
</head>
<body>
<!-- 使用一个div包住它，而那些js添加的标签会直接加载到ul标签后面 -->
<div id="banner">
 <ul class="rslides" id="rslides">
  <li><img src="111.jpg" alt=""></li>
  <li><img src="222.jpg" alt=""></li>
  <li><img src="333.jpg" alt=""></li>
  <li><img src="444.jpg" alt=""></li>
  <li><img src="555.jpg" alt=""></li>
 </ul>
</div>
</body>
</html>

图片滑动：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片滑动</title>
 <style>
  .container{
   position: relative;
   width: 630px;
   border: 2px solid #888;
   padding: 5px;
  }
  .c-wrap{
   width: 630px;
   overflow: hidden;
  }
  .container img{
   width: 200px;
   height: 90px;
  }

  .container ul{
   list-style: none;
   margin: 0;
   padding: 0;
  }
  .container ul li{
   float: left;
   margin-right: 10px;
  }
  .container .imgBigBox{
   width: 33000px;
   margin-left: 0px;
  }
  .imgBigBox:after{
   content: " ";
   display: block;
   clear: both;
  }
  .btnGroup{
   border: 1px solid #888;
   width: 65px;
  }
  .btnGroup a{
   text-align: center;
   line-height: 20px;
   text-decoration: none;
   color: #888;
   font-size: 20px;
   display: inline-block;
   width: 30px;
  }
  .btn1{
   margin-right: 4px;
   border-right: 1px solid #888;
  }
 </style>
 <!-- 引用运动函数 -->
 <script type="text/javascript" src="doMove.js"></script>
 <script type="text/javascript">
  window.onload=function(){
   /*调用函数实现滑动*/
   slide(".container");
  }

  function slide(name){
   var oContainer=document.querySelector(name);
   var oImgBigBox=oContainer.querySelector(".imgBigBox");
   var aBtn=oContainer.querySelectorAll(".btnGroup a");
   var oC_wrap=oContainer.querySelector(".c-wrap");
   /*获取滑动宽度*/
   var w=oC_wrap.offsetWidth;
   /*点击左边按钮*/
   aBtn[0].onclick=function(){
    doMove(oImgBigBox,"marginLeft",10,-w,function(){
    var child=oImgBigBox.children[0].cloneNode(true);
     oImgBigBox.appendChild(child);
     oImgBigBox.removeChild(oImgBigBox.children[0]);
     oImgBigBox.style.marginLeft="0px";
    })
   }
   /*点击右边按钮*/
   aBtn[1].onclick=function(){
     oImgBigBox.insertBefore(oImgBigBox.children[1],oImgBigBox.children[0]);
     oImgBigBox.style.marginLeft=-w+"px";
    doMove(oImgBigBox,"marginLeft",10,0)
   }
  }
 </script>
</head>
<body>
 <div class="container">
  <div class="c-wrap">
   <div class="imgBigBox">
    <ul class="imgBox">
     <li><img src="1.jpg" alt=""></li>
     <li><img src="2.jpg" alt=""></li>
     <li><img src="3.jpg" alt=""></li>
    </ul>
    <ul class="imgBox">
     <li><img src="4.jpg" alt=""></li>
     <li><img src="5.jpg" alt=""></li>
     <li><img src="6.jpg" alt=""></li>
    </ul>
   </div>
  </div>
  <div class="btnGroup">
   <a href="javascript：;" class="btn1"><</a><a href="javascript：;" class="btn2">></a> 
  </div>
 </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。