本例子是仿照京东网首页图片样式，然后自己加了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>
分享到：
相关推荐
jQuery幻灯片图片展示 图片例子效果,适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
实现对象切换的插件其实网上很多， 但是应用起来总是不够满意，不够简洁，不够实用，所以干脆自己写了一个， 本来取名为sGallery，即simpleGallery， 但感觉这个插件不仅仅是可以应用在幻灯相册上，确实应该称它为...
幻灯片例子纯CSS 没用jQuery
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
jQuery.slideShow，自述文件： 2011-04-21， 描述这是一个非常简单易用的jquery幻灯片插件。 它将自动创建幻灯片放映，并在图像列表之外导航。 该插件还提供了不同的回调和选项，可让您自定义slideShow对鼠标悬停，...
jquery YoxView网页图片展示、多级菜单插件以及安装调试说明文件，例子没有找到，不过有详细的安装说明，来自国外的网页图片幻灯片插件，在网页上快速实现图片展示、图片切换和焦点图一类的特效。
jQuery相册图库图片浏览展示特效，可直接拿去当焦点图用，左侧显示缩略图列表，右侧为大图片显示，里面一共有8个例子，有些例子是展示如何实现图片淡入淡出效果的，有些是演示最基本的图片切换，有一些则是完整的...
一个很好用的即时加载图片，例子里面也很详细，属于本人原创，希望多你有所帮助
SuperSlide jQuery脚本幻灯片 酷炫显示
效果幻灯片$（“＃ticker2”）。ticker（{effect：“ slideUp”}）;; 效果下滑$（“＃ticker3”）。ticker（{effect：“ slideDown”}）;; 选项$ .fn.ticker.defaults = {控件：false，//显示控件，要实现的间隔：...
一款由jquery制作实现的图文切换代码-类似于JS图片展示，切换的内容包括了图片和文字，左右两侧各显示出控制按钮，通过这两个按钮可控制图文区域左右切换，滑动风格的切换，例子中向你介绍了本效果的多种用法，请...
LayerSlider WordPress的插件功能 ...包括免费幻灯片转换画廊 非常详细的文档与例子 使用的无限变化（图像滑块，带有文本的图像滑块，内容滑块，视频库滑块，混合内容滑块，横幅旋转器，旋转木马等）
4)新增GetImagesUrl属性,可以通过该属性获取控件提交内容里所有图片的URL地址(Webeditor1.GetImagesUrl[图片序号].ToString())，得到的图片地址将可用于首页新闻的图片显示或幻灯片显示。 2008/2/28 Version 5.0.0...
4)新增GetImagesUrl属性,可以通过该属性获取控件提交内容里所有图片的URL地址(Webeditor1.GetImagesUrl[图片序号].ToString())，得到的图片地址将可用于首页新闻的图片显示或幻灯片显示。 2008/2/28 Version ...
带GIF的小样通过显示欢迎幻灯片启动应用程序 显示默认城市及其当前天气，天气预报和紫外线指数 变化中的城市 显示警告，告诉我们openweathermap数据库中不存在城市 显示一些天气图像的例子 改变天气预报时间 显示...
util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...
Java数组倒置 简单 Java图片加水印，支持旋转和透明度设置 摘要:Java源码,文件操作,图片水印 util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印...