JQuery轮播图左右焦点（基础版）

我不是女神ヾ 2022-05-31 09:51 244阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>轮播图</title>  
    <script src="./jquery-1.12.4.js"></script>  
    <style>  
        ul\{  
            padding: 0;  
            margin: 0;  
        \}  
        body\{  
            background:\#ccc;  
        \}  
        li\{  
            list-style: none;  
        \}  
        a\{  
            text-decoration: none;  
            display: block;  
        \}  
        .box\{  
            height:470px;  
            width:590px;  
            margin:100px auto;  
            position: relative;  
            overflow: hidden;  
        \}  
        ul\{  
            width:800%;  
            position: absolute;  
        \}  
        .box .list .item\{  
            float:left;  
        \}  
        .con\{  
            display: none;  
        \}  
        .box:hover .con\{  
            display: block;  
        \}  
        .box .left,.box .right\{  
            height:40px;  
            width:30px;  
            text-align: center;  
            line-height: 40px;  
            position: absolute;  
            top:50%;  
            font-size:40px;  
            transform: translateY(-50%);  
            background:rgba(0,0,0,.4);  
            color:\#fff;  
            font-family: '宋体';  
            z-index:999;  
        \}  
        .box .right\{  
            right:0;  
        \}  
    </style>  
</head>  
<body>  
    <div class="box">  
        <div class="con">  
                <a class="right" href="javascript:void(0);">></a>  
                <a class="left" href="javascript:void(0);"><</a>  
        </div>  
        <ul class="list">  
            <li class="item"><a href="\#"><img src="http://m.360buyimg.com/babel/jfs/t16549/169/2001807237/89910/e5c6ef8f/5a7fa182Na786cdab.jpg" alt=""></a></li>  
            <li class="item"><a href="\#"><img src="http://img10.360buyimg.com/da/jfs/t18664/216/377923615/144632/38742576/5a70262cN0b5f8bd6.jpg" alt=""></a></li>  
            <li class="item"><a href="\#"><img src="http://img11.360buyimg.com/da/jfs/t13834/120/2302599229/196140/b15fe6af/5a38e2f2Nb1fa2f03.jpg" alt=""></a></li>  
            <li class="item"><a href="\#"><img src="http://m.360buyimg.com/babel/jfs/t16765/52/471564239/71582/335fb964/5a7d5e60Nb5190b6a.jpg" alt=""></a></li>  
            <li class="item"><a href="\#"><img src="http://img11.360buyimg.com/da/jfs/t19198/178/384261307/100278/a325be09/5a7134cfN50242ff7.jpg" alt=""></a></li>  
            <li class="item"><a href="\#"><img src="http://m.360buyimg.com/babel/jfs/t16963/82/433104632/89908/ac0b956f/5a7813c3N05188862.jpg" alt=""></a></li>  
        </ul>  
          
    </div>  
    <script>  
        $(function()\{  
            var count=0;  
            var $width=590;  
           $('.right').on('click',function(e)\{  
            if(count == $('.list img').length-1)\{  
                   return;  
               \}  
                count++;  
               $('.list').animate(\{  
                   left:-count\*$width+'px'  
               \})  
           \});  
           $('.left').on('click',function(e)\{  
            if(count <= 0)\{  
                   return;  
               \}  
                count--;  
               $('.list').animate(\{  
                   left:-count\*$width+'px'  
               \})  
           \});  
        \})  
    </script>  
</body>  
</html>