`
pcajax
  • 浏览: 2158936 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery循环滚动展示代码

阅读更多

循环滚动展示的文字和图片每个人都见过,实现类似效果的 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循环滚动展示代码,可应用到文字和图片上

    在"jQuery循环滚动展示代码.htm"文件中,可能包含了HTML结构、CSS样式以及jQuery脚本三大部分。HTML部分主要设置展示区的容器,如`&lt;div id="slider"&gt;...&lt;/div&gt;`,并把要循环展示的内容(如图片或文字)放入相应的子...

    jQuery实现列表自动滚动循环滚动展示新闻

    在HTML页面中实现一个新闻列表的自动滚动循环滚动展示,可以通过JavaScript的jQuery库来完成。使用jQuery不仅能够简化对DOM的操作,还可以通过简短的代码实现较为复杂的功能。以下是相关的知识点: 1. HTML部分:...

    单行jQuery循环滚动新闻代码.rar

    "单行jQuery循环滚动新闻代码.rar" 这个标题表明这是一个使用jQuery库实现的JavaScript特效,具体是让新闻标题在一行内进行循环滚动。在网页设计中,这种效果通常用于展示最新资讯或者有限空间内的多条信息,以节省...

    jQuery循环滚动展示代码 可应用到文字和图片上

    标题中的“jQuery循环滚动展示代码 可应用到文字和图片上”指的是使用jQuery库实现一个功能,该功能可以使页面上的文字或图片以循环滚动的方式进行展示。这种效果常见于新闻滚动、广告轮播等场景,可以增加网页动态...

    图片动态循环滚动js代码

    这个技术主要用于提升用户体验,特别是在展示多张图片时,通过动态循环滚动的方式,让用户能够轻松浏览并欣赏到所有图片。 在JavaScript中,实现图片轮播通常会涉及到以下几个关键知识点: 1. **DOM操作**:...

    jquery左右循环滚动图片代码.rar_jquery左右循环滚动图片代码

    在本文中,我们将深入探讨如何使用jQuery实现左右循环滚动图片的代码。jQuery是一个强大的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。在网页设计中,循环滚动图片是一种常见的展示方式,用于吸引...

    jQuery新闻循环滚动代码.zip

    jQuery新闻循环滚动代码是网页开发中一种常见的动态效果,它利用JavaScript库jQuery和特定的插件,如jquery.newsTicker,来实现新闻标题或内容在页面上持续滚动展示,以吸引用户的注意力并提供丰富的信息传递方式。...

    jQuery实现滚动新闻代码.zip

    总的来说,“jQuery实现滚动新闻代码”项目展示了如何结合jQuery和Bootstrap 3实现一个动态、响应式的新闻展示功能。通过理解并应用这些技术,开发者可以创建出更丰富的用户体验,提升网站的吸引力和互动性。

    JQUery实现上下循环滚动效果

    在网页设计中,动态效果是吸引用户注意力的重要手段之一,其中上下循环滚动的效果常常用于展示新闻更新、公告或者产品介绍等。本教程将详细介绍如何利用jQuery这一强大的JavaScript库来实现文字或图片的上下循环滚动...

    jquery滚动图片代码,左右按钮可循环滚动

    "jquery滚动图片代码,左右按钮可循环滚动"的主题涉及到使用jQuery实现一种动态效果,即通过点击左右按钮来循环展示一组图片。这个功能在网站的轮播图、产品展示或广告栏等场景中常见。 首先,我们需要理解jQuery的...

    多行滚动jQuery循环新闻列表代码.rar

    "多行滚动jQuery循环新闻列表代码.rar" 这个标题指的是一个使用jQuery库实现的、能够展示多行新闻并进行循环滚动的代码示例。jQuery是一个广泛应用于网页开发的JavaScript库,它简化了DOM操作、事件处理、动画效果...

    jquery版文字水平方向无限循环滚动.zip

    根据提供的压缩包文件名称,我们可以推测其包含的文件可能有HTML、CSS和JavaScript文件,其中HTML用于构建页面结构,CSS用于样式设计,而JavaScript(可能是jQuery代码)则实现了文字的水平无限循环滚动效果。...

    jquery向上循环滚动特效.zip

    【jQuery向上循环滚动特效】是一种常见的网页动态效果,它利用JavaScript库jQuery实现文本或图片在页面上持续向上滚动,为用户展示信息。这种特效在新闻网站、公告栏或者广告展示等场景中尤为常见,能够有效地吸引...

    Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip

    通过以上介绍,我们可以看出"Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip"是一个强大且灵活的图片滚动解决方案,对于想要在网页中实现动态图片展示的开发者来说,它是一个非常实用的工具。结合其标签"JS特效...

    jQuery图文左右滚动代码(箭头控制).zip

    如果是无限循环滚动,可能需要处理边界条件并重新定位内容。 对于自动滚动,我们可以使用JavaScript的`setInterval()`函数创建定时器,每隔一定时间执行一次滚动操作。当然,为了提供更好的用户体验,我们还需要...

    jQuery排名文字无缝循环向上滚动代码

    jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现各种动态效果,其中包括文字无缝循环滚动。本篇文章将详细解析如何使用jQuery实现标题中提到的"排名文字无缝循环向上滚动"的效果,并结合给定的文件结构...

    jquery上下滚动插件

    jQuery上下滚动插件就是利用这个库来实现复杂的滚动动画,使得开发者无需从头编写复杂的JavaScript代码,就能实现流畅的滚动效果。 **li滚动**通常指的是在`&lt;ul&gt;`或`&lt;ol&gt;`列表中对`&lt;li&gt;`元素进行动态滚动。在网页...

    jQuery实现两行图片列表循环滚动效果代码.zip

    这个“jQuery实现两行图片列表循环滚动效果代码.zip”压缩包包含了一个利用jQuery来创建动态视觉效果的例子,特别适用于网站的轮播图或者商品展示区域。 首先,我们来理解jQuery的基础。jQuery库通过一种简洁的语法...

Global site tag (gtag.js) - Google Analytics