Jquery implements a navigation scrolling effect, and jquery navigation scrolling

Jquery implements a navigation scrolling effect, and jquery navigation scrolling
When I was working on a video website on the campus network, there was a navigation page on the home page to implement the scrolling effect. For example, the Code was hard to understand, it seems that the webpage design is only available to you in your own code. Simply, you can make a copy of the effects of others. In general, it is okay, and it looks smooth, not just the original one. Now copy the code here, and then simplify the modification one by one: to achieve the mixed effect, the script code is as follows: var all = 0; // The number of rolling units var no = 0; // The current position to be rolled, increasing every short time var s_width = 0; // The width of the Rolling Unit $ (document ). ready (function () {all = $ ('. slide '). length; // obtain the number of pages to be rolled. s_width = $ ('. slide '). eq (0 ). width (); // get the width of the scroll unit $ ("# slides" ).css ('width', all * s_width ); // set the width of the outer container to the sum var contiar =$ ('. control_links '); for (var I = 0; I <all; I ++) {contiar. append ("<li> </li>") ;}$ ('. control_links li '). bind ('click mouseenter', function () {var index = $ (this ). index (); no = index; var no _ = no % all; $ ("# slides "). animate ({left :(-1 * no _ * s_width) + 'px '}, 200); then (this..css ('background-color',' # fff '); ((this).siblings().css ('background-color', '#333') ;}); // It is a page switching function executed cyclically. It switches back to setInterval (function () every 5 seconds () {var no _ = no % all; // get the current position to scroll $ ("# slides "). animate ({left :(-1 * no _ * s_width) + 'px '}, 1000); // scroll var curr = $ ('. control_links li '). eq (no _); curr.css ('background-color', '# fff') curr.siblings().css ('background-color',' #333 '); no ++ ;}, 5000) ;}); css code: img {border: none ;}# daohangpic {width: 1000px; margin: 0 auto; padding: 20px; overflow: hidden ;} # daohangpic img {height: pixel PX; width: 980px; }# contiar {position: relative; width: 980px; height: pixel PX; overflow: hidden; margin: 0 auto ;} # slides {position: absolute; border: none ;}. slide {float: left; width: 980px; height: pixel PX; overflow: hidden; border: none ;}. control_links {position: absolute; bottom: 10px; right: 10px; z-index: 200 ;}. control_links ,. control_links li {list-style: none ;}. control_links li {float: left; width: 15px; height: 15px; margin-right: 5px; text-align: center; background: #333; border: 1px solid #666; cursor: pointer; opacity: 0.5 ;}. caption {position: absolute; height: 50px; width: 100%; bottom: 0px; padding-left: 20px; padding-top: 10px; overflow: hidden; z-index: 100; background: url(hdpng.png) no-repeat scroll 0-1px ;}. caption h2 {color: # FFF; font-size: 17px; font-weight: bold; line-height: 25px ;}. caption p {display: block; color: #767676; font-size: 12px; line-height: 15px;} the html code of the area to be rolled is as follows: <div id = "daohangpic"> <div id = "contiar"> <div id = "slides"> <div class = "slide"> <a href = ""> </a> <div class = "caption"> </div> <div class = "slide"> <a href = ""> </a> <div class = "caption"> </div> <div class = "slide"> <a href = ""> </a> <div class = "caption"> </div> <div class = "slide"> <a href = ""> </a> <div class = "caption"> </div> </div>