CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）相关的知识，希望对你有一定的参考价值。
参考技术A 简单demo：使用html+CSS 实现轮播图（三张图为例，分别为：红、绿、蓝）的效果。不能发视频，截图来代替吧
1.显示 轮播图1（实际轮播的第2个元素li）
2.显示 轮播图2（实际轮播的第3个元素li）
3.显示 轮播图3（实际轮播的第4个元素li）
4.显示 轮播图1（实际轮播的第5个元素li,之后会紧跟着重复以上动作）
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>
到此为止
以上是关于CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）的主要内容，如果未能解决你的问题，请参考以下文章