js实现左右切换轮播图思路

2023-02-19 00:08:01JavaScript013

js实现左右切换轮播图思路,第1张

我们在 CSS 阶段就已经接触到轮播图。通过轮播图我们可以达到一些好玩的特效，但使用 CSS 做出来的轮播图只有左右切换，渐变切换和简单的点击切换。局限性较大，观看效果也不佳。但当我们接触 js 之后，你就发现使用js来实现轮播图后，在看CSS实现轮播的效果就是...。我想说啥你知道的。废话不多说，咱们一起看看如何使用js来实现轮播效果。

（本文以阴阳师中“平安世界”模块的轮播图为例）

这个轮播图，我们通过两大模块构成；左右点击模块和姓名点击模块。然后在两者相关联来达到最终的效果。

在使用js实现轮播图的效果前，先使用HTML和CSS完善这一模块的布局。

本轮播图使用8张图片。每次出现两张。我们在使用HTML和CSS布局时可以先把第一组的两张图片放好位置。其他的放在两边隐藏起来。需要使用的时候在出现移动到中间。

左右点击切换模块：

我们通过对左右按钮进行点击监听。在点击后做出反应。左右点击的思路一样。我们先说一下右边按钮点击事件。

当我们点击右边按钮后，我们通过对点击次数进行累计。此处我使用初始化常量然后累加最后通过判断来达到循环效果

对每一张图片进行编码，以此来达到循环切换图片的效果。在切换图片时，我们可以使用排他思想。当点击按钮切换下一张图片的时候，我们可以先遍历所有的图片，把所有的图片移动到两边，然后将要移动的图片移动到中央来达到切换效果

在移动的过程中的动画和定时器设置的延迟可以自己添加一下。

左边按钮的原理和右边一样反操作即可。注意常量要使用一个。否则两个按钮都只能单方向运动，可能还会出现其他问题。

本次现讲一下左右切换的思路。

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

# 上一篇：怎么更改电脑存储位置

# 下一篇：Java图片显示不出来，怎么解决

推荐阅读

热门文章

最新发布

标签列表

js实现左右切换轮播图思路

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