写的好复杂，这里的js怎样精简并提高可复用性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <style>
 *{
            margin: 0;
 padding: 0;
 color:white;
 font-weight: bold;
 }
        .slidebox{
            width:500px;
 height: 300px;
 background-color: pink;
 margin: 30px auto 0;
 overflow: hidden;
 position: relative;
 }
        .content{
            position: absolute;
 display: block;
 width: 1500px;
 height: 300px;
 left: 0;
 top: 0;
 }
        .content{
            list-style: none;
 }
        .content li{
            float: left;
 width: 500px;
 height: 300px;
 background-color: #00bbee;
 }
        .select{
            display: block;
 width: 100%;
 height: 30px;
 position: absolute;
 bottom: 50px;
 text-align: center;
 list-style: none;
 }
        .select li{
            font-size: 50px;
 display: inline-block;
 cursor: pointer;
 }
        .lt{
            position: absolute;
 left: 20px;
 top:135px;
 font-size: 30px;
 cursor: pointer;
 }
        .gt{
            position: absolute;
 right: 20px;
 bottom:135px;
 font-size: 30px;
 cursor: pointer;
 }
        .select li,.lt,.gt{
            opacity: 0.6;
 }
        .lt:hover,.gt:hover{
            opacity: 1;
 }
        .select li.active{
            opacity: 1;
 }
    </style>
</head>
<body>
    <div class="slidebox">
        <ul class="content">
            <li style="background-color: #00ee00"></li>
            <li style="background-color: #95B8E7"></li>
            <li style="background-color: goldenrod"></li>
        </ul>
        <ul class="select">
            <li id="li1" class="active">.</li>
            <li id="li2">.</li>
            <li id="li3">.</li>
        </ul>
        <a class="lt">&lt;</a>
        <a class="gt">&gt;</a>
    </div>
</body>
<script>
 $(function(){
        $(".gt").click(function(){
            var imgpos=parseInt($(".content").css("left"));
 imgpos-=500;
 if(imgpos<-1000){imgpos=0}
            $(".content").css("left",imgpos);
 indexFun();
 });
 $(".lt").click(function(){
            var imgpos=parseInt($(".content").css("left"));
 imgpos+=500;
 if(imgpos>0){imgpos=-1000}
            $(".content").css("left",imgpos);
 indexFun();
 });
 var slideFun=function(){
        var imgpos=parseInt($(".content").css("left"));
 imgpos-=500;
 if(imgpos<-1000){imgpos=0}
        $(".content").css("left",imgpos);
 indexFun();
 };
 var indexFun=function(){
            var imgpos=parseInt($(".content").css("left"));
 if(imgpos==0){
                $("#li1").addClass("active").siblings().removeClass("active");
 }else if(imgpos==-500){
                $("#li2").addClass("active").siblings().removeClass("active");
 }else{
                $("#li3").addClass("active").siblings().removeClass("active");
 }
        }
    var timer=setInterval(slideFun,1000);
 $(".slidebox").hover(
            function(){
                clearInterval(timer);
 },function(){
               clearInterval(timer);
 timer=setInterval(slideFun,1000);
 });
 var listbtn=$(".select li");
 listbtn.each(function(){
            var index=$(this).index();
 $(this).hover(function(){
                $(this).addClass("active").siblings().removeClass("active");
 $(".content").css("left",-index*500);
 })
        })
    })
</script>
</html>
qq_sU_4
浏览 1707回答 1
1回答

慕粉3163795
提高可复用性最简单的方法就是函数封装。
0 0
随时随地看视频慕课网APP