I haven't updated recently, so I'll just add a few effects to enrich it.
None of them beautify this step.
Pure css accordion:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>accordion 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; } /* This is the core of css accordion, which is the use of hover**First of all, ul:hover li triggers changes that have passed through ul but not through ul** Then ul li:hover Here is the changes that have been passed through lib, matching the animation effects of css3 and some effects of css3 on page beautification, you can make a good-looking accordion. If you use pure JS implementation, it may be troublesome. */ 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> <ul> <li><span> This is the first</span><img src="1.jpg"></li> <li><span> This is the second</span><img src="2.jpeg"></li> <li><span>This is the third</span><img src="3.jpg"></li> <li><span>This is the fourth</span><img src="4.jpg"></li> <li><span>This is the fifth</span><img src="5.jpg"></li> </ul> </div></body></html>css3 accordion:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3-checked:</title> <style> /* Use radio's single-choice feature to achieve the accordion effect*/ 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">My classmate</label> <input type="radio" name="list" id="list1" checked="chekced"/> <ul> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> </ul> <label for="list3">My Classmate</label> <input type="radio" name="list" id="list3"/> <ul> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> </ul> <label for="list4">My classmate</label> <input type="radio" name="list" id="list4"/> <ul> <li><a href="">Classmate</a></li> <li><a href="">Classmate</a></li> <li><a href="">Classmate</a></li> <li><a href="">Classmate</a></li> <li><a href="">Classmate</a></li> </div></body></html>Accordion implemented by javascript:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>accordion</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) { /*get element*/ var oDiv=document.querySelector(name); /*Declare minimum width*/ var iMinWidth=9999999; /*get element*/ var aLi=oDiv.getElementsByTagName('li'); var aSpan=oDiv.getElementsByTagName('span'); /*Timer container default*/ oDiv.timer=null; /*Loop add event and custom attribute index value*/ for(vari=0;i<aSpan.length;i++) { aSpan[i].index=i; aSpan[i].onmouseover=function () { gotoImg(oDiv, this.index, iMinWidth); }; /*get the minimum width*/ iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth); } }; function gotoImg(oDiv, iIndex, iMinWidth) { if(oDiv.timer) { /*Clear the timer to avoid overlay*/ clearInterval(oDiv.timer); } /*Open the timer*/ oDiv.timer=setInterval ( function () { changeWidthInner(oDiv, iIndex, iMinWidth); }, 30 ); } /*This is the key, motion*/ function changeWidthInner(oDiv, iIndex, iMinWidth) { var aLi=oDiv.getElementsByTagName('li'); var aSpan=oDiv.getElementsByTagName('span'); /*Get the size of the box, this is the total width*/ var iWidth=oDiv.offsetWidth; /*The width declaration of the indented picture*/ var w=0; /*Judgement declaration, in order to clear the timer declaration*/ var bEnd=true; /*Loop to loop each image, in order to get the extended and shrink elements*/ for(var i=0;i<aLi.length;i++) { /*This is to get the extended index*/ if(i==iIndex) { continue; } /*There are elements that have no changes, so the minimum width is saved*/ if(iMinWidth==aLi[i].offsetWidth) { /*Total width subtract these widths, because they are also in the total width*/ iWidth-=iMinWidth; continue; } /*The code in the following loop is the reduced elements*/ /*Do not clear the timer, and it has not finished exercising*/ bEnd=false; /*Get speed, fast first and then slow */ speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10); /*Reduce the remaining width*/ w=aLi[i].offsetWidth-speed; /*To avoid the shrinking element being less than the minimum width*/ if(w<=iMinWidth) { w=iMinWidth; } /*Set the width of the shrinking element*/ aLi[i].style.width=w+'px'; /*Subtract the shrinking width, the remaining width is the extended width*/ iWidth-=w; } /*Width of the extended element*/ aLi[iIndex].style.width=iWidth+'px'; if(bEnd) { clearInterval(oDiv.timer); oDiv.timer=null; } } </script></head><body> <div> <ul> <li><span> This is the first</span><img src="1.jpg"></li> <li><span> This is the second</span><img src="2.jpeg"></li> <li><span> This is the third</span><img src="3.jpg"></li> <li><span> This is the fourth</span><img src="4.jpg"></li> <li><span> This is the fifth</span><img src="5.jpg"></li> </ul> </div></body></html>The next thing will be to use animation effects, so as to encapsulate the motion:
/*Use calls, obj object, attr attribute, speed speed, the value that iTarget wants to achieve, fn callback function*//*Because movements are basically in units of px, as for transparency, there is no unit, so I separate it here. In fact, I didn't change it much, just judge whether it is the transparency attribute, and then go to the transparency line*/ 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,"opacity")); } /*The direction here is judged. The one after the initial point is negative and the one before the initial point is positive*/ 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; } /*This is to determine whether the target point has reached, stop the timer when it has arrived*/ 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"; } /*Because it cannot realize the complete function of the callback function, some bugs have occurred*/ if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){ fn && fn(); } },30); } /*If you get the css attribute value, you will get the value of the performance*/ function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; }Carousel image:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Carousel diagram</title> <!-- This is a reference to encapsulated motion function --> <script type="text/javascript" src="doMove.js"></script> <script type="text/javascript"> window.onload=function(){ /*Call to implement carousel*/ 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; /*Give the highest level of the first picture*/ aLi[0].style.zIndex=5; /*Judge whether the timer exists*/ if(!oScl.timer){ oScl.timer=null; } /*This is automatic carousel on*/ oScl.timer=setInterval(function(){ num++; num%=aLi.length; play(); },2000); /*Show and hide on the upper and lower pages*/ oScl.onmouseover=function(){ /*Move in stop timer*/ clearInterval(oScl.timer); next.style.display="block"; pre.style.display="block"; } oScl.onmouseout=function(){ next.style.display="none"; pre.style.display="none"; /*Move out on timer*/ oScl.timer=setInterval(function(){ num++; num%=aLi.length; play(); },2000); } /*Click the previous and next page*/ 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(); } /*Index point*/ for(var i=0;i<aIndex.length;i++){ aIndex[i].index=i; aIndex[i].onmouseover=function(){ num=this.index; play(); } } /*Animation execution function*/ function play(){ /*Just determine whether it is the same trigger point, such as the two moves of the index point are the same. If it is not executed, avoid repeated execution continuously*/ if(index!=num){ for(var i=0;i<aLi.length;i++){ /*Set all levels to 1*/ aLi[i].style.zIndex=1; } /*Set the level of the last carousel to 2*/ aLi[index].style.zIndex=2; aIndex[index].className=""; aIndex[num].className="active"; index=num; /*Set the transparency of the figure of this carousel to 0*/ aLi[num].style.opacity=0; /*Set the level of the figure that is a carousel to 5*/ aLi[num].style.zIndex=5; /*Motion function encapsulation, fade out of this picture*/ doMove(aLi[num],"opacity",10,100); } } } </script> <style> a{ text-decoration: none; color: #555; } #carousel{ font-family: "Microsoft Yahei"; 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> <li><a href="#"><img src="1.jpg"></a></li> <li><a href="#"><img src="2.jpg"></a></li> <li><a href="#"><img src="2.jpg"></a></li> <li><a href="#"><img src="3.jpg"></a></li> <li><a href="#"><img src="4.jpg"></a></li> <li><a href="#"><img src="5.jpg"></a></li> </ul> <a href="javascript:;" id="next">></a> <a href="javascript:;" id="pre"><</a> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div></body></html>This is done using plugin: responsiveslides.js
Based on jquery
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- Introducing plugins js and jquery --> <script src="jquery-2.0.3.js"></script> <script src="responsiveslides.js"></script> <style> #banner{ position: relative; width: 800px; } /* The default css attribute of the plugin*/ .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; } /* , modified, modified to dot button*/ 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 This is equivalent to active */ ul.rslides_tabs.rslides1_tabs li.rslides_here a{ background: #004F88; } /* class name of left and right buttons*/ .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, // Default is false, when displaying (true), the index point is displayed, the default is the number 12345, just go to js library to modify nav: true, // Show the previous and next photo navigation pause: false, // Move in and out whether the mouse is moved in and out pauseControls: true, // Boolean: Pause when hovering controls, true or false prevText: "<", // Modify the symbols of left and right buttons 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><!-- Use a div to wrap it, and those tags added by js will be loaded directly behind the ul tag--><div id="banner"> <ul id="rslides"> <li><img src="111.jpg"></li> <li><img src="222.jpg"></li> <li><img src="333.jpg"></li> <li><img src="444.jpg"></li> <li><img src="555.jpg"></li> </ul></div></body></html>Image Slide:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Image Sliding</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> <!-- Quoting motion function--> <script type="text/javascript" src="doMove.js"></script> <script type="text/javascript"> window.onload=function(){ /*Calling function to achieve sliding*/ 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"); /*get the sliding width*/ var w=oC_wrap.offsetWidth; /*Click the left button*/ 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"; }) } /*Click the button on the right*/ 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> <div> <div> <ul> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> </ul> <ul> <li><img src="4.jpg"></li> <li><img src="5.jpg"></li> <li><img src="6.jpg"></li> </ul> </div> </div> <div> <a href="javascript:;"></a> </div> </div></body></html>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.