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循环滚动展示代码相关推荐

小程序搜索词条单个轮播停留展示、信息栏多个词条循环滚动展示
效果展示小程序代码片段: https://developers.weixin.qq.com/s/ckLt13mr7pEg 搜索词条的单个轮播停留展示没什么难度,直接看小程序官方的swiper组件的示 ...
网页图片无缝循环滚动html代码
图片循环滚动代码图片无缝滚动代码先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通 ...
html自动滚动代码,html+css+javascript实现列表循环滚动示例代码
说明:设置时间定时,在规定的时间内替换前一个节点的内容 1.关键代码:javascript: 复制代码代码如下: var dome=document.getElementById("dome ...
html网页图片自动滚动代码,实现网页图片循环滚动的代码上/下/左/右(html or asp)...
向上: href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/" ...
Table表格文字超出后循环滚动的动画实现方案核心逻辑
需求前几天公司要求做一个动态表格:大概就是可配置的(颜色,字体,行数等等),用作屏幕展示.因此就要求表格文字在超出宽度时候可以有动画循环滚动展示内容.大概这个样子: 项目使用vue框架,动画因为涉及 ...
JavaScript实现走马灯效果[无缝连接、循环滚动]
JavaScript实现走马灯效果[无缝连接.循环滚动] 无缝跑马灯效果以下代码在IE6.Firefox+Win2k环境下测试通过网页走马灯连续循环滚动一.向上的无缝循环滚动 HTML代码 &l ...
写了一个jquery循环幻灯片
自己写的一个jquery循环幻灯片,代码有冗余,或大家有更好的方法,欢迎指证或建议! common.js $(function(){ var num = 0; $(".pic_img&quo ...
html5blog简单特效代码,个人博客网站背景视觉滚动特效代码
之前一直注重模块的视觉滚动特效以至于忽略了图片背景的视觉差滚动特效,今天把小清新主题更新了图片背景视觉差特效,记录下代码,有喜欢的自己参考教程自己动手操作下.这是在网络上找到的一款超级轻量级的jQue ...
仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的此代码使用CSS3动画实 ...

jQuery循环滚动展示代码

jQuery循环滚动展示代码相关推荐

最新文章

热门文章