如何在html中展现动态循环图片过程（其中包含css，javascript）
如何在html中展现动态循环图片过程（其中包含css，javascript）
1、新建一个demo.html 在html中body里面新建一个div模块，写入下面的代码。
其中${pageContext.request.contextPath}/upload/scroll/123.png是图片所放的路径。
<div id="picBox">
<ul id="show_pic" style="left:0;">
<li><img src="${pageContext.request.contextPath}/img/1.png" width="720px" height="280px" alt="" /></li>
<li><img src="${pageContext.request.contextPath}/img/2.png" width="720px" height="280px" alt="" /></li>
<li><img src="${pageContext.request.contextPath}/img/3.png" width="720px" height="280px" alt="" /></li>
<li><img src="${pageContext.request.contextPath}/img/4.png" width="720px" height="280px" alt="" /></li>
<li><img src="${pageContext.request.contextPath}/img/5.png" width="720px" height="280px" alt="" /></li>
</ul>
<ul id="icon_num">
<li class="active"><a href="#slide-one" title="" >1</a></li>
<li class="active"><a href="#slide-one" title="" >2</a></li>
<li class="active"><a href="#slide-one" title="" >3</a></li>
<li class="active"><a href="#slide-one" title="" >4</a></li>
<li class="active"><a href="#slide-one" title="" >5</a></li>
</ul>
</div>
2、新建一个demo.css编写css样式，让整个页面显示的比较合理正常。
@CHARSET "UTF-8";
img{border:0}
#picBox{position:relative;width:720px;height:280px;overflow:hidden;border:0px solid green;}
#picBox ul#show_pic{list-style:none;height:280px; width:6670px; position:absolute;}
#picBox ul#show_pic li{ float:left;height:280px;}
#picBox ul#show_pic li img{ display:block;}
#icon_num{position:absolute;z-index:9;top:254px;left:2px;width:720px;height:24px;}
#icon_num li{float:left;list-style:none}
#icon_num li a:link,#icon_num li a:visited{
display:block;color:#fff;width:30px;height:24px;overflow:hidden;
margin-right:1px;font:12px/24px song;text-align:center;background:#000;TEXT-DECORATION:none;
filter:alpha(opacity=30);-moz-opacity:0.3;opacity: 0.3;
}
#icon_num .active a:link,#icon_num .active a:visited{
font-weight:bold;display:block;color:#333;background:#fff;
filter:alpha(opacity=60);-moz-opacity:.6;opacity: .6;
}
3、新建一个guanggao.js编写javascript脚本，让图片实现循环展示的效果。（备注：要在javascript官网下载一个jquery-1.7.2.js放入项目）
var glide =new function(){
function $id(id){return document.getElementById(id);};
this.layerGlide=function(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point){
var oSubLi = $id(oEventCont).getElementsByTagName('li');
var interval,timeout,oslideRange;
var time=1;
var speed = fSpeed
var sum = oSubLi.length;
var a=0;
var delay=second * 1000;
var setValLeft=function(s){
return function(){
oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
if(oslideRange==[(sSingleSize * s)]){
clearInterval(interval);
a=s;
}
}
};
var setValRight=function(s){
return function(){
oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
if(oslideRange==[(sSingleSize * s)]){
clearInterval(interval);
a=s;
}
}
}
function autoGlide(){
for(var c=0;c<sum;c++){oSubLi[c].className='';};
clearTimeout(interval);
if(a==(parseInt(sum)-1)){
for(var c=0;c<sum;c++){oSubLi[c].className='';};
a=0;
oSubLi[a].className="active";
interval = setInterval(setValLeft(a),time);
timeout = setTimeout(autoGlide,delay);
}else{
a++;
oSubLi[a].className="active";
interval = setInterval(setValRight(a),time);
timeout = setTimeout(autoGlide,delay);
}
}
if(auto){timeout = setTimeout(autoGlide,delay);};
for(var i=0;i<sum;i++){
oSubLi[i]. = (function(i){
return function(){
for(var c=0;c<sum;c++){oSubLi[c].className='';};
clearTimeout(timeout);
clearInterval(interval);
oSubLi[i].className="active";
if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){
interval = setInterval(setValLeft(i),time);
this. = setTimeout(autoGlide,delay);};};
}else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
interval = setInterval(setValRight(i),time);
this. = setTimeout(autoGlide,delay);};};
}
}
})(i)
}
}
}
glide.layerGlide(true,'icon_num','show_pic',720,5,0.08,'left');
4、代码写完后的整合。
在demo.html里面插入demo.css,jquery-1.7.2.js,guanggao.js文件，即可在浏览器中展示出循环播放的图片。