如何在JS滚动图片中加上左右箭头

如何在JS滚动图片中加上左右箭头,第1张

前后分别设置一个伪元素

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11252009.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存