本文介绍了一种基于HTML和JavaScript实现的图片滑动轮播效果。通过自定义的stepcarousel插件，可以轻松地创建平滑过渡的图片轮播，并支持前后翻页功能及状态显示。该插件允许配置多种参数，如面板行为、导航按钮样式等。
photostepcarousel.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<!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>
<base href="http://localhost:8080/dojodemo/" />
<title>图片滑动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html { margin:0; padding:0; color:#333333; font-size:12px; line-height:20px; background-color:#FFFFFF;}
ul,li { list-style:none; margin:0; padding:0;}
img { border:none;margin:0;padding:0px;}
a { color:#333333; text-decoration:none;}
a:hover { color:#FC5A0A; text-decoration:none;}
.box_title {color:#590000; line-height:17px; text-align:left; font-weight:bold; font-size:14px;background:url(http://static.l99.com/skin/default/images/bg_title_1.jpg) left top repeat-x;padding:1px 0px 0px 3px;}
.box_line { height:26px; background:url(http://static.l99.com/skin/default/images/line_title_1.jpg) left bottom repeat-x; padding:1px 1px 0px 1px;}
.box_border {width:100%; border:solid 1px #999999; margin-bottom:15px; padding-bottom:4px; overflow:hidden; background: url(http://static.l99.com/skin/default/images/picture/bg_corner.jpg) right bottom no-repeat;}
.photo_select {border:1px #fc5a0a solid; opacity:0.61; filter:Alpha(Opacity=61);}
.stepcarousel{position: relative;width: 720px;height: 120px;}
.stepcarousel .belt{position: absolute;left: 0;top: 0;}
.prev {display:block;width:20px;height:20px;background: url(http://static.l99.com/skin/default/images/arrow.gif) 0 0 no-repeat;position:absolute;left:0;bottom:0;}
.prev:hover{background: url(http://static.l99.com/skin/default/images/arrow.gif) 0 -20px no-repeat;}
.next {display:block;width:20px;height:20px;background: url(http://static.l99.com/skin/default/images/arrow.gif) -20px 0px no-repeat;position:absolute;right:0;bottom:0;}
.next:hover {background: url(http://static.l99.com/skin/default/images/arrow.gif) -20px -20px no-repeat;}
.adv_view ul { width:720px; margin: 0px auto;}
.adv_view ul li{ float: left; width: 110px; height:104px; margin: 10px; display:inline;text-align:center; vertical-align:middle; *font-size: 88px;}
.adv_view ul li img {margin:0 auto;vertical-align:middle;}
</style>
</head>
<body>
<div style="width: 730px; position: relative;left: 20%;top: 100px;">
<div class="box_border adv_view" style="position: relative;">
<div class="box_line">
<div class="box_title">图片滑动</div>
</div>
<div class="stepcarousel" id="mygallery">
<div class="belt">
<ul id="hot_picture1" class="hot_picture">
<li class="styleSingleHotPic photo_select" style="float: none; position: absolute; left: 0px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1221229158335_yezi47_s.jpg" />
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 122px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1218838819597_8gh87i_s.jpg" />
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 242px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219761385362_5mq0kv_s.jpg" />
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 362px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219762971646_8r2c1h_s.jpg" />
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 482px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219716241365_w31br2_s.jpg" />
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 602px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219761443515_3p0m95_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 722px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219240181821_1xrmt9_s.jpeg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 842px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1218910221184_m31atb_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 962px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1218977244296_nk198x_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1082px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219716224546_g0pd8n_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1202px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1221228985007_6fma7t_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1322px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219716244624_2nr6ce_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1442px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219716229627_ksc3g3_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1562px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219762966900_ug829i_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1682px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219464163301_tg9hk9_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1802px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219716357617_9pti45_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 1922px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1219240207051_7aek7x_s.jpg"/>
</a>
</li>
<li class="styleSingleHotPic" style="float: none; position: absolute; left: 2162px;">
<a href="javascript:void(0);">
<img src="photos/jquery/1218838758341_amia76_s.jpg"/>
</a>
</li>
</ul>
</div>
</div>
<a class="prev" href="javascript:stepcarousel.stepBy('mygallery', -6);" title="上一组"> </a>
<a class="next" href="javascript:stepcarousel.stepBy('mygallery', 6);" title="下一组"> </a>
</div>
<b>当前数:</b> <span id="statusA"></span> <b style="margin-left: 30px">总数:</b> <span id="statusC"></span> <br /><br />
</div>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/photo.stepcarousel.js"></script>
<script type="text/javascript" >
stepcarousel.setup({
galleryid: 'mygallery',
beltclass: 'belt',
panelclass: 'styleSingleHotPic',
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', 1, 75], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -14, 75]},
statusvars: ['statusA', 'statusB', 'statusC'],
contenttype: ['inline']
});
</script>
</body>
</html>
photo.stepcarousel.js
var stepcarousel={
ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="http://static.l99.com/skin/default/images/picture/lightbox-ico-loading.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', //customize HTML to show while fetching Ajax content
defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)
configholder: {},
getCSSValue:function(val){ //Returns either 0 (if val contains 'auto') or val as an integer
return (val=="auto")? 0 : parseInt(val);
},
getremotepanels:function($, config){ //function to fetch external page containing the panel DIVs
config.$belt.html(this.ajaxloadingmsg);
$.ajax({
url: config.contenttype[1], //path to external content
async: true,
error:function(ajaxrequest){
config.$belt.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText);
},
success:function(content){
config.$belt.html(content);
config.$panels=config.$gallery.find('.'+config.panelclass);
stepcarousel.alignpanels($, config);
}
})
},
getoffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype];
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1]; //return its value
return null;
},
setCookie:function(name, value){
document.cookie = name+"="+value;
},
fadebuttons:function(config, currentpanel){
config.$leftnavbutton.fadeTo('fast', currentpanel==0? this.defaultbuttonsfade : 1);
config.$rightnavbutton.fadeTo('fast', currentpanel==config.lastvisiblepanel? this.defaultbuttonsfade : 1);
},
addnavbuttons:function(config, currentpanel){
config.$leftnavbutton=$('<img src="'+config.defaultbuttons.leftnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+' panels'}).appendTo('body');
config.$rightnavbutton=$('<img src="'+config.defaultbuttons.rightnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Forward '+config.defaultbuttons.moveby+' panels'}).appendTo('body');
config.$leftnavbutton.bind('click', function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);
});
config.$rightnavbutton.bind('click', function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);
});
if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
this.fadebuttons(config, currentpanel);
}
},
alignpanels:function($, config){
var paneloffset=0
config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)
config.panelwidths=[] //array to store widths of each panel
config.$panels.each(function(index){ //loop through panels
var $currentpanel=$(this);
$currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'}); //position panel
$currentpanel.bind('click', function(e){return config.onpanelclick(e.target);}); //bind onpanelclick() to onclick event
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')); //calculate next panel offset
config.paneloffsets.push(paneloffset); //remember this offset
config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]); //remember panel width
})
config.paneloffsets.pop(); //delete last offset (redundant)
var addpanelwidths=0;
var lastpanelindex=config.$panels.length-1;
config.lastvisiblepanel=lastpanelindex;
for (var i=config.$panels.length-1; i>=0; i=i-1){
addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i]);
if (config.gallerywidth>addpanelwidths){
config.lastvisiblepanel=i; //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width
}
}
config.$belt.css({width: paneloffset+'px'}); //Set Belt DIV to total panels' widths
config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(window[config.galleryid+"persist"])) : 0; //determine 1st panel to show by default
config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0;
if (config.currentpanel!=0){
var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset);
config.$belt.css({left: -endpoint+'px'});
}
if (config.defaultbuttons.enable==true){ //if enable default back/forth nav buttons
this.addnavbuttons(config, config.currentpanel);
$(window).bind("load", function(){ //refresh position of nav buttons when page loads, in case offsets weren't available document.oncontentload
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")};
config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'});
config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'});
});
}
this.statusreport(config.galleryid);
config.oninit();
config.onslideaction(this);
},
stepTo:function(galleryid, pindex){ /*User entered pindex starts at 1 for intuitiveness. Internally pindex still starts at 0 */
var config=stepcarousel.configholder[galleryid];
if (typeof config=="undefined"){
alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!");
return;
}
var pindex=Math.min(pindex-1, config.paneloffsets.length-1);
var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset);
if (config.panelbehavior.wraparound==false && config.defaultbuttons.enable==true){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
this.fadebuttons(config, pindex);
}
config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)});
config.currentpanel=pindex;
this.statusreport(galleryid);
},
stepBy:function(galleryid, steps){
var config=stepcarousel.configholder[galleryid];
if (typeof config=="undefined"){
alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!");
return;
}
var direction=(steps>0)? 'forward' : 'back'; //If "steps" is negative, that means backwards
var pindex=config.currentpanel+steps ;//index of panel to stop at
if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
pindex=(direction=="back" && pindex<=0)? 0 : (direction=="forward")? Math.min(pindex, config.lastvisiblepanel) : pindex;
if (config.defaultbuttons.enable==true){ //if default nav buttons are enabled, fade them in and out depending on if at start or end of carousel
stepcarousel.fadebuttons(config, pindex);
}
}
else{ //else, for normal stepBy behavior
pindex=(pindex>config.paneloffsets.length-1 || pindex<0 && pindex-steps>0)? 0 : (pindex<0)? config.paneloffsets.length+steps : pindex; //take into account end or starting panel and step direction
}
var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset); //left distance for Belt DIV to travel to
if (pindex==0 && direction=='forward' || config.currentpanel==0 && direction=='back' && config.panelbehavior.wraparound==true){ //decide whether to apply "push pull" effect
config.$belt.animate({left: -config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'}, 'normal', function(){
config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this);});
});
}
else
config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this);});
config.currentpanel=pindex;
this.statusreport(galleryid);
},
statusreport:function(galleryid){
var config=stepcarousel.configholder[galleryid];
var startpoint=config.currentpanel; //index of first visible panel
var visiblewidth=0;
for (var endpoint=startpoint; endpoint<config.paneloffsets.length; endpoint++){ //index (endpoint) of last visible panel
visiblewidth+=config.panelwidths[endpoint];
if (visiblewidth>config.gallerywidth){
break;
}
}
startpoint+=1; //format startpoint for user friendiness
endpoint=(endpoint+1==startpoint)? startpoint : endpoint; //If only one image visible on the screen and partially hidden, set endpoint to startpoint
var valuearray=[startpoint, endpoint, config.panelwidths.length];
for (var i=0; i<config.statusvars.length; i++){
window[config.statusvars[i]]=valuearray[i]; //Define variable (with user specified name) and set to one of the status values
config.$statusobjs[i].text(valuearray[i]+" "); //Populate element on page with ID="user specified name" with one of the status values
}
},
setup:function(config){
//Disable Step Gallery scrollbars ASAP dynamically (enabled for sake of users with JS disabled)
document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>');
jQuery(document).ready(function($){
config.$gallery=$('#'+config.galleryid);
config.gallerywidth=config.$gallery.width();
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")};
config.$belt=config.$gallery.find('.'+config.beltclass); //Find Belt DIV that contains all the panels
config.$panels=config.$gallery.find('.'+config.panelclass); //Find Panel DIVs that each contain a slide
config.onpanelclick=(typeof config.onpanelclick=="undefined")? function(target){} : config.onpanelclick; //attach custom "onpanelclick" event handler
config.onslideaction=(typeof config.onslide=="undefined")? function(){} : function(beltobj){$(beltobj).stop(); config.onslide();}; //attach custom "onslide" event handler
config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit;//attach custom "oninit" event handler
config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft')); //Find length of Belt DIV's left margin
config.statusvars=config.statusvars || []; //get variable names that will hold "start", "end", and "total" slides info
config.$statusobjs=[$('#'+config.statusvars[0]), $('#'+config.statusvars[1]), $('#'+config.statusvars[2])];
config.currentpanel=0;
stepcarousel.configholder[config.galleryid]=config; //store config parameter as a variable
if (config.contenttype[0]=="ajax" && typeof config.contenttype[1]!="undefined") //fetch ajax content?
stepcarousel.getremotepanels($, config);
else
stepcarousel.alignpanels($, config); //align panels and initialize gallery
}) //end document.ready
jQuery(window).bind('unload', function(){ //clean up
if (config.panelbehavior.persist){
stepcarousel.setCookie(window[config.galleryid+"persist"], config.currentpanel);
}
jQuery.each(config, function(ai, oi){
oi=null;
})
config=null;
});
}
};
图
扫一扫
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
