//图片滚动展示 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>

*{ 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>