图片展示javascript
3.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="images/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="images/jquery.lazyload.js"></script>
<!--<script type="text/javascript" src="images/cps.js"></script>
--><script type="text/javascript" src="images/default_1.js"></script>
<script type="text/javascript" src="images/featuredcontentglider.min.js"></script>
<!--<script type="text/javascript" src="images/jquery.jcarousel.pack.js"></script>
--><!--<script type="text/javascript" src="images/jquery.jdMenu.css"></script>
--><!--<script type="text/javascript" src="images/jquery.livequery.min.js"></script>
--><script type="text/javascript" src="images/jquery.pngFix.min.js"></script>
<link type="text/css" rel="stylesheet" href="images/3.css" />
</head>
<body>
<DIV class=advertise>
<DIV id=canadaprovinces class=glidecontentwrapper>
<DIV class=glidecontent><A
href="http://www.anport-e.com/Promotion/saleInfo.aspx?sysno=132"
target=_blank><IMG border=0 alt=""
src="images/9yuexiaoyuan-home-9_9.jpg"
width=710 height=245></A></DIV>
<DIV class=glidecontent><A
href="http://www.anport-e.com/Promotion/saleInfo.aspx?sysno=117"
target=_blank><IMG class=bannerImg border=0 alt=""
original="http://pic.anport-e.com.cn/webpictures/basic/adv/HD20110819L/001.jpg" ></A></DIV>
<DIV class=glidecontent><A
href="http://www.anport-e.com/Promotion/saleInfo.aspx?sysno=98"
target=_blank><IMG border=0 alt="" width=710 height=245
original="http://pic.anport-e.com.cn/webpictures/basic/adv/HD20110809/banner-710-245.jpg"></A></DIV>
<DIV class=glidecontent><A
href="http://www.anport-e.com/Promotion/saleInfo.aspx?sysno=84"
target=_blank><IMG border=0 alt="" width=710 height=245
original="http://www.setv.me/temp/banner-710-245.jpg"></A></DIV>
<DIV class=glidecontent><A
href="http://www.anport-e.com/Promotion/saleInfo.aspx?sysno=115"
target=_blank><IMG class=bannerImg border=0 alt="" width=710 height=245
original="http://pic.anport-e.com.cn/webpictures/basic/adv/HD20110819/710x245px-banner.jpg"></A></DIV>
<DIV class=glidecontent><A
href="http://dzsws.mofcom.gov.cn/aarticle/zcfb/201108/20110807700275.html?635351444=638390163"
target=_blank><IMG border=0 alt="" width=710 height=245
original="http://pic.anport-e.com.cn/webpictures/basic/banner/BN20110628/banner-710-245.jpg"></A></DIV>
<DIV style="BACKGROUND-IMAGE: none" id=p-select
class="glidecontenttoggler bannerImg"><A class=toc onclick=this.blur();
href="javascript:;"><IMG border=0 alt=""
src="images/1.png"></A> <A class=toc
onclick=this.blur(); href="javascript:;"><IMG border=0 alt=""
src="images/2.png"></A> <A class=toc
onclick=this.blur(); href="javascript:;"><IMG border=0 alt=""
src="images/3.png"></A> <A class=toc
onclick=this.blur(); href="javascript:;"><IMG border=0 alt=""
src="images/4.png"></A> <A class=toc
onclick=this.blur(); href="javascript:;"><IMG border=0 alt=""
src="images/5.png"></A> <A class=toc
onclick=this.blur(); href="javascript:;"><IMG border=0 alt=""
src="images/6.png"></A></DIV></DIV>
<SCRIPT type=text/javascript>
$(".glidecontent img").each(function(i,j){
if(i>0)
{
$(this).hide();
$(this).lazyload({
failurelimit: 10
,event : "sporty"
});
}
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {
InitBanner();
$(".glidecontent img").each(function(i,j){
if(i>0)
{
$(this).trigger("sporty");
}
});
}, 1000);
});
$(".glidecontenttoggler").hide();
function InitBanner(){
$(".glidecontenttoggler").show();
$(".glidecontent img").each(function(i,j){
if(i>0)
{
$(this).show();
}
});
featuredcontentglider.init({gliderid: "canadaprovinces",contentclass: "glidecontent",togglerid: "p-select",remotecontent: "", selected: 0,persiststate: false,speed: 500,direction: "leftright",autorotate: true,autorotateconfig: [3000, 50],textalign:"right"});$('.glidecontenttoggler').css("display","block");jQuery(document).pngFix();
}
</SCRIPT>
</DIV>
</body>
</html>
3.css:
@charset "utf-8";
/* CSS Document */
.advertise {
WIDTH: 710px; DISPLAY: block; FLOAT: left; HEIGHT: 245px; OVERFLOW: hidden
}
.glidecontentwrapper {
POSITION: relative; WIDTH: 710px; HEIGHT: 245px; OVERFLOW: hidden
}
.glidecontent {
POSITION: absolute; WIDTH: 710px
}
.glidecontenttoggler {
Z-INDEX: 1000; POSITION: absolute; TEXT-ALIGN: right; WIDTH: 710px; BOTTOM: 0px; DISPLAY: none; HEIGHT: 39px; LEFT: 0px
}
.glidecontentwrapper .number {
BACKGROUND-IMAGE: none
}
.glidecontenttoggler .toc {
POSITION: absolute; WIDTH: 25px; TOP: 8px
}
.number .toc {
WIDTH: 25px; TOP: 20px
}
.glidecontenttoggler A {
FILTER: alpha(opacity=60); CURSOR: pointer; -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6
}
.glidecontenttoggler .prev {
POSITION: absolute; WIDTH: 21px; DISPLAY: block; HEIGHT: 21px; TOP: 9px; LEFT: 30px
}
.glidecontenttoggler .next {
POSITION: absolute; WIDTH: 21px; DISPLAY: block; HEIGHT: 21px; TOP: 9px; RIGHT: 30px
}
.glidecontenttoggler A.selected {
FILTER: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1
}
.glidecontenttoggler A:hover {
FILTER: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1
}
default_1.css:
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _this= this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(), //获取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
//滚动函数
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
//鼠标事件绑定
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
//-(166-$(this).innerWidth())/2;
function highlightPage(){var links = $("#navgation_bar .c1"); var currenturl = window.location.href;links.each(function(){var linkurl=this.getAttribute("href");linkurl=linkurl.substr(linkurl.lastIndexOf('/')+1);var oimg=$(this).find("img");if(currenturl.indexOf(linkurl) != -1&&oimg[0].src!=undefined){oimg[0].src=oimg[0].src.replace(/C1.jpg/,"C1HoverClick.jpg");}}); $("#navgation_bar img").hover(function(){this.src=this.src.replace(/C1.jpg/,"C1Hover.jpg");},function(){if(currenturl.indexOf($(this).parent("a")[0].href) == -1)this.src=this.src.replace(/C1Hover.jpg/,"C1.jpg");});$(".jd_menu li").hover(function(){
var left=0;
$(this).find("ul").css({"display":"block","left":left+"px"});
},function(){$(this).find("ul").css("display","none");});}
function checkSearchForm(){
document.getElementById("ctl00_PanelSearch").blur();
if(document.getElementById("ctl00_txtKeyWord").value !="" && document.getElementById("ctl00_txtKeyWord").value != " 搜索关键字 " ){
return true;
}else{
alert("请输入搜索关键词！");return false;
}
}
function checkSearchText(obj){
if(obj.value==' 搜索关键字 ') obj.value="";
}
function initSearchText(obj){
if(obj.value==''){
obj.value=' 搜索关键字 ';
}
}
featuredcontentglider.css:
var featuredcontentglider={
leftrightkeys: [37, 39],
csszindex: 100,
isFirstLoad:true,
ajaxloadingmsg: '<b>Fetching Content. Please wait...</b>',
currPage:0,
glide:function(config, showpage, isprev){
var selected=parseInt(showpage);
if (selected>=config.$contentdivs.length){alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.");selected=0;}
var $target=config.$contentdivs.eq(selected);
if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
var $selectedlink=config.$toc.eq(selected);
config.nextslideindex=(selected<config.$contentdivs.length-1)? selected+1 : 0;
config.prevslideindex=(selected==0)? config.$contentdivs.length-1 : selected-1;
config.$next.attr('loadpage', config.nextslideindex+"pg") ;
config.$prev.attr('loadpage', config.prevslideindex+'pg');
if(this.isFirstLoad){
this.isFirstLoad=false;
$target.css(config.leftortop, 0).css("zIndex", this.csszindex++);
config.$toc.removeClass('selected');
$selectedlink.addClass('selected');
config.$togglerdiv.attr('lastselected', selected+'pg');
}
else{
var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint;
var tempSelected=parseInt(this.currPage);
if(tempSelected>selected&&selected!=0)
startpoint=-config.startpoint;
else if(tempSelected!=config.$contentdivs.length-1&&selected==0)
startpoint=-config.startpoint;
$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++);
var endpoint=(config.leftortop=="left")? {left:0} : {top:0};
$target.animate(endpoint, config.speed);
config.$toc.removeClass('selected');
$selectedlink.addClass('selected');
config.$togglerdiv.attr('lastselected', selected+'pg');
}
this.currPage=selected;
}
},
getremotecontent:function($, config){
config.$glider.html(this.ajaxloadingmsg)
$.ajax({
url: config.remotecontent,
error:function(ajaxrequest){
config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
config.$glider.html(content);
featuredcontentglider.setuptoggler($, config);
}
});
},
aligncontents:function($, config){
config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass);
config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'});
},
setuptoggler:function($, config){
this.aligncontents($, config);
config.$toc.each(function(index){
$(this).attr('pagenumber', index+'pg');
if (index > (config.$contentdivs.length-1))
$(this).css({display: 'none'}) ;
});
var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev");
$nextandprev.click(function(event){
featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype'));
event.preventDefault() ;
});
config.$toc.click(function(event){
featuredcontentglider.glide(config, this.getAttribute('pagenumber'))
event.preventDefault()
});
config.$togglerdiv.fadeIn(1000, function(){
featuredcontentglider.glide(config, config.selected)
if (config.autorotate==true){config.stepcount=0;config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1];featuredcontentglider.autorotate(config);}});
config.$togglerdiv.click(function(){featuredcontentglider.cancelautorotate(config.togglerid);featuredcontentglider.autorotate(config);});
if (this.leftrightkeys.length==2){$(document).bind('keydown', function(e){featuredcontentglider.keyboardnav(config, e.keyCode);})}},
autorotate:function(config){var rotatespeed=config.speed+config.autorotateconfig[0];window[config.togglerid+"timer"]=setInterval(function(){if (config.totalsteps>0 && config.stepcount>=config.totalsteps){clearInterval(window[config.togglerid+"timer"]);}else{featuredcontentglider.glide(config, config.nextslideindex, "next");config.stepcount++;}}, rotatespeed)},cancelautorotate:function(togglerid){if (window[togglerid+"timer"]){clearInterval(window[togglerid+"timer"]);}},
keyboardnav:function(config, keycode){
if (keycode==this.leftrightkeys[0])
featuredcontentglider.glide(config, config.prevslideindex, "previous");
else if (keycode==this.leftrightkeys[1])
featuredcontentglider.glide(config, config.nextslideindex, "next");
if (keycode==this.leftrightkeys[0] || keycode==this.leftrightkeys[1])
featuredcontentglider.cancelautorotate(config.togglerid);
},getCookie:function(Name){var re=new RegExp(Name+"=[^;]+", "i"); if (document.cookie.match(re)) ;return document.cookie.match(re)[0].split("=")[1];return null;},setCookie:function(name, value){document.cookie = name+"="+value;},
init:function(config){
jQuery(document).ready(function($){
config.$glider=$("#"+config.gliderid);
config.$togglerdiv=$("#"+config.togglerid);
config.$toc=config.$togglerdiv.find('.toc');
config.$next=config.$togglerdiv.find('.next');
config.$prev=config.$togglerdiv.find('.prev');
config.$prev.attr('buttontype', 'previous');
var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected;
config.selected=(isNaN(parseInt(selected))) ? config.selected : selected; //test for cookie value containing null (1st page load) or "undefined" string
config.leftortop=(/up/i.test(config.direction))? "top" : "left"; //set which CSS property to manipulate based on "direction"
config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width(); //Get glider height or width based on "direction"
config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth ;//set initial position of contents based on "direction"
if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)
featuredcontentglider.getremotecontent($, config);
else
featuredcontentglider.setuptoggler($, config);
$(window).bind('unload', function(){ //clean up and persist
config.$togglerdiv.unbind('click');
config.$toc.unbind('click');
config.$next.unbind('click');
config.$prev.unbind('click');
if (config.persiststate)
featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'));
config=null;
});
switch(config.textalign){
case "left":
var toc_width=config.$toc.outerWidth();
config.$toc.each(function(index){$(this).css({"left":(index<=0?20:5*index+20+toc_width*index)+"px"});});
break;
case "right":
var toc_width=config.$toc.outerWidth(),left_width=(config.$togglerdiv.width()-toc_width*(config.$toc.length+3)-10);
config.$toc.each(function(index){$(this).css({"left":left_width+toc_width+toc_width*index+(index<=0?0:5*index)+"px"});});
break;
default:
case "center":
var toc_width=config.$toc.outerWidth(),left_width=(config.$togglerdiv.width()-toc_width*(config.$toc.length+3))/2;
config.$toc.each(function(index){$(this).css({"left":left_width+toc_width+toc_width*index+(index<=0?0:5*index)+"px"});});
break;
}
});
}
}
jquery.pngFix.min.js：
(function($){jQuery.fn.pngFix=function(settings){settings=jQuery.extend({blankgif:'blank.gif'},settings);var ie55=(navigator.appName=="Microsoft Internet Explorer"&&parseInt(navigator.appVersion)==4&&navigator.appVersion.indexOf("MSIE 5.5")!=-1);var ie6=(navigator.appName=="Microsoft Internet Explorer"&&parseInt(navigator.appVersion)==4&&navigator.appVersion.indexOf("MSIE 6.0")!=-1);if(jQuery.browser.msie&&(ie55||ie6)){jQuery(this).find("img[src$=.png]").each(function(){jQuery(this).attr('width',jQuery(this).width());jQuery(this).attr('height',jQuery(this).height());var prevStyle='';var strNewHTML='';var imgId=(jQuery(this).attr('id'))?'id="'+jQuery(this).attr('id')+'" ':'';var imgClass=(jQuery(this).attr('class'))?'class="'+jQuery(this).attr('class')+'" ':'';var imgTitle=(jQuery(this).attr('title'))?'title="'+jQuery(this).attr('title')+'" ':'';var imgAlt=(jQuery(this).attr('alt'))?'alt="'+jQuery(this).attr('alt')+'" ':'';var imgAlign=(jQuery(this).attr('align'))?'float:'+jQuery(this).attr('align')+';':'';var imgHand=(jQuery(this).parent().attr('href'))?'cursor:hand;':'';if(this.style.border){prevStyle+='border:'+this.style.border+';';this.style.border='';};if(this.style.padding){prevStyle+='padding:'+this.style.padding+';';this.style.padding='';};if(this.style.margin){prevStyle+='margin:'+this.style.margin+';';this.style.margin='';};var imgStyle=(this.style.cssText);strNewHTML+='<span '+imgId+imgClass+imgTitle+imgAlt;strNewHTML+='style="position:relative;white-space:pre-line;display:inline-block;background:transparent;'+imgAlign+imgHand;strNewHTML+='width:'+jQuery(this).width()+'px;'+'height:'+jQuery(this).height()+'px;';strNewHTML+='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader'+'(src=\'' + jQuery(this).attr('src') + '\', sizingMethod=\'scale\');';strNewHTML+=imgStyle+'"></span>';if(prevStyle!=''){strNewHTML='<span style="position:relative;display:inline-block;'+prevStyle+imgHand+'width:'+jQuery(this).width()+'px;'+'height:'+jQuery(this).height()+'px;'+'">'+strNewHTML+'</span>';};jQuery(this).hide();jQuery(this).after(strNewHTML);});jQuery(this).find("*").each(function(){var bgIMG=jQuery(this).css('background-image');if(bgIMG.indexOf(".png")!=-1){var iebg=bgIMG.split('url("')[1].split('")')[0];jQuery(this).css('background-image','none');jQuery(this).get(0).runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+iebg+"',sizingMethod='scale')";}});jQuery(this).find("input[src$=.png]").each(function(){var bgIMG=jQuery(this).attr('src');jQuery(this).get(0).runtimeStyle.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader'+'(src=\'' + bgIMG + '\', sizingMethod=\'scale\');';jQuery(this).attr('src',settings.blankgif)});};return jQuery;};})(jQuery);
浙公网安备 33010602011771号
