JQuery简单轮播图

电玩女神 2022-05-31 09:50 253阅读 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,ol\{  
            padding: 0;  
            margin: 0;  
        \}  
        body\{  
            background:\#ccc;  
        \}  
        li\{  
            list-style: none;  
        \}  
        .box\{  
            height:470px;  
            width:590px;  
            margin:100px auto;  
            position: relative;  
            overflow: hidden;  
        \}  
        ul\{  
            width:800%;  
            position: absolute;  
        \}  
        .box .list .item\{  
            float:left;  
        \}  
        .box ol\{  
            position: absolute;  
            bottom:10px;  
            left:50%;  
            transform: translateX(-50%);  
            background:rgba(255,255,255,.4);  
            border-radius: 10px;  
        \}  
        .box ol li\{  
            height:12px;  
            width:12px;  
            background:\#fff;  
            border-radius: 50%;  
            float:left;  
            margin:10px;  
            cursor: pointer;  
        \}  
        .box ol li.now\{  
            background:red;  
        \}  
        span\{  
            height:470px;  
            width:590px;  
            display: block;  
            background:pink;  
            font-size:200px;  
            font-weight: bolder;  
            line-height: 470px;  
            text-align: center;  
        \}  
    </style>  
</head>  
<body>  
    <div class="box">  
        <ul class="list">  
            <li class="item"><a href="\#"><span>1</span></a></li>  
            <li class="item"><a href="\#"><span>2</span></a></li>  
            <li class="item"><a href="\#"><span>3</span></a></li>  
            <li class="item"><a href="\#"><span>4</span></a></li>  
            <li class="item"><a href="\#"><span>5</span></a></li>  
            <li class="item"><a href="\#"><span>6</span></a></li>  
        </ul>  
        <ol>  
            <li class="now"></li>  
            <li></li>  
            <li></li>  
            <li></li>  
            <li></li>  
            <li></li>  
        </ol>  
    </div>  
    <script>  
        $(function()\{  
           $('.box>ol>li').hover(function(e)\{  
                $(this).addClass('now').siblings().removeClass('now');  
           \});  
           $('.box>ol>li').on('click',function(e)\{  
               var $width=590;  
            var $index=$(this).index();  
            $('.list').animate(\{  
                left:-$index\*$width+'px'  
            \})  
           \});  
        \})  
    </script>  
</body>  
</html>