<SCRIPT type=text/javascript> var areaDailyList = [{"content":"<br>","id":29,"title":"","image":"images\/01-big.jpg","date":"2010-07-09","imageFrom":"www.lanrentuku.com"},{"content":"","id":28,"title":"","image":"images\/02-big.jpg","date":"2010-07-08","imageFrom":"www.lanrentuku.com"},{"content":"文字说明3","id":27,"title":"标题3","image":"images\/03-big.jpg","date":"2010-07-07","imageFrom":"www.lanrentuku.com"},{"content":"文字说明4","id":20,"title":"标题4","image":"images\/04-big.jpg","date":"2010-07-06","imageFrom":"www.lanrentuku.com"},{"content":"文字说明5","id":24,"title":"标题5","image":"images\/05-big.jpg","date":"2010-07-05","imageFrom":"www.lanrentuku.com"}]; jQuery(function(){ if (!$('#slidePic')[0]) return; var i = 0, p = $('#slidePic ul'), pList = $('#slidePic ul li'), len = pList.length; var elePrev = $('#prev'), eleNext = $('#next'); //var firstClick = false; var w = 100, num = 3; p.css('width',w*len); if (len <= num) eleNext.addClass('gray'); function prev(){ if (elePrev.hasClass('gray')) { //alert('已经是第一张了'); return; } p.animate({ marginTop:-(--i) * w },500); if (i < len - num) { eleNext.removeClass('gray'); } if (i == 0) { elePrev.addClass('gray'); } } function next(){ if (eleNext.hasClass('gray')) { //alert('已经是最后一张了'); return; } //p.css('margin-left',-(++i) * w); p.animate({ marginTop:-(++i) * w },500); if (i != 0) { elePrev.removeClass('gray'); } if (i == len - num) { eleNext.addClass('gray'); } } elePrev.bind('click',prev); eleNext.bind('click',next); pList.each(function(n,v){ $(this).click(function(){ if(n-i == 2){ next(); } if(n-i == 0){ prev() } $('#slidePic ul li.cur').removeClass('cur'); $(this).addClass('cur'); show(n); }).mouseover(function(){ $(this).addClass('hover'); }).mouseout(function(){ $(this).removeClass('hover'); }) }); function show(i){ var ad = areaDailyList[i]; var t = ad.date.split('-'); $('#dailyTitle').html(ad.title); $('#dailyImage').attr('src',ad.image); $('#dailyImageFrom').html('' + ad.imageFrom + ''); $('#dailyContent').html(ad.content); $('#dailyDate').html('<em class="ym">' + t[0] + '.' + t[1] + '</em><em class="day">' + t[2] + '</em>'); var shareRRUrl = encodeURIComponent('http://www.nuomi.com/share365/'+ad.id); var shareUrl = encodeURIComponent('http://www.nuomi.com/#reading'); var shareTitle = encodeURIComponent(ad.title + 'http://www.lanrentuku.com'); var shareContent = encodeURIComponent(ad.content.substring(0,100)+'...');
页面加载时,从服务器端获取
ajax 按需求刷新
。。
这种形式是已经是动态的了,关键是你的html_pic是由java控制的吧。它变了不是动起来了吗?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为糯米网产品展示效果,属于站长常用代码,更多焦点图代码请访问懒人图库JS代码频道。" />
<LINK media=all href="css/css.css" type=text/css rel=stylesheet>
<script src="jquery-1.4.41.js"></script>
<title>糯米网产品展示效果_懒人图库</title>
</head><body> <div id="container">
<div class="left">
<DIV class="s-c">
<P class="p1"><a href="#"><img alt="#" id=dailyImage src="images/01-big.jpg"></a></P>
</DIV>
</div>
<DIV class=right>
<DIV class=slide-pic id=slidePic>
<A class=gray id=prev hideFocus href="javascript:;">前移</A>
<DIV class=pic-container>
<UL>
<LI>
<P><IMG src="images/01.jpg"></P></LI>
<LI class="">
<P><IMG src="images/02.jpg"></P></LI>
<LI class="">
<P><IMG src="images/03.jpg"></P></LI>
<LI class="">
<P><IMG src="images/04.jpg"></P></LI>
<LI class="">
<P><IMG src="images/05.jpg"></P></LI>
</UL>
</DIV>
<A id=next hideFocus href="javascript:;">后移</A>
</DIV>
<SCRIPT type=text/javascript>
var areaDailyList = [{"content":"<br>","id":29,"title":"","image":"images\/01-big.jpg","date":"2010-07-09","imageFrom":"www.lanrentuku.com"},{"content":"","id":28,"title":"","image":"images\/02-big.jpg","date":"2010-07-08","imageFrom":"www.lanrentuku.com"},{"content":"文字说明3","id":27,"title":"标题3","image":"images\/03-big.jpg","date":"2010-07-07","imageFrom":"www.lanrentuku.com"},{"content":"文字说明4","id":20,"title":"标题4","image":"images\/04-big.jpg","date":"2010-07-06","imageFrom":"www.lanrentuku.com"},{"content":"文字说明5","id":24,"title":"标题5","image":"images\/05-big.jpg","date":"2010-07-05","imageFrom":"www.lanrentuku.com"}];
jQuery(function(){
if (!$('#slidePic')[0])
return;
var i = 0, p = $('#slidePic ul'), pList = $('#slidePic ul li'), len = pList.length;
var elePrev = $('#prev'), eleNext = $('#next');
//var firstClick = false;
var w = 100, num = 3;
p.css('width',w*len);
if (len <= num)
eleNext.addClass('gray');
function prev(){
if (elePrev.hasClass('gray')) {
//alert('已经是第一张了');
return;
}
p.animate({
marginTop:-(--i) * w
},500);
if (i < len - num) {
eleNext.removeClass('gray');
}
if (i == 0) {
elePrev.addClass('gray');
}
}
function next(){
if (eleNext.hasClass('gray')) {
//alert('已经是最后一张了');
return;
}
//p.css('margin-left',-(++i) * w);
p.animate({
marginTop:-(++i) * w
},500);
if (i != 0) {
elePrev.removeClass('gray');
}
if (i == len - num) {
eleNext.addClass('gray');
}
}
elePrev.bind('click',prev);
eleNext.bind('click',next);
pList.each(function(n,v){
$(this).click(function(){
if(n-i == 2){
next();
}
if(n-i == 0){
prev()
}
$('#slidePic ul li.cur').removeClass('cur');
$(this).addClass('cur');
show(n);
}).mouseover(function(){
$(this).addClass('hover');
}).mouseout(function(){
$(this).removeClass('hover');
})
});
function show(i){
var ad = areaDailyList[i];
var t = ad.date.split('-');
$('#dailyTitle').html(ad.title);
$('#dailyImage').attr('src',ad.image);
$('#dailyImageFrom').html('' + ad.imageFrom + '');
$('#dailyContent').html(ad.content);
$('#dailyDate').html('<em class="ym">' + t[0] + '.' + t[1] + '</em><em class="day">' + t[2] + '</em>');
var shareRRUrl = encodeURIComponent('http://www.nuomi.com/share365/'+ad.id);
var shareUrl = encodeURIComponent('http://www.nuomi.com/#reading');
var shareTitle = encodeURIComponent(ad.title + 'http://www.lanrentuku.com');
var shareContent = encodeURIComponent(ad.content.substring(0,100)+'...');
}
});
</SCRIPT>
<div class="chakanYT"> <a href="#">点击查看原图</a></div>
</DIV>
</div></body>
</html>
想实现这样的效果,但要动态的,不知道怎么做!