<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<!--<script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>-->
<script type="text/javascript" src="jquery1.3.2.min.js"></script>
<script type="text/javascript">
var t = n = count = 0;
$(function () {
var piclist = $(".piclist img");
var numlink = $(".num li");
count = piclist.length;
$(".piclist img:not(:first-child)").hide();
$(numlink).filter(":first-child").addClass("on");
$(numlink).each(function (i) {
$(this).click(function () {
$(piclist).filter(":visible").fadeOut(500);
$(piclist).eq(i).fadeIn(1000);
$(this).addClass("on").siblings().removeClass("on");
});
});
t = setInterval("showAuto()", 2000);
$("#pause").click(function () { clearInterval(t); });
$("#play").click(function () { t = setInterval("showAuto()", 2000); });
});
function showAuto() {
n = n >= (count - 1) ? 0 : n + 1;
$(".num li").eq(n).trigger("click");
}
</script>
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
list-style: none;
}
.picshow
{
width: 300px;
height: 300px;
position: relative;
}
.num
{
position: absolute;
bottom: 10px;
right: 10px;
}
.num li
{
float: left;
background: #CCC;
margin: 0 2px;
padding: 0 3px;
cursor: pointer;
}
.num li.on
{
background: #F00;
}
.piclist{ position:relative;}
.piclist img{ position:absolute;}
</style>
</head>
<body>
<div class="picshow">
<div class="piclist">
<img src="image/pic1.jpg" width="300" height="300" alt="" />
<img src="image/pic2.jpg" width="300" height="300" alt="" />
<img src="image/pic3.jpg" width="300" height="300" alt="" />
</div>
<ul class="num">
<li>1</li><li>2</li><li>3</li></ul>
</div>
<div id="pause">暂停</div>
<div id="play">播放</div>
</body>
</html>
分享到：
相关推荐
总之，这个项目提供了一个基本的jQuery图片轮播解决方案，结合HTML和CSS，能够实现带按钮的图片切换效果。对于初学者来说，这是一个很好的实践项目，可以学习到如何使用jQuery操作DOM，处理事件，以及实现动态效果。...
本资源"jQuery图片相册轮播切换代码.zip"提供了一个功能强大且兼容性良好的图片相册轮播效果，适用于各种网页项目。下面将详细介绍这个jQuery图片相册轮播切换代码的关键知识点。 首先，jQuery相册轮播的基础是通过...
本文将深入探讨“jquery图片轮播图多图切换效果（带小图左右箭头）”这一主题，包括其核心技术和实现方式。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在创建图片...
本篇文章将深入探讨如何使用jQuery代码实现图片切换轮播效果，并提供免费的源码下载。 首先，我们需要理解轮播的基本原理。轮播通常包含一个图片容器，以及一组可切换的图片。通过定时器控制，图片在预设的时间间隔...
2. **过渡效果**：使用jQuery的动画效果，如淡入淡出（`.fadeIn()`、`.fadeOut()`)，平滑移动（`.slideToggle()`）等，为图片切换增加视觉吸引力。 3. **导航点**：如果图片数量较多，可以添加导航点，用户可以通过...
**jQuery图片无缝轮播**是一种常见的网页动态效果，用于展示多张图片或内容，并通过自动切换来实现平滑过渡，给用户带来良好的视觉体验。在网页设计中，它经常被用作首页的焦点图或者产品展示。飞牛网采用的就是这种...
在网页设计中，广告Banner是吸引用户注意力的重要元素，而jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现动态、交互式的广告轮播效果。本文将深入探讨如何利用jQuery实现广告Banner的轮播功能，以及涉及...
通过以上步骤，我们可以创建一个基本的jQuery图片自动轮播效果。这只是一个基础示例，实际项目中可能需要增加更多功能，如自动播放控制、动态加载图片、触摸滑动支持等。不断学习和实践，你将能够掌握更高级的轮播...
这款基于jQuery的轮播图插件充分利用了jQuery的优势，提供了高效、流畅的图片切换效果。 该插件的核心功能是将多张图片堆叠在一起，左右对齐，通过点击或自动播放的方式进行切换。这种堆叠效果通常是通过CSS3的...
在本文中，我们将深入探讨jQuery图片切换效果的实现方法，基于提供的"jquery图片切换案例"。这九种不同的案例展示了如何使用jQuery库轻松地创建动态、吸引人的图片展示，为网页设计增添更多互动性。 首先，jQuery是...
jQuery百叶窗图片切换轮播效果代码基于allinone_thumbnailsBanner.js、jquery.min.js和jquery-ui.min.js制作，带进度条，进度条走完图片自动播放下张图片，大图附带文字显示，带左右播放按钮。
jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现动态的图片切换效果。本教程将聚焦于如何使用jQuery创建三种常用的网站图片轮播切换效果。 首先，我们需要了解jQuery的基本用法。jQuery通过简洁的API...
当我们谈论"jQuery 3D h5图片轮播效果"时，我们指的是利用jQuery库和HTML5技术实现的一种具有三维视觉效果的图片轮播组件。 首先，这种3D轮播效果通常会借助CSS3的3D转换功能，这允许我们在不使用插件的情况下，在...
今天我们将深入探讨如何利用jQuery库来实现一个具有视差效果的图片轮播切换功能。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，为开发者提供了更加友好的API。在创建图片...
标题中的“jquery焦点图片轮播滚动.rar”表明这是一个使用jQuery库实现的焦点图轮播效果的资源包。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得创建复杂的网页动态...
通过设定一定时间间隔后执行下一次切换，实现无缝连续的轮播效果。 二、jQuery轮播实现步骤 1. 首先，我们需要在HTML中设置轮播容器和图片列表。每个图片都应具有隐藏和显示状态，并初始状态下只显示第一张。 2. ...
**jQuery图片轮播特效**是Web开发中常见的一种动态效果，用于展示一组或多组图片，以滑动或切换的方式自动播放，为用户带来生动、吸引人的视觉体验。在本项目中，我们关注的是使用jQuery库实现这样的功能。jQuery是...
**jQuery图片轮播切换显示代码详解** 在网页设计中，图片轮播是一种常见的展示多张图片的方式，可以有效地节省空间并提升用户体验。本教程将详细讲解如何使用jQuery实现一款带有数字索引按钮和上一张、下一张切换...