jquery Carousel Diagram Exercise

<script type= "Text/javascript" >/* Function Description: 1. Click the icon to the right (left) to switch smoothly to the next (top) page 2. Infinite loop switch: The previous page of the first page is the last page, the next page of the last page is the first Page 3. Automatically swipe every 3s to the next page 4. When the mouse enters the picture area, the automatic switch stops, and when the mouse leaves, it starts to automatically switch 5. When you switch pages, the following dots also synchronize update 6. Click the dots icon to switch to the corresponding page 7. BUG: A bug that occurs when a quick Click is currently being paged, does not perform the page turn function///Prepare the variable you need to use $ (function () {var $container = $ (' #cont          Ainer ') var $list = $ (' #list ') var $points = $ ("#pointsDiv >span") var $prev = $ (' #prev ')  var $next = $ (' #next ') var setof = 600//offset var alltime = 400//Total time spent on paging var intem_time = 20//interval var imgcount = $points. Length//number of pictures var index = 0//The subscript of the currently displayed picture and the subscript var of the variable Hongyuan point movi ng = False//indicates that the initial state is not on page flip//1.  Click the right (left) icon to smooth switch to the next (up) page $next. Click (function () {page (True)}) $prev. Click (function () {page (false)})//3 automatically page every two seconds, is the next page var Interid = SetInterval (function () {Page (true)},2000)//4. When the mouse enters the picture area, the automatic switch stops, and when the mouse leaves, it starts to automatically switch the $container. Hover (function () {//move in, stop timer clearinte              Rval (Interid)},function () {//move out, start timer Interid = setinterval (function () { Page (True)},2000)})//5. When you toggle the page, the dots below also update updatepoints (next)//6 Click the dot icon to switch to the corresponding page $points. Click (function () {//To page 1            : The target's subscript var Targetindex = $ (this). Index ()//target subscript is not equal to the currently displayed subscript if (targetindex! = index)      {Page (Targetindex)}})           Next parameter is 3 in case//(1) True next->//(2) False pre->//(3) value//need to flip function page (next) {          /*////Get the current left value var currentleft = $list. Position (). Left//values that need to be offset are instantly paged var offset = next?-setof:+setof $list. css(' left ', offset+currentleft) *//Use timer to smooth page flipping//get current left value//offset if (moving) {          return//Is paging the page when the paging}//Run the function when the page is paging moving = true var offset = 0          if (typeof next = = ' Boolean ') {offset = next -600:600;          } else {//2 0 Offset is negative//0 2 offset is positive offset =-(next-index) * Setof } var currentleft = $list. Position (). Distance of the left//targetleft target var targetleft = offset +curr Entleft//short distance for single move var itme_left = offset/(alltime/intem_time) var interalid = SetInterval (func tion () {currentleft + = Itme_left if (currentleft = = = Targetleft) {Cleari Nterval (Interalid)///When the page is finished//stop paging moving = false//When the picture reaches the right picture (1.jpg), the second to the left Picture (1.jpg) if (Currentleft = = (-(imgcount+1)*setof))//When reaching the rightmost -3600px {currentleft =-setof}else if (currentleft = = = 0) {          Currentleft =-imgcount*setof}} $list. css (' left ', currentleft) },20)//Arrival next Updatepoints (next)//currently only considered Boolean type} function Updatepoints (next) {//              1: Calculate the target origin var targetindex = 0 if (typeof next = = = "Boolean") {if (next) {              True Targetindex = index + 1 if (Targetindex = = = Imgcount)//For last 1.jpg, span index = 0 {targetindex = 0}} else {Targetindex = Targetindex-1 if (targetindex = = =-1) {Targeti            Ndex = imgCount-1}//The leftmost picture when Targetindex = 4}}else { Targetindex = next}//moves the current subscript span class property out of the $pOints.eq (Index). Removeclass ("on")//$points [index].classname = ""//Add $points to the target origin. EQ (targetin DEX). addclass (' on ')//update index index = targetindex}) </script>

　　

jquery Carousel Diagram Exercise