JS native option (includes Seamless scrolling carousel Diagram) One

Native JS Tab Several ways of writing, the whole article I will be Jane and difficult to describe several common native tabs of the wording;

Improve little by little every day!

1> Basic Tab:
Idea: the loop is cleared before adding, note the point of this and the application of the custom attribute

HTML code:

<div id= "tab" >    <input class= "on" type= "button" value= "aaa" >    <input type= "button" value= "bbb" >    <input type= "button" value= "ccc" >    <div class= "active" >111</div>    <div>222 </div>    <div>333</div></div>

　　

CSS Code:

        #tab. on{            background:skyblue;        }        #tab div{            width:200px;            height:200px;            Background: #ccc;            display:none;        }        #tab. active{            display:block;        }

JS Code:

        Window.onload=function () {            var otab=document.getelementbyid (' tab ');            var abtn=otab.getelementsbytagname (' input ');            var adiv=otab.getelementsbytagname (' Div ');            For (var i=0;i<abtn.length;i++) {                abtn[i].index=i;                Abtn[i].onclick=function () {for                    (var i=0;i<abtn.length;i++) {                        abtn[i].classname= ';                        Adiv[i].classname= ';                    }                    This.classname= ' on ';                    Adiv[this.index].classname= ' Active ';};}        ;

　　

2> Seamless Scrolling tab

Layout ideas: ul pictures, in 0.jpg-4.jpg before and after adding a tail of the Picture. When the picture (ul) moves forward to 4.jpg to continue moving forward, when the movement to the end of the last 0.jpg of the moment to pull the UL back to the position of the second picture (0.jpg), and then continue to move forward; conversely, when the picture moves backwards to the first picture (4.jpg), when the movement is over, instantly the picture (ul Pull down the Second-to-last (4.jpg) position, which creates a seamless scrolling;

The focus of the Layout:
Cont is a mask layer, pre and next constitute a mask overlay on the visual image, when the mouse click on the left half of the visual image, the picture moves forward, when the mouse click on the right half of the visual area, the picture backward motion;

JS Code added a inow, used to the position of normal photos should be before, and with the following ol in the Li Dot corresponds; inow also has a role to be associated with the position of the UL mobile;
JS needs to be aware of the value of judging inow to cycle the picture

HTML code:

 <div id= "tab" > <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div id=" cont "> <div class=" pre "><span> left </sp                an></div> <div class= "next" ><span> right </span></div> <ol>                <li class= "on" ></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> </div 

CSS Code:

        *{padding:0;            margin:0;        list-style:none;            } #tab {width:300px;            height:172px;            position:relative;            margin:100px auto;        overflow:hidden;            } #tab ul{width:2100px;            overflow:hidden;            position:absolute;            top:0;        left:0px;            } #tab ul li{width:300px;        float:left;        } #tab ul Li img{width:300px;            } #cont {width:300px;            height:172px;            position:absolute;            top:0;        left:0;            } #cont div{width:150px;            height:100%;            float:left;        display:none;            } #cont Div span{width:40px;            height:40px;            Background:rgba (0,0,0,0.2);            text-align:center;            line-height:40px; font-size:20px;            Color: #fff;            position:absolute;            top:50%;        margin-top:-20px;        } #cont. Pre span{left:0;        } #cont. Next span{right:0;            } #cont ol{width:100px;            position:absolute;            left:100px;        bottom:10px;            } #cont ol li{width:10px;            height:10px;            Background: #ccc;            border-radius:50%;            margin:5px;        float:left;        } #cont Ol. on{background:red; }

　　

JS Code:
Here I add a move motion function of my own writing, and then I will write a separate article about the idea of the motion function encapsulation; here, Please introduce this motion function file into your js;

<script src= "move-end.js" ></script> window.onload=function () {var otab=document.getelementbyi            D (' Tab ');            var oul=otab.getelementsbytagname (' ul ') [0];            var ali=oul.children;            var Ocont=document.getelementbyid (' Cont ');            var obtn=ocont.getelementsbytagname (' Div ');            var obar=ocont.getelementsbytagname (' ol ') [0];            var ac=obar.children;            Locate Ul's initial position var inow=1;            oul.style.left=-ali[0].offsetwidth*inow+ ' px ';                When the mouse moves into the mask layer, the button appears, moves out of the mask layer, and the button disappears Ocont.onmouseover=function () {obtn[0].style.display= ' Block ';            Obtn[1].style.display= ' Block ';            };                Ocont.onmouseleave=function () {obtn[0].style.display= ' None ';            Obtn[1].style.display= ' None ';            };                Picture forward motion function next () {inow--; Move (oul,{left:-ali[0].offsetwidth*inow},{"complete": function() {if (inow==0) {inow=ali.length-2;                    oul.style.left=-ali[0].offsetwidth*inow+ ' px ';                    } for (var I=0;i<ac.length;i++) {ac[i].classname= ";                } ac[inow-1].classname= ' on ';            }});                }//backward motion function Pre () {inow++;                        Move (oul,{left:-ali[0].offsetwidth*inow},{' complete ': function () {if (inow==ali.length-1) {                        inow=1;                    oul.style.left=-ali[0].offsetwidth*inow+ ' px ';                    } for (var I=0;i<ac.length;i++) {ac[i].classname= ";                } ac[inow-1].classname= ' on ';            }});            } obtn[0].onclick=function () {pre ();            }; Obtn[1].onclick=function () {nExt ();        }; };

Move function:

/* Created by Jason on 2016/9/7. */function getStyle (obj,sname) {return (obj.currentstyle | | getComputedStyle (obj,false)) [sName];} function move (obj,json,options) {var options=options | |        {}; var Duration=options.duration | |    1000; var easing=options.easing | |    ' Linear ';    var start={};        var dis={};        For (name in Json) {start[name]=parsefloat (getStyle (obj,name));    dis[name]=json[name]-start[name];    }//start {width:50,} Dis {width:150}//console.log (start,dis);      var Count=math.floor (duration/30);    var n=0;    Clearinterval (obj.timer);            Obj.timer=setinterval (function () {if (n>count) {clearinterval (obj.timer);        Options.complete && Options.complete (); }else{for ("name in Json") {switch (easing) {case ' linear ': var a=n/c                    ount;                    var cur=start[name]+dis[name]*a;                Break            Case ' Ease-in ':        var a=n/count;                    var cur=start[name]+dis[name]*a*a*a;                Break                    Case ' Ease-out ': var a=1-n/count;                    var cur=start[name]+dis[name]* (1-a*a*a);            Break            } if (name== ' opacity ') {obj.style.opacity=cur;            }else{obj.style[name]=cur+ ' px ';    }}} n++; },30);}

Write it here today, and tomorrow I will continue to refine the Tab's Auto-play seamless tab;

JS native option (includes Seamless scrolling carousel Diagram) One