<!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={dede:global.cfg_soft_lang/}" />
<title>{dede:global.cfg_webname/}</title>
<meta name="description" content="{dede:global.cfg_description/}" />
<meta name="keywords" content="{dede:global.cfg_keywords/}" />
<link href="images/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="images/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="images/jquery.jslides.js"></script>
<style>
.ssdiv{
height:200px;
width:500px; position:relative;
}
.ssdiv div{ transition:all 0.5s;
position:absolute;
width:131px;
opacity:0.5;
border:solid 1px #ccc;
}
.ssd1{ margin-left:0px;}
.ssd2{ margin-left:10px;}
.ssd3{ margin-left:20px;}
.ssd4{ margin-left:30px;}
.ssdiv div.ssd5{ margin-left:40px; z-index:5;opacity:1;}
.ssd6{ margin-left:50px; z-index:4}
.ssd7{ margin-left:60px; z-index:3}
.ssd8{ margin-left:70px; z-index:2}
.ssd9{ margin-left:80px; z-index:1}
</style>
</head>
<body>
<div class="ss">
<div class="ssdiv">
<div class="ssd1"><img src="images/z1.jpg" width="131" height="61" /></div>
<div class="ssd2"><img src="images/z2.jpg" width="131" height="61" /></div>
<div class="ssd3"><img src="images/z3.jpg" width="131" height="61" /></div>
<div class="ssd4"><img src="images/z4.jpg" width="131" height="61" /></div>
<div class="ssd5"><img src="images/z5.jpg" width="131" height="61" /></div>
<div class="ssd6"><img src="images/z6.jpg" width="131" height="61" /></div>
<div class="ssd7"><img src="images/z7.jpg" width="131" height="61" /></div>
</div>
</div>
<input type="button" id="btz" value="zzzzzzzzzzzz" /><input type="button" id="bty" value="yyyyyyyyyyyyyyyyyyyy" />
<script>
$(function() {
var timer = '';
/* $('.ssdiv').mouseover(function() {
clearInterval(timer);
}).mouseleave(function() {
timer = setInterval(btn_right, 1000);
});*/
var arr = ['ssd1', 'ssd2', 'ssd3', 'ssd4', 'ssd5', 'ssd6', 'ssd7'];
var index = 0;
//timer = setInterval(btn_right,1000);
$("#btz").on("click",function(){
btn_left();
})
$("#bty").on("click",function(){
btn_right();
})
function btn_left(){if(index > 0){index--}else{index=6}
console.log(index)
gai();
}
function btn_right(){ if(index < 6){index++}else{index=0} console.log(index);
gai(); console.log("y");
}
function gai(){ var arr = ['ssd1', 'ssd2', 'ssd3', 'ssd4', 'ssd5', 'ssd6', 'ssd7'];
var newarr=arr.splice(0,index);
console.log( newarr);
arr = $.merge(arr, newarr);
$('.ssdiv div').each(function(i, e) {
$(e).removeClass().addClass(arr[i]);
})
}
})
</script>
<!-- /footer -->
</body>
</html>
