jQuery实现简单的图片轮播

你的名字 2022-08-06 04:21 281阅读 0赞

最近学习了一下前端技术jQuery，现学现用，今天就使用它实现一个简单的图片轮播，下面直接上代码。

1. html部分

<!doctype html>
    <html>
        <head>
            <title>test</title>
            <meta charset="utf-8">
            <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    		<link href="test.css" type="text/css" rel="stylesheet"></link>
            <script type="text/javascript">
                var num = 1;
                $(document).ready(function(){
                    $("ol li").mouseover(function(){
    					// 设置css样式
                        $(this).addClass("current");
                        $(this).siblings().removeClass("current");
                        
    					// 获取图片索引值
                        var index = $(this).index();
                        
                        // 增加图片的的z-index值，使其放置在页面顶层
                        $("ul li").eq(index).css("z-index", num++);
                        
                        // 增加图片的left值，然后再使用jQuery的animate动画方法将其移动到left值为0的位置
                        $("ul li").eq(index).css("left", "300px");
                        $("ul li").eq(index).animate({left: "0"}, 800);
                    });
                });
            </script>
        </head>
        <body>
            <div class="nav">
                <ul>
                    <li>
                        <img src="images/Chrysanthemum.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/Desert.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/Hydrangeas.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/Jellyfish.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/Koala.jpg" alt="">
                    </li>
                </ul>
                <ol>
                    <li class="box">1</li>
                    <li class="box">2</li>
                    <li class="box">3</li>
                    <li class="box">4</li>
                    <li class="box current">5</li>
                </ol>
            </div>
        </body>
    </html>

2.css部分

* {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    } .nav {
        width: 650px;
        height: 250px;
        margin: 100px auto;
        z-index: 1;
        position: relative;
    } .nav ul li {
        position: absolute;;
        left: 0;
        top: 0;
    } .nav ul li img {
        width: 650px;
        height: 250px;
    }
    
    ol {
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 100;
    }
    
    ol li {
        float: left;
        margin-left: 10px;
    } .box {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        background: #ddd;
        cursor: pointer;
    } .current {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #f60;
        background: #f60;
        color: #fff;
        margin-top: -10px;
    }

![20141221195855500][]

[20141221195855500]: /images/20220806/85e86e2653d74508ba073df315523f29.png