JS图片轮换效果

2023-04-12 04:15:03JavaScript026

JS图片轮换效果,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/* 这里是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>

//获得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>

//大图

<ul>

</ul>

</div>

//小图

</ul>

</div>

</body>

</html>

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

注释都已添加

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* { 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:rightmargin:0 10pxpadding-top:12px}

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

#abb { width:200pxheight:200px}

#abb li { display:inlinemargin:40px 20px}

#abb li img { width:200pxheight:50pxborder:0}

</style>

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

/*位移算法，参数分别是:ID名，水平位移，垂直位移，和延迟时间（就是漂移时间）；每次移动的距离加上一张图片的width或者height就行。*/

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，方便后面添加*/

function classNormal(){

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

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

focusBtnList[i].className=''

}

/*修改下面的图片顺序*/

function changeAbb(i,j,k){

var abblist = $('abb').getElementsByTagName('img')

abblist[i].src='images/t1.gif'

abblist[j].src='images/t2.gif'

abblist[k].src='images/t3.gif'

}

/*给触发按钮添加事件*/

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'

changeAbb(0,1,2)

}

focusBtnList[1].onmouseover = function() {

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

classNormal()

focusBtnList[1].className='current'

changeAbb(1,0,2)

}

focusBtnList[2].onmouseover = function() {

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

classNormal()

focusBtnList[2].className='current'

changeAbb(1,2,0)

}

window.onload=function(){

focusChange()

}

</script>

</head>

<body>

<ul>

</ul>

</div>

</ul>

</div>

<div>

</ul>

</div>

</body>

</html>

/*楼主的图片我看不清楚，我用百度中心的图替代一下。CSS改成自己需要的，我中间加了个遮蔽层，楼主觉得不好看可以删掉*/

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：css 怎么叫表格的第一显示有垂直线，而第二行就没有垂直线了，就有航横线?

# 下一篇：华为平板如何分屏

推荐阅读

热门文章

最新发布

标签列表

JS图片轮换效果

给您推荐相同类型的内容：