用jQuery写新闻标题轮播图解读

本文详细介绍了如何使用jQuery创建新闻标题轮播图,包括构建轮播图框架,引入jQuery和CSS,利用绝对定位实现滚动效果,通过设置额外的li元素实现无缝衔接,以及添加鼠标交互暂停轮播等功能。

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

1.先构造轮播图的外部框架,写一个固定的盒子,为了方便查看效果,我给这个盒子添加了外边框属性(border)。

2.在index.html文件中引入jQuery文件,将写好的css样式引入。

3.滚动的新闻标题的内容其实是存在于列表中,竖着排列的,只是超出大盒子的部分被隐藏了(overfloe:hidden;),为了方便看出不同的效果,此处给每一个li设置了不同的背景颜色。

4.轮播图的运动是基于绝对定位之上的,如果是上下滚动,变的是top的值;如果是左右滚动,变的是left的值。

5.此时要考虑如果滚动到最后一个li时,如何让他从第一个开始继续轮播,且不出现闪动的状态呢?此时就是需要利用人的视觉差,比如本来需要展示的是4个标题,那么你就要写5个li,第五个li的内容与第一个一致。写一个全局变量,用来存放当前的li的序号,当这个全局变量的值等于最后一个li的数值时,让其等于1,同时将top值修改为0,这样内容就会从第一个开始,,且从视觉上来看是连续的轮播。

6.每一次的运动的top值都是之前li的高度乘以需要隐藏的数量。用定时器控制自动轮播的时间。

<script>
        $(function () {
            var c = 0;
            var timer = setInterval(function () {
                c++;
                if(c == 4){
                    $(".box ul").css({"
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值