//图片滚动展示 Start
var counts = 4
//大图//
img1 = new Image()
img1.src = 'images/1.jpg'
img2 = new Image()
img2.src = 'images/2.jpg'
img3 = new Image()
img3.src = 'images/3.jpg'
img4 = new Image()
img4.src = 'images/4.jpg'
var smallImg = new Array()
//小图
smallImg[0] = 'images/index_adb1.gif'
smallImg[1] = 'images/index_adb2.gif'
smallImg[2] = 'images/index_adb3.gif'
smallImg[3] = 'images/index_adb4.gif'
//链接地址
url1 = new Image()
url1.src = ' http://www.baidu.com'
url2 = new Image()
url2.src = ' http://www.qzxtg.com'
url3 = new Image()
url3.src = ' http://www.soso.com'
url4=new Image()
url4.src=' http://www.sina.com.cn'
//alt值
alt1 = new Image()
alt1.alt = ''
alt2 = new Image()
alt2.alt = ''
alt3 = new Image()
alt3.alt = ' '
alt4 = new Image()
alt4.alt=''
////欢迎来到标准之路.
var nn = 1
var key = 0
function change_img() {
if (key == 0) {
key = 1
} else if (document.all) {
document.getElementById("pic").filters[0].Apply()
document.getElementById("pic").filters[0].Play(duration = 2)
}
eval('document.getElementById("pic").src=img' + nn + '.src')
eval('document.getElementById("url").href=url' + nn + '.src')
eval('document.getElementById("pic").alt=alt' + nn + '.alt')
if (nn == 1) {
document.getElementById("url").target = "_blank"
document.getElementById("url").style.cursor = "pointer"
} else {
document.getElementById("url").target = "_blank"
document.getElementById("url").style.cursor = "pointer"
}
for ( var i = 1i <= countsi++) {
document.getElementById("xxjdjj" + i).className = 'axx'
}
document.getElementById("xxjdjj" + nn).className = 'bxx'
nn++
if (nn >counts) {
nn = 1
}
tt = setTimeout('change_img()', 7000)
}
function changeimg(n) {
nn = n
window.clearInterval(tt)
change_img()
}
function imageshow() {
document.write('<div class="picshow_main">')
document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>')
document.write('<div class="picshow_change">')
for ( var i = 0i <countsi++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ')" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>')
}
document.write('</div></div>')
change_img()
}
//图片滚动展示 End
</script>
<script language="javascript" type="text/javascript">
imageshow()
</script>
<style>*{ margin:0padding:0list-style:none}
#box{ width:534pxheight:300pxposition:relativemargin:50px autooverflow:hidden}
#box ul{ position:absoluteleft:0top:0}
#box ul li{ float:leftwidth:534pxheight:300px}
#box ul li img{ height:300px}
#box a{ transition:.2s all ease}
#box .prev,#box .next{position:absolute top:50%z-index:2height:80pxline-height:80pxbackground:rgba(0,0,0,0.6)color:#fffwidth:80pxtext-align:centermargin-top:-40pxdisplay:-none}
#box .prev{ left:0}
#box .next{ right:0}
#box a:hover{ background:rgba(255,0,0,0.4)}
#box ol{ position:absolutewidth:120pxleft:50%margin-left:-60pxbottom:10px}
#box ol li{ width:20pxheight:20pxbackground:#f60float:leftmargin:2pxtext-align:centertext-indent:-9999pxborder-radius:50%}
#box ol li.active{ background:#fff}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box')
var oPrev=document.getElementById('prev')
var oNext=document.getElementById('next')
var oUl=oBox.getElementsByTagName('ul')[0]
var aLi=oUl.children
var oOl=oBox.getElementsByTagName('ol')[0]
var aBtn=oOl.children
var timer = null
var iNow=0
var left=0
//复制一份内容
oUl.innerHTML+=oUl.innerHTML
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'
var W=oUl.offsetWidth/2
//选项卡
for(var i=0i<aBtn.lengthi++){
(function(index){
aBtn[i].onclick=function(){
if(iNow%aBtn.length==aBtn.length-1 &&index==0){
iNow++
}
if(iNow%aBtn.length==0 &&index==aBtn.length-1){
iNow--
}
iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index
tab()
}
})(i)
}
function tab(){
for(var i=0i<aBtn.lengthi++){
aBtn[i].className=''
}
if(iNow<0){
aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active'
}else{
aBtn[iNow%aBtn.length].className='active'
}
//oUl.style.left=-iNow*aLi[i].offsetWidth+'px'
move(oUl,-iNow*aLi[i].offsetWidth)
}
//next
oNext.onclick=function(){
iNow++
tab()
//document.title=iNow
}
oPrev.onclick=function(){
iNow--
tab()
//document.title=iNow
}
oNext.onmouseleave = oPrev.onmouseleave = function(){
timer = setInterval(function(){
tab()
iNow++
},2000)
}
oNext.onmouseenter = oPrev.onmouseenter = function(){
clearInterval(timer)
}
oNext.onclick()
clearInterval(timer)
timer = setInterval(oNext.onclick,2000)
function move(obj,iTarget){
var count=Math.round(500/30)
var start=left
var dis=iTarget-start
var n=0
clearInterval(obj.timer)
obj.timer=setInterval(function(){
n++
var a=1-n/count
left=start+dis*(1-Math.pow(a,3))
if(left<0){
obj.style.left=left%W+'px'
}else{
obj.style.left=(left%W-W)%W+'px'
}
if(n==count){
clearInterval(obj.timer)
}
},30)
}
}
</script>
</head>
<body>
<div id="box">
<a href="javascript:" class="prev" id="prev">prev</a>
<a href="javascript:" class="next" id="next">next</a>
<ul>
<li><img src="img/0.jpg"></li>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
<ol>
<li class="active">0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
