效果图如下:
代码如下:
index.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Try JQuery</title> <link rel="stylesheet" href="styles/main.css" type="text/css" /> </head> <body> <div id="main_container"> <div class="ad" > <ul class="slider" > <li><img src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif"/></li> <li><img src="images/ads/3.gif"/></li> <li><img src="images/ads/4.gif"/></li> <li><img src="images/ads/5.gif"/></li> </ul> <ul class="num" > <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> <script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="scripts/main.js" type="text/javascript"></script> </body> </html>
styles/main.css
/* base css */ * { margin: 0; padding: 0; } ul, li { list-style: none outside none; } .clear { clear: both; } /* page css */ #main_container { background-color: #eeeeee; width: 960px; margin: 0 auto; } #main_container .ad { margin: 100px auto; width:586px; height:150px; overflow:hidden; position:relative; } .ad .slider,.ad .num{ position:absolute; } .ad .slider li{ display: inline; } .ad .num { bottom: 5px; right: 5px; } .ad .num li{ float: left; color: #FF7300; cursor: pointer; border: 1px solid #FF7300; background-color: #fff; margin: 3px 1px; width: 16px; height: 16px; text-align: center; } .ad .num li.on{ color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold; }
scripts/main.js
$(function(){ var showImg = function(index){ var adHeight = $(".ad").height(); $(".slider").stop(true,false).animate({top : -adHeight*index},1000); $(".num li").removeClass("on") .eq(index).addClass("on"); } var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function(){ index = $(".num li").index(this); showImg(index); }).eq(0).mouseover(); $('.ad').hover(function(){ clearInterval(adTimer); },function(){ adTimer = setInterval(function(){ showImg(index) index++; if(index==len){index=0;} } , 3000); }).trigger("mouseleave"); });
相关推荐
**jQuery实现网页幻灯片详解** 在Web开发中,网页幻灯片是一种常见的动态效果,用于展示图片、文本或其他内容的轮播。本教程将深入探讨如何使用jQuery库来创建一款高质量的网页幻灯片,它甚至优于市面上知名的如...
在本讨论中,我们将深入探讨jQuery幻灯片Slide隐藏效果的核心原理、实现方法以及如何利用它来创建自己的动态幻灯片。 首先,jQuery是JavaScript的一个库,它简化了DOM操作、事件处理、动画制作等任务。在幻灯片...
在本篇文章中,我们将深入探讨如何使用jQuery实现图片幻灯片展示,并涉及其自动播放和鼠标悬停切换图片的功能。 首先,我们需要理解jQuery的基本用法。jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档...
本教程将详细讲解如何利用jQuery实现一个带有缩略图控制的弹性图片幻灯片切换效果,特别适用于全屏幻灯片展示。 一、jQuery基础 jQuery库提供了一套丰富的API,包括选择器、事件处理、动画效果和Ajax操作等。在...
总的来说,jQuery手机WAP幻灯片播放器的实现涉及到jQuery的选择器、事件处理、动画效果,以及CSS的样式控制和响应式设计。通过熟练掌握这些技术,开发者可以创建出富有互动性和视觉吸引力的移动端幻灯片组件。
本教程将深入探讨如何利用jQuery实现一个响应式的宽屏幻灯片,使其在各种设备上都能提供无缝切换的用户体验。 ### 1. jQuery基础 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和动画制作等任务。...
本文将详细介绍如何使用jQuery来实现一款带有文字说明的多张切换方式的幻灯片。 首先,我们需要理解jQuery的基本用法。jQuery库简化了DOM操作、事件处理和动画等任务。要使用jQuery,需要在HTML文档中引入jQuery库...
在网页设计中,jQuery 图片轮播幻灯片效果是一种常见的功能,用于展示一组图片或内容,通过动态的左右滚动来吸引用户注意力并提供良好的用户体验。这个效果的实现基于 jQuery JavaScript 库,它简化了 DOM 操作、...
jQuery Slide Show是一款基于jQuery库的幻灯片效果插件,用于在网页中创建动态、吸引人的图片或内容轮播。这种效果广泛应用于网站的首页、产品展示、新闻更新等场景,能够以美观的方式呈现多张图片或信息。下面将...
jQuery的`.slideUp()`和`.slideDown()`方法可用于实现幻灯片的切换效果。通过计时器(`.setInterval()`)可以定时自动切换幻灯片,同时添加事件监听器来响应用户点击控制按钮。使用`.stop()`方法可以防止动画堆栈,...
本文将深入探讨如何使用jQuery库来实现一个基本的幻灯片实例,包括其工作原理、主要代码结构以及相关资源的组织。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画等功能。在实现幻灯片时,...
在本文中,我们将深入探讨如何使用jQuery来实现一个带有遮罩阴影效果的幻灯片功能。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务,使得开发者可以更轻松地创建交互式的网页...
在本文中,我们将深入探讨如何使用jQuery来实现一个图像幻灯片效果,特别是上下滑动的图片切换功能。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作,使得创建交互式网页变得更加容易。...
本篇将深入解析一个基于jQuery实现的仿途牛网站全屏幻灯片焦点图代码特效,该特效包含左右箭头和索引图标切换功能,适用于创建具有视觉冲击力的网站大图轮播。 首先,我们需要理解jQuery库的作用。jQuery是一个轻量...
本教程将详细介绍如何使用jQuery库来实现一个带有缩略图导航的幻灯片功能。 jQuery是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。利用jQuery,我们可以快速地创建出...
在实现手机幻灯片切换放大的过程中,jQuery的核心特性得到了充分的运用。 首先,我们需要创建HTML结构,通常包括一个包含多个幻灯片元素的容器,每个幻灯片元素内包含要展示的图片或内容。例如: ```html ...
在给定的压缩包文件中,我们关注的是一个基于Bootstrap的jQuery超酷hero幻灯片特效,名为"bpHS"。 这个插件是专门为了创建吸引人的幻灯片展示而设计的,尤其适用于首页或产品展示区域,以增强用户体验和网站的视觉...
5. **优化和扩展**:上述代码是一个基础的幻灯片实现,你可以根据需求进行优化,比如添加左右切换按钮,支持自动循环和手动控制,或者添加过渡动画等。这些都可以通过扩展jQuery代码来实现。 通过以上步骤,你就...
本教程将聚焦于一个常见且实用的功能:使用jQuery创建一个最简单的图片幻灯片,实现自动轮播效果,且不显示其他多余元素。 **一、jQuery简介** jQuery是由John Resig于2006年推出的一个JavaScript库,它的核心理念...
总结,jQuery图片轮播幻灯片效果通过结合HTML、CSS和jQuery,可以轻松地实现跨浏览器的动态图片展示。通过调整代码,你可以定制适合项目需求的轮播效果,包括动画类型、速度、导航控制等。在实际项目中,记得将所有...