首页 > 其他分享 >jQuery循环滚动展示代码

jQuery循环滚动展示代码

时间:2022-11-25 22:33:43浏览次数:36  
标签:jQuery 文字 滚动 展示 li visible sItem JS 图片


循环滚动展示的文字和图片每个人都见过,实现类似效果的 JS 也很多。但如果只用于几个条目或三五张图片,体积庞大的 JS 会浪费资源。我们来用JQ实现同样的功能!
首先,先看一下HTML结构。

<​​ul​​​ id="sItem">
<​​​li​​​>文字或图片</​​li​​​>
<​​​li​​​>文字或图片</​​li​​​>
<​​​li​​​>文字或图片</​​li​​​>
</​​​ul​​>


载入JQuery库


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery
/1.2.6/jquery.min.js"></script>


JS 代码( 以 ​ <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>

包裹,或者保存成单独文件引用。):

$(document).ready(function(){
$("#sItem li:not(:first)").css("display","none");
var B=$("#sItem li:last");
var C=$("#sItem li:first");
setInterval(function(){
if(B.is(":visible")){
C.fadeIn(500).addClass("in");B.hide()
}else{
$("#sItem li:visible").addClass("in");
$("#sItem li.in").next().fadeIn(500);
$("li.in").hide().removeClass("in")}
},3000) //每3秒钟切换一条,你可以根据需要更改
})

标签:jQuery,文字,滚动,展示,li,visible,sItem,JS,图片
From: https://blog.51cto.com/u_15834343/5887932

相关文章

  • jQuery制作动态酷效果总结
    jQuery是一个优秀的JavaScript框架,可以很好的解决不同浏览器兼容的问题,尤其是在ASP.NETMVC下,它的作用更加的凸显。jQuery在制作动态酷效果的时候有很强的优势,以下是笔者......
  • jquery004-表格crud
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>modal-box</title><style>.center{margin:0auto;}......
  • jQuery 基础
    目录基本使用选择器操作样式动画效果属性操作元素操作jQuery文档地址基本使用入口函数 //入口函数 //文档准备好执行函数 $(document).ready(function(){......
  • 用asp.net+Jquery+Ajax+sqlserver编写的 (英语六级记单词)
        英语的重要性已经毋庸置疑,对于程序员来说更甚,一些最新的技术资料是英文的,如果想进入外企英语也是一个很重要的条件。对于程序员来说怎样学习好英语,在此谈一下我......
  • 3D展品可视化展示是怎么实现的?
    随着大数据、5G、AI等新一代信息技术的蓬勃发展,产品展示方式也开始多样化起来,为了满足群众多样化的参观需求,许多展馆充分利用新技术新手段,将展品以三维立体的方式呈现,增加......
  • 0004.JQuery介绍
    一、JQuery介绍1.JQuery介绍JQuery是一个JavaScript库,也是一个JS文件。JQ中封装实现了很多方法,让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现......
  • 【iOS-Cocos2d游戏开发之十六】添加本地通知(UILocalNotification)以及添加系统组件滚
    ​​ 李华明Himi ​​​原创,转载务必在明显处注明-------------【11月28日更新解决添加组件Cocos2d动画停止播放的BUG】--------​​【iOS-Cocos2d游戏开发之七】在cocos......
  • jquery003-左侧菜单
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>#menu{position:absolute;top:......
  • 如何用jQuery / Javascript播放二进制MP3流?
    我从ajax调用​中获得了纯二进制MP3流.没有标题,没有.只是直接MP3位.(实际上甚至连一条流都没有?)我希望能够在网页上播放它(如果可能的话,还可以提供下载).这可能吗?如果是......
  • 如何用jQuery / Javascript播放二进制MP3流?
    我从ajax调用中获得了纯二进制MP3流.没有标题,没有.只是直接MP3位.(实际上甚至连一条流都没有?)我希望能够在网页上播放它(如果可能的话,还可以提供下载).这可能吗?如果是这......