JS图片轮换效果

JavaScript07

JS图片轮换效果,第1张

<!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>

<style type="text/css">

/* 这里是CSS，修改成自己满意的CSS楼主自己修改 */

* { margin:0padding:0word-break:break-all}

ul, li { list-style:none}

#focus_change_btn .current { background:url() no-repeat 37px 8px}

#focus_change_btn .current img { border-color:#EEE}

#focus_change_btn li { display:inlinefloat:leftmargin:0 28pxpadding-top:12px}

#focus_change_btn li img { width:20pxheight:20pxborder:2px solid #888}

</style>

<script type="text/javascript">

//获得element

function $(id) { return document.getElementById(id)}

//移动的算法，说下参数吧：

//elementID为需要移动element的ID；

//final_x为左右平移的值，这里没设，如果楼主想左右平移而不是上下平移的话这里设

//final_y为上下平移的值，同上

//interval为延迟时间，就是移动的速度

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false

if (!document.getElementById(elementID)) return false

var elem = document.getElementById(elementID)

if (elem.movement) {

clearTimeout(elem.movement)

}

if (!elem.style.left) {

elem.style.left = "0px"

}

if (!elem.style.top) {

elem.style.top = "0px"

}

var xpos = parseInt(elem.style.left)

var ypos = parseInt(elem.style.top)

if (xpos == final_x &&ypos == final_y) {

return true

}

if (xpos <final_x) {

var dist = Math.ceil((final_x - xpos)/10)//ceil(x)对x进行上舍入

xpos = xpos + dist

}

if (xpos >final_x) {

var dist = Math.ceil((xpos - final_x)/10)

xpos = xpos - dist

}

if (ypos <final_y) {

var dist = Math.ceil((final_y - ypos)/10)

ypos = ypos + dist

}

if (ypos >final_y) {

var dist = Math.ceil((ypos - final_y)/10)

ypos = ypos - dist

}

elem.style.left = xpos + "px"

elem.style.top = ypos + "px"

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"

elem.movement = setTimeout(repeat,interval)

}

//这里修改按钮图片的CSS，这里只简单的设置了border

function classNormal(){

var focusBtnList = $('focus_change_btn').getElementsByTagName('li')

for(var i=0i<focusBtnList.lengthi++) {

focusBtnList[i].className=''

}

}

//这里开始赋值，鼠标移到到哪个图片移动多少位移，参数为每张图片的倍数。

function focusChange() {

var focusBtnList = $('focus_change_btn').getElementsByTagName('li')

focusBtnList[0].onmouseover = function() {

moveElement('focus_change_list',0,0,5)

classNormal()

focusBtnList[0].className='current'

}

focusBtnList[1].onmouseover = function() {

moveElement('focus_change_list',0,-245,5)

classNormal()

focusBtnList[1].className='current'

}

focusBtnList[2].onmouseover = function() {

moveElement('focus_change_list',0,-490,5)

classNormal()

focusBtnList[2].className='current'

}

focusBtnList[3].onmouseover = function() {

moveElement('focus_change_list',0,-735,5)

classNormal()

focusBtnList[3].className='current'

}

}

window.onload=function(){

focusChange()

}

</script>

</head>

<body>

<div style="width:410pxheight:245pxposition:relativemargin:0padding:0border:1px solid blue">

<div id="focus_change" style="position:relativewidth:250pxheight:245pxoverflow:hiddenmargin:0px 0px 0px 80px">

<div id="focus_change_list" style="top:0left:0position:absolutewidth:250pxheight:1500px">

//大图

<ul>

<li style="float:left" ><img style="width:250pxheight:245pxborder:none" src="images/t1.gif"/> </li>

<li style="float:left"><img style="width:250pxheight:245pxborder:none" src="images/t2.gif"/> </li>

<li style="float:left"><img style="width:250pxheight:245pxborder:none" src="images/t3.gif"/></li>

<li style="float:left"><img style="width:250pxheight:245pxborder:none" src="images/t4.gif"/></li>

</ul>

</div>

</div>

<div style="position:absolutewidth:410pxheight:30pxtop:200pxleft:0background:#000filter:alpha(opacity=50)-moz-opacity:0.5opacity: 0.5"></div>

<div id="focus_change_btn" style="position:absolutewidth:410pxheight:60pxtop:190pxleft:0">

//小图

<ul style="padding-left:5px">

<li class="current"><a href="#"><img src="images/t1.gif" alt="" /></a></li>

<li><a href="#"><img src="images/t2.gif" alt="" /></a></li>

<li><a href="#"><img src="images/t3.gif" alt="" /></a></li>

<li><a href="#"><img src="images/t4.gif" alt="" /></a></li>

</ul>

</div>

</div>

</body>

</html>

---------分割线------

注释都已添加

图片建一个文件夹images里面4张图t1.gif

，t2.gif，t3.gif，t4.gif

个人建议，加个滤镜做按钮背景会比较好看点。

这个水平平移，比上下平移好看点。

其实很简单,方法也很多,不知道你想用什么方法实现.

先介绍两种比较简单的

注:图片大小之类的自己用CSS控制

页面加入<img id="imgId"/>标签

然后引入javascript:

核心:

//给定图片路径数组

var imgs = ['1.jpg','2.jpg',...]

function switchoverCore(){

var img = document.getElementById("imgId")

img.src = imgs.shift(0)

imgs.push(img.src)

//如果用下面的第一种方法,请删除下行注释,第二种不用下行代码

//setTimeout("switchoverCore()",1000)

}

第一种方法

运用setTimeout()

setTimeout("switchoverCore()",1000)//这里的1000是1秒轮换一次,单位为ms(毫秒)

第二种方法

运用setInterval()

setInterval("switchoverCore()",1000)//1000意义解释同上

自己整理下就可以了...