轮播的小demo（注意导入jquery-1.11.1.js）

最新推荐文章于 2024-08-07 09:37:01 发布

&随遇而安&

最新推荐文章于 2024-08-07 09:37:01 发布

阅读量127

点赞数

文章标签： js html javascript

本文链接：https://blog.csdn.net/heart__to/article/details/111296231

版权

这篇博客展示了如何使用JavaScript实现一个简单的轮播图片效果，重点在于引入了jquery-1.11.1.js库来辅助实现。通过示例代码，读者可以学习到JavaScript在动态网页交互中的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <style>
        *{margin: 0;padding: 0;}
        ul li{list-style: none;}
        div{width: 250px;height: 250px;border: 1px solid #ddd;margin: 20px auto;overflow: hidden;}
        .img1{width: 49px;border-right: 1px solid tan;float: left;}
        .img1 li{height: 27px;border-bottom: 1px solid #ddd;font-size: 12px;
        text-align: center;line-height: 27px;background: #f5f5f5;cursor: pointer;}
        .img1 .active{background:red;}
        .img2{float: left;}
        .img2 li{display: none;}
        .img2 .active{display: block;}
    </style>
    <script src="js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var $Img1 = $(".img1 li");
            var $Img2 = $(".img2 li");
            var index = 0; 
            var timer = null;
            $Img1.on("mouseenter",function(){
                index=$(this).index()
                console.log(index)
                $(this).addClass("active").siblings().removeClass();
                $Img2.eq(index).addClass("active").siblings().removeClass();
            })
            $("div").mouseleave(function (){
                timer=setInterval(function(){
                    index++
                    if(index >= $Img1.length){
                        index = 0;
                    }
                    $Img1.eq(index).addClass("active").siblings().removeClass();
                    $Img2.eq(index).addClass("active").siblings().removeClass();
                },1000);
            })
            .mouseenter(function (){
                clearInterval(timer);
            })
            .mouseleave();
        })
    </script>
</head>
<body>
    <div>
        <ul class="img1">
            <li class="active">女靴</li>
            <li>雪地靴</li>
            <li>冬裙</li>
            <li>呢大衣</li>
            <li>毛衣</li>
            <li>棉服</li>
            <li>女裤</li>
            <li>羽绒服</li>
            <li>牛仔裤</li>
        </ul>
        <ul class="img2">
            <li class="active"><img src="img/女靴.jpg" /></li>
            <li><img src="img/雪地靴.jpg" /></li>
            <li><img src="img/冬裙.jpg" /></li>
            <li><img src="img/呢大衣.jpg" /></li>
            <li><img src="img/毛衣.jpg" /></li>
            <li><img src="img/棉服.jpg" /></li>
            <li><img src="img/女裤.jpg" /></li>
            <li><img src="img/羽绒服.jpg" /></li>
            <li><img src="img/牛仔裤.jpg" /></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

&随遇而安&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播的小demo（注意导入jquery-1.11.1.js）

微信小程序id ：网站 https://mp.weixin.qq.com/cgi-bin/wxwxda3f094abb3a7bdb创建项目的前期准备工作1.安装node-v-12.41.1-64.mis(可以再任何位置，安装时都默认)2.在管理员身份cmd中输入node -v看见版本号则安装成功3.下载插件npm install -g cnpm --registry=https://registry.npm.taobao.org这是不用翻墙的插件（虚拟环境）输入npm -v出现版本号则安
复制链接

扫一扫