js实现网页系统通知轮播图效果

最新推荐文章于 2022-04-22 16:24:52 发布

programmer_hard

最新推荐文章于 2022-04-22 16:24:52 发布

阅读量727

点赞数

分类专栏： js 文章标签： js轮播

本文链接：https://blog.csdn.net/programmer_hard/article/details/96428923

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

div代码 :

				<div  class="sysAdvice"   style=" text-align: left;position: absolute;outline:none;border: none; width: 1000px"  >
					
					<span style="font-size: 14Px;">轮播图效果图轮播图效果图轮播图效果图</span>
				</div>
			</div>

外框div必须添加的两个样式(style中)
position: relative; 相对定位
overflow: hidden : 划出边界时隐藏
内框div必须添加的两个样式(style中)
position: absolute: 相对于父元素(即外框div)的绝对定位
class必须定义,script需要获取
script代码:

$(function(){

    var timer01 = null;
    var num = 0;
    timer01 = setInterval(function(){


        num+=5;
        if(num > 1000){
            num = 0;
        }
        $('.sysAdvice').css('left',''+num+'px');
    },60);
});

$(’.sysAdvice’).css(‘left’,’’+num+‘px’);
选中class,添加css,
left代表文字从左向右滑动,
num 相当于纵坐标
num+=5;每次滑动的距离
60: 代表滑动的速度数字越大滑动越慢