跑马灯轮播

最新推荐文章于 2024-09-27 11:18:45 发布

xiyan_yuan

最新推荐文章于 2024-09-27 11:18:45 发布

阅读量1.2k

点赞数

分类专栏： js css

本文链接：https://blog.youkuaiyun.com/xiyan_yuan/article/details/77801222

版权

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现轮播图的方法。通过动态修改ul元素的left值来达到轮播效果，同时加入了鼠标悬停暂停轮播的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人学习使用
注解：html 用 li 进行横向布局，通过js 动态修改 ul 的left 值达到轮播效果，鼠标放在ul上，停止动画，鼠标离开，继续动画
html

<html>
    <head>
    <meta charset="UTF-8">
    <script src="jquery-1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <div class="swiper">
            <ul class="list">
                    <li><p class="name">跑马灯1</p></li>
                    <li><p class="name">跑马灯2</p></li>
                    <li><p class="name">跑马灯3</p></li>
                    <li><p class="name">跑马灯4</p></li>
                    <li><p class="name">跑马灯5</p></li>
                    <li><p class="name">跑马灯1</p></li>
                    <li><p class="name">跑马灯2</p></li>
                    <li><p class="name">跑马灯3</p></li>
                    <li><p class="name">跑马灯4</p></li>
                    <li><p class="name">跑马灯5</p></li>
                </ul>
        </div>
    </body>
</html>

css

<style>
    *{
        margin:0;
        padding:0;
        list-style:none; //去除li 前面的点样式
        border:none;
    }
    .swiper{
        overflow:hidden;
        width:400px;
        height:100px;
        position:relative;
        margin:50px 30px;
    }
    ul.list{
        width:400px;
        position:absolute;
        overflow:hidden;
        left:0;
        top:0;
    }
    ul.list li{
        width:100px;
        float:left;
    }
</style>

<script>
    var list=$('ul.list').eq(0);//通过class 选择的元素是一个数组，如果页面只有一个class为list的ul 可以不用 eq（0），如果是多个，根据需要选择哪个 ul
    var listli=list.find('li');
    var linum=listli.length;//li 的个数
    var liwidth=listli.width();//一个li 的宽度
    var listwidth=linum*liwidth;//ul 的宽度
    //声明一个定时器 供hover事件使用
    var tim=setInterval(autoPlay,2000);
    //动态设置ul 的宽度
    list.css('width',listwidth).hover(function(){
    //鼠标移动到ul上的时候清除定时器
        clearInterval(tim);
    },function(){
    //鼠标离开ul时从新设置定时器
        tim=setInterval(autoPlay,2000);
    });
    function autoPlay(){
    //因为leftMove 初始值是0 如果不判断的话，定时器第一次执行会把left值设置成0导致轮播的时间加长了一次，所以我们给它做下判断避免这个问题
        if(leftMove==0)leftMove=-100;
        //利用animate动画函数设置left值，产生一个运动的效果，看上去效果更直观
        listli.animate({'left':leftMove},1000,function(){
            if(Math.abs(leftMove)>=500){
            //我们用的是两组数据，所以我们去判定当第一组数据走完后立刻重置ul 的 left值，达到无缝播放的效果，并且把leftMove的值初始化
                $(this).css('left',0);
                leftMove=0;
            }
            //每执行完一次动画后，就将leftMove的值更新一次
            leftMove-=100;
        });
    }
</script>

有图有真相
这里写图片描述