<!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>
<style type="text/css">
body,div,ul,li,ol,dl,img{padding:0; margin:0; list-style:none;}
.all{width:400px; height:307px; margin:50px auto;border:5px solid #ccc;position:relative;}
.all div{ width:400px; height:307px;overflow:hidden; position:relative;}
.all ul{height:307px; position:absolute; width:2000px;}
.all ul li{width:400px; height:307px; overflow:hidden; float:left;}
.all dl{position:absolute; top:40%; height:52px; z-index:20; width:440px; left:-20px; cursor:pointer;}
.all dl dt{width:50px; height:52px; float:left; background:url(images/arr.png) no-repeat;}
.all dl dd{width:50px; height:52px; float:right; background:url(images/arr.png) no-repeat right;}
.all ol{width:100px; height:13px; bottom:-25px; left:45%; position:absolute;}
.all ol li{height:13px; width:14px; background:url(images/00.png) no-repeat; float:left; margin-right:10px; cursor:pointer; overflow:hidden;}
.all ol li.current{background-position:0 -26px;}
#img_ul li img{width:400px;height:307px;}
</style>
<!--<script type="text/javascript" src="jquery-1.8.3.min.js"></script>-->
<script type="text/javascript">
/**
*
* //eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!‘‘.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return‘\\w+‘};c=1};while(c--){if(k[c]){p=p.replace(new RegExp(‘\\b‘+e(c)+‘\\b‘,‘g‘),k[c])}}return p}(‘$(6(){m a=0,b=0;$("o").7(6(){a++,a>4&&(a=1,$("5").d({2:0})),$("5").c().9({2:f*-a},e),b++,b>3&&(b=0),$("l k").g(b).i("j").h().8()}),$("n").7(6(){a--,0>a&&(a=3,$("5").d({2:-p})),$("5").c().9({2:f*-a},e),b--,0>b&&(b=3),$("l k").g(b).i("j").h().8()})});‘,26,26,‘||left|||ul|function|click|removeClass|animate|||stop|css|500|400|eq|siblings|addClass|current|li|ol|var|dt|dd|1600‘.split(‘|‘),0,{}))
*/
window.onload = function(){
var ulObj = document.getElementById(‘img_ul‘);
var li_length = document.getElementById(‘img_ul‘).getElementsByTagName(‘li‘);
var left_btn = document.getElementById(‘prev‘);
var right_btn = document.getElementById(‘next‘);
var botton_btn = document.getElementById(‘btton_btn‘);
var icoBtn = botton_btn.getElementsByTagName(‘li‘);
var baseWidth = li_length[0].offsetWidth;
var toclick = true;
var nowPos = 1;
var timer = null;
// console.log(li_length)
sttimer();
left_btn.onclick = function(){
if(toclick){
clearInterval(timer);
move(nowPos-1);
sttimer();
}
};
right_btn.onclick = function(){
if(toclick){
clearInterval(timer);
move(nowPos+1);
sttimer();
}
}
for(var i = 0; i < icoBtn.length;i++){
icoBtn[i].onclick = function(i){
if(toclick){
clearInterval(timer);
move(nowPos+1);
sttimer();
}
}
}
/**
* 移动到当前位置索引
* @param cIndex
*/
function move(cIndex){
toclick = false;
var tt = null;
var temp_o = 1;
var count = 0;
clearInterval(tt);
tt = setInterval(function(){
if(count == 8){
clearInterval(tt);
temp_o = 0;
ulObj.style.opacity = 0;
if(li_length.length < cIndex){
// 跳入第一页
ulObj.style.left = ‘-0px‘;
nowPos = 1;
}else if(cIndex <1){
// 跳入最后一页
ulObj.style.left = ‘-‘+baseWidth*(li_length.length-1)+‘px‘;
nowPos = li_length.length;
}else {
// 下一页
ulObj.style.left = ‘-‘ + baseWidth * (cIndex - 1) + ‘px‘;
nowPos = cIndex;
}
showcurrent(nowPos);
tt = setInterval(function(){
if(temp_o >= 1){
clearInterval(tt);
toclick = true;
}else{
ulObj.style.opacity = temp_o+0.1;
temp_o = temp_o+0.1;
}
},80);
}else{
ulObj.style.opacity = temp_o-0.1;
temp_o = temp_o-0.1;
count++;
}
},80);
}
function showcurrent(cc){
for(var i = 1; i <= icoBtn.length;i++){
icoBtn[i-1].className = ‘‘;
if(cc == i){
icoBtn[i-1].className = ‘current‘;
}
}
}
function sttimer(){
timer = setInterval(function(){
move(nowPos+1);
},5000);
}
}
</script>
</head>
<body>
<div id="id" class="all">
<div>
<ul id="img_ul">
<li class="current"><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
<li><img src="images/04.jpg"/></li>
<!--<li><img src="images/01.jpg"/></li>-->
</ul>
</div>
<dl>
<dt id="prev"><a href="#"></a></dt>
<dd id="next"><a href="#"></a></dd>
</dl>
<ol id="btton_btn">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
时间： 2024-08-09 08:37:21