视图的改变都应该是因为数据的改变而引起的,而不是直接通过一些api去更改视图,像你这种对应的数据应该类似
[{
name: '开始',
value: 1
},
{
name: '结束',
value: 2
}
]
交换就是交换这个数据,然后根据新的数据去渲染你上面的视图,这样就不用担心数据和视图不同步了。
用document.getElementById(div1)获取到该div,然后操作它就行了,如果是文本上下移动完全可以使用marquee标签。引用JS:
www.cyin.cn/js/front/supermarquee.js
HTML代码:
<div class="zuixinxuqiu" style="height: 197pxwidth: 678pxoverflow: hiddenposition: relative">
<ul>
<dl class="clearfix">
<dt class="coladdress">
成都市</dt>
</dl>
<dl class="clearfix">
<dt class="coladdress">
成都市</dt>
</dl>
<dl class="clearfix">
<dt class="coladdress">
成都市</dt>
</dl>
<dl class="clearfix">
<dt class="coladdress">
成都市</dt>
</dl>
<dl class="clearfix">
<dt class="coladdress">
成都市</dt>
</dl>
</ul>
</div>
执行JS:
$(".zuixinxuqiu").kxbdSuperMarquee({
isEqual: false,
distance: 33,
time: 5,
direction: 'up'
})
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title>js</title>
<style>
</style>
<script>
window.onload=function(){
var sp=document.getElementsByTagName('span')
var last=document.getElementById('last')
var next=document.getElementById('next')
var n=0
for(var i=1i<sp.lengthi++){
sp[i].style.display='none'
}
last.onclick=function(){
n--
if(n<0){
n=0
}
for(var i=0i<sp.lengthi++){
sp[i].style.display='none'
}
sp[n].style.display='block'
}
next.onclick=function(){
n++
if(n>sp.length-1){
n=sp.length-1
}
for(var i=0i<sp.lengthi++){
sp[i].style.display='none'
}
sp[n].style.display='block'
}
}
</script>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<br>
<a id="last">上一页</a><a id="next">下一页</a>
</body>
</html>