鼠标滑动切换图片

wp231957 · 发表于 2020-2-24 16:34:14

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 wp231957 于 2020-2-24 19:32 编辑

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示鼠标滑动切换图像的页面</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
        <style>
                .circle ul li
                                         {
                                                list-style:none;
                                                float:left;
                                                        width:40px;
                                                        height:40px;
                                                        background:orange;
                                                        margin-left:5px;
                                                        border-radius: 50%;
                                        
                                          }
                                          .circle ul
                                          {
                                                 overflow:hidden;
                                                         height:50px;
                                                         margin-top:20px;
                                                         margin-left:120px;
                                          }
                                          .circle
                                          {
                                                 position:absolute;
                                                         bottom:200px;
                                                         left:20%;
                                                         width:400px;
                                                         height:400px;
                                                         border:1px solid #000;
                                          }
                                          .circle ul li.current
                                          {
                                                 background:red;

                                          }
        </style>
</head>
<body>
     <div class="circle" id="circle">
            <img width=400px  height=400px id="img01" src="/pic/2111.png"></img>
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
                        <li></li>
        </ul>
    </div>
<script>
    imglist=["2111.png","2112.png","2113.png","2114.png","2115.png"];
    $("#circle ul li").mouseover(function()
    {
        $(this).hover(function()
        {
                    //console.log($(this).index());
            $(this).css('background', 'red');
                        $("#img01").attr('src',"/pic/"+imglist[$(this).index()]); 
        }, function()
        {
            $(this).css('background', 'orange');
        });
    });
</script>
</body>
</html>

wp231957 · 发表于 2020-2-24 19:34:49

示例图片

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 鼠标滑动切换图片

马上注册，结交更多好友，享用更多功能^_^