`
yaolifei
  • 浏览: 23667 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

JQuery 简单小例子 图片幻灯

jQueryCSSJavaScriptHTML 
阅读更多

今天用JQuery做了个图片幻灯，功能简单实用

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Test</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>

<body>
    <div id="a">
        <img src="image/01.jpg" />
        <img src="image/02.jpg" />
        <img src="image/03.jpg" />
        <img src="image/04.jpg" />
    </div>
</body>

 

$(function(){
	$.picSwitch("#a",3);	
	//有两个参数: arg1,arg2
	//arg1: #a代表图片的容器
	//arg2: 3代表从第四张图片开始
});

//扩展JQuery，加入自己的函数
$.extend({
	picSwitch:function(div,i){
		if(i!=0)  $(div+">img").eq(i-1).hide();
		else  $(div+">img:last").hide();
		$(div+">img").eq(i).fadeIn("slow",function(){
			i=i==$(div+">img").size()-1?0:i-0+1;
			setTimeout("$.picSwitch('"+div+"','"+i+"')", "1000");
		});		
	}
});

 

  

分享到：
| JQuery Ajax xml
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery插件实现图片幻灯片功能

    本文将深入探讨如何使用名为"kevinSlide"的jQuery插件来实现图片幻灯片功能。 首先，kevinSlide插件是专为创建动态、引人入胜的图片滑动展示而设计的。这种类型的组件常用于网站的首页或产品展示区域，以吸引用户...

    jQuery魅族官网导航加幻灯片代码.zip

    【jQuery魅族官网导航加幻灯片代码】是一款基于JavaScript库jQuery实现的网页导航栏与幻灯片展示功能的代码示例。这个代码主要用于模仿魅族手机官网首页的设计，为用户提供一个具有动态效果的导航菜单和自动轮播的...

    jQuery幻灯片图片展示 图片例子效果.rar

    【jQuery幻灯片图片展示】是一种常见的网页设计技术，用于在网页上动态展示一组图片，通常作为网站的焦点图或轮播图。这种效果能够吸引用户的注意力，提高用户体验，尤其适用于产品展示、新闻更新或者图像丰富的网站...

    基于jQuery开发的类似腾讯网的可自动播放的图片幻灯特效源码例子

    【jQuery图片幻灯特效开发详解】 在Web前端开发中，图片幻灯效果是一种常见的视觉展示方式，用于在有限的空间内展示多张图片，为用户提供动态、连续的浏览体验。本教程将详细介绍如何基于jQuery框架创建一个类似...

    图片轮放例子，图片新闻，图片幻灯片 jquery 实现

    标题中的“图片轮放例子，图片新闻，图片幻灯片 jQuery 实现”指的是使用JavaScript库jQuery来创建一种动态展示图片的效果，通常称为图片轮播或幻灯片展示。这种效果常用于网站的首页或者产品展示区域，以吸引用户的...

    jQuery带标题描述背景幻灯片代码

    标题中的“jQuery带标题描述背景幻灯片代码”是指一种使用jQuery库实现的网页动态效果，它允许在网站上创建带有标题、描述和背景图片的幻灯片展示。这种功能通常用于首页轮播图或者产品展示，以吸引用户注意力并提供...

    jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览

    幻灯片效果通常是通过动态改变图片的显示状态来实现的，这包括切换图片、设置过渡效果以及控制导航按钮等。jQuery提供了丰富的API和方法，如`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等，这些可以用来创建平滑的...

    基于jQuery的图片幻灯片

    本教程将深入探讨如何使用jQuery实现一个简单的图片幻灯片，并在IE6这种对CSS透明度支持有限的浏览器中实现类似玻璃透明的效果。 首先，我们需要引入jQuery库。jQuery是一个强大的JavaScript库，简化了DOM操作、...

    jquery 简单幻灯片

    【jQuery 简单幻灯片】是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来实现平滑过渡。这个项目基于JavaScript库jQuery构建，旨在提供一个轻量级、易于定制的幻灯片解决方案。在本案例...

    jQuery三张图片一起滑动幻灯片特效

    **jQuery三张图片一起滑动幻灯片特效**是一种常见的网页动态展示技术，常用于网站的首页或产品展示部分，以吸引用户注意力并提供视觉上的吸引力。这种特效通过JavaScript库jQuery实现，它允许多张图片在设定的时间...

    jQuery文字图片幻灯片动画切换效果.zip

    本压缩包中的"jQuery文字图片幻灯片动画切换效果.zip"包含了一套完整的jQuery幻灯片切换效果，适用于网站头部 banner 或产品展示等场景。 首先，我们来看`index.html`，这是网页的主文件，它包含了HTML结构以及引用...

    jquery优雅轻巧的文字幻灯片效果

    在这款文字幻灯片插件中，jQuery被用来实现文字内容的动态切换，而不是传统的图片切换，这使得整个设计更为轻巧且独特。 幻灯片的核心功能是定时切换显示的内容。在这个例子中，内容不是图片，而是文字描述，这种...

    jQuery幻灯片Slide隐藏效果

    以下是一个简单的jQuery幻灯片Slide隐藏效果的实现示例： ```javascript $(document).ready(function() { var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = $('.slides &gt; div...

    jQuery+Swiper仿魅族幻灯片轮播和导航栏特效.zip

    "jQuery+Swiper仿魅族幻灯片轮播和导航栏特效"就是一个很好的例子，它结合了jQuery的便捷性和Swiper的强大功能，为网页带来流畅、美观的幻灯片展示效果以及互动性强的导航栏。本文将深入解析这一特效的实现原理和...

    HTML5音频播放器和jQuery全屏图片幻灯片轮播切换

    接着，我们转向jQuery全屏图片幻灯片轮播切换。jQuery是一个强大的JavaScript库，它简化了DOM操作，使得动态效果的实现更加简单。实现全屏图片轮播，可以使用jQuery的动画效果和定时器功能。下面是一个基本的jQuery...

    html javascript jquery 走马灯例子

    走马灯，也被称为轮播图或幻灯片展示，是一种常见的网页动态效果，用于在有限的空间内展示多张图片或内容。在这个“html javascript jquery 走马灯例子”中，我们将探讨如何通过HTML、JavaScript（特别是jQuery库）...

    jquery小格子幻灯片.zip

    《jQuery小格子幻灯片实现详解》 在前端开发中，幻灯片效果是一种常见的交互设计元素，它能够以动态的方式展示多张图片或内容，提升用户体验。本篇文章将详细解析如何使用jQuery来实现一个独特的小格子幻灯片效果，...

    简单实用的图片幻灯片效果

    在这个例子中，`index.html`会包含幻灯片的HTML结构，如幻灯片容器、图片标签、控制按钮等，并引用`chocoslider.css`和`jquery.chocoslider.min.js`来实现功能。 6. **jquery.chocoslider.min.js**: 这是一个...

    一个基jQuery实现最简单的图片切换特效源码例子

    以上就是基于jQuery实现最简单图片切换特效的基本步骤和相关知识点。实践中，可以根据项目需求进行调整和优化，以满足不同的设计风格和功能要求。在实际开发中，不断学习和探索jQuery以及其他前端技术，可以提升网页...

Magicbox
Global site tag (gtag.js) - Google Analytics