jquery实现简单的自动播放幻灯片效果

本文实例讲述了jquery实现简单的自动播放幻灯片效果。分享给大家供大家参考。具体实现方法如下：

html部分：

<div id="slideshow">
  <div>
   <img src="images/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
  <div>
   <img src="images/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div>
   Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>

CSS部分：

/* Slides need to be absolutely positioned within the wrapper.
This has a tiny bit of extra pizazz: */
#slideshow {
  margin: 50px auto;
  position: relative;
  width: 240px;
  height: 240px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

jQuery部分：

//Run after DOM is ready.
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
 $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)
  .end()
  .appendTo('#slideshow');
}, 3000);

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

    基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

    jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件.该幻灯片通过JSON数据来提供图片地址和描述信息等,你可以通过更换JSON数据来动态切换不同的图片. 在线预览     源码下载 使用方法 在页面中引入jquery和slider.js文件和font-awesome字体图标文件. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-

  • jQuery插件animateSlide制作多点滑动幻灯片

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片--全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo

  • jQuery通过Ajax返回JSON数据

    服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. <ul id="userlist"> <li><a hre

  • jQuery插件Skippr实现焦点图幻灯片特效

    jQuery插件Skippr实现焦点图幻灯片特效

    史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件.响应式布局插件,强大的参数自定义 配置,可自定义切换速度.切换方式.是否显示左右箭头.是否自动播放.自动播放间隔时间等配置 参数,调用插件也非常简单易用,调用方式下面介绍下: 1.加载jQuery和插件 <link rel="stylesheet" href="css/jquery.skippr.css"> <script src="js/jquery.min.js&qu

  • jquery简单实现幻灯片的方法

    本文实例讲述了jquery简单实现幻灯片的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

  • jQuery中使用each处理json数据

    eg:给传进来的ID中当其对应的值为true时,即给对应的ID标签添加一个class 名为  focus,如: var obj = { id01:'true', id02:'flase', id03:'true'}; $.each(obj,function(key,val){ if(val == 'true'){ $('#' + key).addClass('focus'); } }); 结果:ID为id01及id03的标签会添加一个class标签: eg2: json数据如下: [ {"Id&

  • Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效

    一个仿腾讯娱乐频道焦点图轮播的插件 ui3g.js 复制代码 代码如下: /* 顶部大图滚动 */ var slide = (function() {     var quadEaseOut;     var doc = document;     var $ = function(s){         return document.getElementById(s);     }     /**      获取索引值,工具类      @param {Element} current 当前

  • Jquery幻灯片特效代码分享--鼠标点击按钮时切换（1）

    Jquery幻灯片特效代码分享--鼠标点击按钮时切换（1）

    本文实例讲述了jQuery实现时尚漂亮的幻灯片特效,基本能满足你在网页上使用幻灯片(焦点图)效果.分享给大家供大家参考.具体如下: 幻灯片效果描述:用鼠标点击右下角数字按钮幻灯片进行左右切换进行切换.   运行效果截图如下: 具体实现代码: <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2.min.js" type="text/javascript&qu

  • jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

  • jquery实现简单的自动播放幻灯片效果

    本文实例讲述了jquery实现简单的自动播放幻灯片效果.分享给大家供大家参考.具体实现方法如下: html部分: <div id="slideshow"> <div> <img src="images/5224/5658667829_2bb7d42a9c_m.jpg"> </div> <div> <img src="images/5230/5638093881_a791e4f819_m.jp

  • jQuery实现简单的网页换肤效果示例

    jQuery实现简单的网页换肤效果示例

    本文实例讲述了jQuery实现简单的网页换肤效果.分享给大家供大家参考,具体如下: 这里有4个文件:skin.html.blue.css.green.html.red.html,都放在同一目录下. 1.skin.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • JS实现的多张图片轮流播放幻灯片效果

    本文实例讲述了JS实现的多张图片轮流播放幻灯片效果.分享给大家供大家参考,具体如下: <body style="width: 715px; height: 95px;"> <script language="javascript" type="text/javascript"> <!-- /************************************************** 名称: 图片轮播类 创建时

  • JQuery实现简单的服务器轮询效果实例

    本文实例讲述了JQuery实现简单的服务器轮询效果.分享给大家供大家参考,具体如下: 很多论坛都有进入后,弹出提示,说有多少封邮件没有看,或者是一个oa系统,进入后,提示有多少个任务没有做.每隔一段时间会提示一次,但是如何实现呢.其实,利用jquery的话,会比较简单,核心元素就是json格式解析和setInterval()函数.下面一起来实现: 首先,我们default.aspx的页面如下所示: <%@ Page Language="C#" AutoEventWireup=&q

  • jQuery实现公告新闻自动滚屏效果实例代码

    本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti

  • jquery实现简单的banner轮播效果【实例】

    jquery实现简单的banner轮播效果【实例】

    朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <scri

  • jQuery实现简单的tab标签页效果

    jQuery实现简单的tab标签页效果

    本文实例讲述了jQuery实现简单的tab标签页效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab1</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ l

  • jQuery实现简单的间隔向上滚动效果

    本文实例讲述了jQuery实现简单的间隔向上滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <div id="broadcast" class="bar" name="giftactive">  <

  • jquery实现简单自动轮播图效果

    本文实例为大家分享了jquery实现简单自动轮播图的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="author" content="Jxz"> <title></title> <scri

  • jQuery实现简单的轮播图效果

    jQuery实现简单的轮播图效果

    大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果 首先我们看到,它是由背景图片.方向图标和指示器组成.我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位.我们要实现点击方向图标时,图片跟着变换:点击指示器时,图片跟着变换:不点击时每隔5秒自动播放:不点击时不显示方向图标. 结构布局:用一个div包裹3个div,里面的3个div分别显示背景图片部分.方向图标部分和指示器部分. <!DOCTYPE html> <html lang="en&

随机推荐