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

Elita ·

更新时间:2024-11-11

· 831 次阅读

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

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

轮播图图片手风琴轮播 JavaScript

1024 个赞