博客

如何


在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文件，即可在浏览器中展示出循环播放的图片。