本例子是仿照京东网首页图片样式，然后自己加了jquery控制
mycss.css
附件
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'MyJsp.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id='img_side'>
<div class="m" id="slide"
style="position: relative;">
<ul id='ss' style="position: absolute; left: 0px; top: 0px;">
<li>
<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284255152.jpg" width="766"
height="120"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284255548.jpg" width="766"
height="120"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284256914.jpg" width="766"
height="120"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284257523.jpg" width="766"
height="120"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/13228425771.gif" width="766"
height="120"> </a>
</li>
<li>
<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284257952.jpg" width="766"
height="120"> </a>
</li>
</ul>
<div id='numbers'>
<span class="curr"><a
href="# "
target="_blank">1</a> </span>
<span class=""><a
href="# "
target="_blank">2</a> </span>
<span class=""><a
href="# "
target="_blank">3</a> </span>
<span class=""><a
href="# "
target="_blank">4</a> </span>
<span class=""><a
href="# "
target="_blank">5</a> </span>
<span class=""><a
href="# "
target="_blank">6</a> </span>
</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$.fn.slideImg = function(settings) {
settings = jQuery.extend({
speed: "normal",
timer: 1000
}, settings);
return this.each(function() {
$.fn.slideImg.scllor($(this), settings);
});
};
$.fn.slideImg.scllor = function($this, settings) {
var index = 0;
var scllorer=$(".m li",$this);
var size=scllorer.size();
var slideH=scllorer.outerHeight();
var li = $("#numbers span",$this);
var showBox = $(".img-box",$this);
var intervalTime=null;
li.hover(function() {
var that=this;
index = li.index(that);
if (intervalTime) {
clearInterval(intervalTime);
}
intervalTime = setTimeout(function() {
index = li.index(that);
ShowAD(index);
}, 200);
}, function() {
clearInterval(intervalTime);
interval();
});
showBox.hover(function() {
if (intervalTime) {
clearInterval(intervalTime);
}
}, function() {
clearInterval(intervalTime);
interval();
});
function interval(){
intervalTime = setInterval(function() {
ShowAD(index);
index++;
if (index == size) {
index = 0;
}
}, settings.timer);
}
interval();
var ShowAD = function(i) {
$("#ss").animate({ "top": -i * slideH}, settings.speed);
li.eq(i).addClass("curr").siblings().removeClass("curr");
};
};
// var li = $(".numbers a",$this);
$("#img_side").slideImg({
speed: "normal",
timer: 3000
});
})(jQuery);
</script>
</body>
</html>
分享到：
相关推荐
本文将深入探讨如何使用名为"kevinSlide"的jQuery插件来实现图片幻灯片功能。 首先，kevinSlide插件是专为创建动态、引人入胜的图片滑动展示而设计的。这种类型的组件常用于网站的首页或产品展示区域，以吸引用户...
总结来说，jQuery幻灯片图片展示是通过jQuery库来实现的一种动态图片展示技术，它结合了选择器、事件处理和动画等特性，提供了一种吸引人的用户体验。这个压缩包提供的素材和代码可能包含了创建这种效果所需的所有...
幻灯片效果通常是通过动态改变图片的显示状态来实现的，这包括切换图片、设置过渡效果以及控制导航按钮等。jQuery提供了丰富的API和方法，如`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等，这些可以用来创建平滑的...
《jQuery实现新闻幻灯片展示详解》 在网页设计中，动态效果的运用可以极大地提升用户体验，其中新闻幻灯片展示是一种常见的JavaScript特效，用于在有限的空间内展示多条新闻或者图片。本教程将深入探讨如何使用...
本文将详细探讨"jQuery幻灯片播放特效"这一主题，结合"jquery-powerSwitch插件实现京东商城首页幻灯片切换效果"的实例，深入解析如何创建动态且吸引人的网页幻灯片。 首先，幻灯片播放特效是网页设计中常见的元素，...
**jQuery三张图片一起滑动幻灯片特效**是一种常见的网页动态展示技术，常用于网站的首页或产品展示部分，以吸引用户注意力并提供视觉上的吸引力。这种特效通过JavaScript库jQuery实现，它允许多张图片在设定的时间...
jQuery幻灯片Slide隐藏效果是一种常见的网页动态展示技术，它为用户提供了一种优雅的方式来展示内容，如图片、文字或任何其他HTML元素。这种效果通常应用于网站的首页、产品展示、新闻滚动等场景，以吸引用户的注意...
本篇文章将详细讲解如何使用jQuery实现图片轮流播放的效果，这通常被称为图片轮播或幻灯片展示。 首先，我们需要了解jQuery的基本用法。jQuery对象通过$符号创建，它可以用来选择页面上的元素，例如`$("#elementID...
标题中的“jQuery带标题描述背景幻灯片代码”是指一种使用jQuery库实现的网页动态效果，它允许在网站上创建带有标题、描述和背景图片的幻灯片展示。这种功能通常用于首页轮播图或者产品展示，以吸引用户注意力并提供...
这个简单的jQuery图片幻灯片实现已经可以在大部分现代浏览器以及IE6中运行，但还可以根据需求进一步定制，例如添加导航按钮、动态加载图片、添加过渡效果等。在实际项目中，你可能需要考虑更复杂的情况，如响应式...
【jQuery魅族官网导航加幻灯片代码】是一款基于JavaScript库jQuery实现的网页导航栏与幻灯片展示功能的代码示例。这个代码主要用于模仿魅族手机官网首页的设计，为用户提供一个具有动态效果的导航菜单和自动轮播的...
"jQuery自动播放幻灯片+手风琴切换效果"就是一个典型的例子，它结合了两种常见的UI元素：幻灯片（Slider）和手风琴（Accordion）。这种设计不仅能够提供动态视觉体验，还能有效地组织和展示内容。下面我们将深入探讨...
jQuery.slidizle是一款功能强大且完全自定义的响应式jQuery幻灯片插件。它旨在为网站设计师和开发者提供一个灵活、高效的工具，用于创建各种类型的滑动展示，如产品展示、图片轮播、新闻滚动等。这个插件的特点在于...
在创建一个带背景图片的幻灯片时，前端开发者经常使用JavaScript库来实现动态效果，例如jQuery就是一个常用的选择。在这个项目中，"jquery-lunbo"可能是指基于jQuery的轮播图插件，用于实现幻灯片功能。下面将详细...
【jQuery图片幻灯特效开发详解】 在Web前端开发中，图片幻灯效果是一种常见的视觉展示方式，用于在有限的空间内展示多张图片，为用户提供动态、连续的浏览体验。本教程将详细介绍如何基于jQuery框架创建一个类似...
本压缩包中的"jQuery文字图片幻灯片动画切换效果.zip"包含了一套完整的jQuery幻灯片切换效果，适用于网站头部 banner 或产品展示等场景。 首先，我们来看`index.html`，这是网页的主文件，它包含了HTML结构以及引用...
在这个“jQuery图片文字幻灯片动画切换代码”项目中，我们将深入探讨如何利用jQuery实现动态的图片和文字轮播效果，同时结合CSS和HTML5技术来创建一个吸引人的用户界面。 首先，HTML5是现代网页开发的基础，它引入...
Highslide JS是一款功能强大且易于使用的JavaScript幻灯片插件，它与jQuery库结合使用，为网站添加高质量的图片和媒体展示效果。Highslide JS以其轻量级、响应式和高度可定制的特点受到广大Web开发者的青睐。在...
6. **易用性**：通过简单的jQuery选择器和方法调用，就能快速地在页面上实现复杂的旋转幻灯片效果。 在使用jQuery.roundabout.js时，我们需要先在页面中引入jQuery库和该插件的JavaScript及CSS文件。然后，通过HTML...