<!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图片切换案例"。这九种不同的案例展示了如何使用jQuery库轻松地创建动态、吸引人的图片展示，为网页设计增添更多互动性。 首先，jQuery是...
jQuery百叶窗图片切换轮播效果代码基于allinone_thumbnailsBanner.js、jquery.min.js和jquery-ui.min.js制作，带进度条，进度条走完图片自动播放下张图片，大图附带文字显示，带左右播放按钮。
jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现动态的图片切换效果。本教程将聚焦于如何使用jQuery创建三种常用的网站图片轮播切换效果。 首先，我们需要了解jQuery的基本用法。jQuery通过简洁的API...
今天我们将深入探讨如何利用jQuery库来实现一个具有视差效果的图片轮播切换功能。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，为开发者提供了更加友好的API。在创建图片...
标题中的“jquery焦点图片轮播滚动.rar”表明这是一个使用jQuery库实现的焦点图轮播效果的资源包。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得创建复杂的网页动态...
**jQuery图片轮播特效**是Web开发中常见的一种动态效果，用于展示一组或多组图片，以滑动或切换的方式自动播放，为用户带来生动、吸引人的视觉体验。在本项目中，我们关注的是使用jQuery库实现这样的功能。jQuery是...
**jQuery图片轮播切换显示代码详解** 在网页设计中，图片轮播是一种常见的展示多张图片的方式，可以有效地节省空间并提升用户体验。本教程将详细讲解如何使用jQuery实现一款带有数字索引按钮和上一张、下一张切换...
总结，"jQuery图片视差轮播切换代码"巧妙地将jQuery与swiper.js结合，实现了具有视差效果的图片轮播，且配备了标签导航，提升了用户体验。通过理解这个代码，开发者可以学习到如何运用JavaScript库实现动态效果，...
【jQuery图片相册轮播切换】是一种常见的网页交互效果，常用于展示一组图片或内容，让用户在不离开当前页面的情况下浏览多张图片。这个压缩包中的代码提供了实现这一功能的具体解决方案，尤其强调了对全屏的支持，...
在这个特定的场景中，我们关注的是jQuery Mobile中的图片轮播插件，这是一种常见的用于展示多张图片并实现自动切换效果的组件。 在jQuery Mobile中，图片轮播通常通过数据属性和CSS样式来实现，这允许开发者灵活地...