|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-12-03
本例子是仿照京东网首页图片样式，然后自己加了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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-12-03
抓狂，怎么把java放进来了
|
| 返回顶楼 | |
|
发表时间：2011-12-07
xieye 写道 抓狂，怎么把java放进来了
java 负责吧图片路径输出来就行了啊！ |
| 返回顶楼 | |
|
发表时间：2011-12-07
来个截图行不行呀，我懒得部署了，不想运行了
|
| 返回顶楼 | |
|
发表时间：2011-12-08
怎么还java工程，跟java有关系吗
|
| 返回顶楼 | |
|
发表时间：2011-12-08
其实楼主写得这个不用部署都能够运行的，大家只需要把index.jsp文件改名为index.html文件即可。
|
| 返回顶楼 | |
|
发表时间：2011-12-08
说实话 我都懒得去下 截图有没有？
|
| 返回顶楼 | |
|
发表时间：2011-12-08
xiaoxihai123 写道 其实楼主写得这个不用部署都能够运行的，大家只需要把index.jsp文件改名为index.html文件即可。
确实不用部署，直接改文件后缀就OK了 |
| 返回顶楼 | |
|
发表时间：2011-12-08
chenzhou123520 写道 xiaoxihai123 写道 其实楼主写得这个不用部署都能够运行的，大家只需要把index.jsp文件改名为index.html文件即可。
确实不用部署，直接改文件后缀就OK了 可能习惯了在myeclipse中开发了，不想打开dw开发，呵呵，项目不用部署，就改后缀名称就可以运行了！ |
| 返回顶楼 | |
|
发表时间：2011-12-08
keer2345 写道 来个截图行不行呀，我懒得部署了，不想运行了
http://www.360buy.com/ 京东网主要那个图片轮放的，图片不是很会弄，等以后学会了，以后发帖带图！ |
| 返回顶楼 | |
