前后分别设置一个伪元素
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width:400px
height:250px
border: 1px solid #ff1943
}
div {
width: 400px
height:250px
position: relative
}
div:hover:before{
content:"<"
display:block
width:30px
height:60px
background:rgba(0,0,0,.3)
position:absolute
top:40%
left:0px
text-align:center
line-height:60px
font-size:30px
color:#fff
}
div:hover:after{
content:">"
display:block
width:30px
height:60px
background:rgba(0,0,0,.3)
position:absolute
top:40%
right:-1px
text-align:center
line-height:60px
font-size:30px
color:#fff
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
<script>
window.onload = function() {
var mying = new Array("1.jpg","2.jpg","3.jpg")
var i = 0
var tupian = document.getElementsByTagName("img")[0]
setInterval(changeimg,2000)
function changeimg() {
tupian.setAttribute("src",mying[i++])
if(i == mying.length) {
i=0
}
}
}
</script>
</body>
</html>
这是我按你的代码上修改的，你可以看下。图片用的是我自己的，所以图片路径不一样，注意。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 600pxmin-height: 500pxborder: 1px solid #808080margin: 0 auto">
<!--上面的显示板-->
<div id="display" style="width: 90%min-height: 50pxborder: 1px solid #808080float: left">
<ul id="displayul"></ul>
</div>
<!--左边的备选-->
<div id="left" style="width: 40%min-height: 300px border: 1px solid #808080float: left">
<select id="leftselect" multiple style="height: 200pxwidth: 100%">
<option>11</option>
<option>22</option>
<option>13</option>
<option>12</option>
<option>111</option>
<option>12312</option>
<option>1333</option>
<option>1123</option>
</select>
</div>
<!--中间的按钮-->
<div id="btn" style="width: 10%min-height: 300px border: 1px solid #808080float: left">
<input type="button" onclick="add()" value="add" >
</div>
<!--右边的已选-->
<div id="right" style="width: 40%min-height: 300px border: 1px solid #808080float: left">
<select id="rightselect" multiple style="height: 200pxwidth: 100%">
</select>
</div>
<!--js部分-->
<script>
function add(){
var selectedOption=document.getElementById("leftselect").selectedIndex
if(selectedOption>=0){
var selectedText=document.getElementById('leftselect').options[selectedOption].text
document.getElementById('rightselect').appendChild(document.getElementById('leftselect').options[selectedOption])
var li = document.createElement('li')
li.innerHTML=selectedText
document.getElementById('displayul').appendChild(li)
}else{
alert('please choose your option!')
}
}
</script>
</div>
</body>
</html>
此类插件的最小结构，题主可在代码中扩充功能。
以上
左右滚动 和 上下滚动的函数重名了 Marquee()随便给哪个改个别的名字，然后调用的地方也写成你新改的名字就可以了
如：
var oMarquee = document.getElementById("divLast")
var iScrollAmount = 1
var iLineHeight = 21
var MaxScroll = oMarquee.scrollTop
function Marquee_lr() {
var obj = oMarquee
MaxScroll = obj.scrollTop
obj.scrollTop += iScrollAmount
if (obj.scrollTop == MaxScroll &&iScrollAmount != 0)
{
obj.scrollTop = 0
}
if (obj.scrollTop % iLineHeight == 0 ) {
window.setTimeout( "Marquee_lr()", 2000 )
} else {
window.setTimeout( "Marquee_lr()", 50 )
}
}
for(var n = 0n <3n++)
{
oMarquee.innerHTML += oMarquee.innerHTML
}
window.setTimeout( "Marquee_lr()", 2000 )
左右滚动的JS
var speed=5//数字越大速度越慢
var tab=document.getElementById("demoa")
var tab1=document.getElementById("demo1a")
var tab2=document.getElementById("demo2a")
tab2.innerHTML=tab1.innerHTML
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function() {clearInterval(MyMar)}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）