JQ slide slides

The code for the JQ slide slides that have been found online for a long time is highly handwritten.
It's easy to change a lot of parameters.

This is what I wrote myself. I mainly practiced the usage of several functions.

HTML section:

<div class="silde">    <ul class="container">        <li></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>        <div class="index">        <ul>            <li><a href="#">1</a></li>                <li><a href="#">2</a></li>                <li><a href="#">3</a></li>                <li><a href="#">4</a></li>                <li><a href="#">5</a></li>            </ul>        </div>    </div>

CSS section:

.silde{width:960px; height:200px; overflow:hidden; display:block; border:1px #999 dashed; margin-top:100px; float:left;}.silde .container{width:5050px; height:auto; position:relative;}.silde ul{list-style:none;}.silde ul li{float:left; width:960px; text-align:center;}.silde .index{width:200px; height:30px; margin-right:5px; position:absolute; left:1000px; top:100px;}.index li{list-style:none; float:left;}.index li a{background:#CCCCCC; width:100px; height:20px; float:left; text-align:center; margin:10px; display:block; opacity:0.5; text-decoration:none; color:#FFF;}.index li a:hover{background:#FC3; float:left;}

JQ section:

 var ifmove=false;var setleft=0;var CN=1;var PN=1;var speed=0;var setoffmove=0;var T=null;var lock=false;function moveleft(){    try{        if(ifmove==true){            setleft-=speed;            setoffmove-=speed;            $(".container").css("left",setleft);            if(setoffmove<=0){                lock=false;                ifmove=false;                }            T=window.setTimeout("moveleft()",10);        }    }catch(e){        alert(e);    }};function moveright(){    try{        if(ifmove==true){            setleft+=speed;            setoffmove-=speed;            $(".container").css("left",setleft);            if(setoffmove<=0){                lock=false;                ifmove=false;            }            T=window.setTimeout("moveright()",10);        }    }catch(e){        alert(e);    }};$(document).ready(function(e) {    $("li").click(function(){        if(lock==false){            lock=true;            CN=$(this).find("a").html();            if(CN>PN){                setoffmove=(CN-PN)*960;                ifmove=true;                speed=10;                PN=CN;                    moveleft();            }else if(CN<PN){                setoffmove=(PN-CN)*960;                ifmove=true;                speed=10;                PN=CN;                moveright();            }        }        return false;    });});

PS:

Div cannot use position: absolute. You should use position: relative. You didn't pay attention to it for a long time at the beginning ....