国外网赚学习

项目EMU教程

关注的频道
QQ:1565238120

多张图片从左向右的滚动效果,html 带左右按钮 js

多张图片从左向右的滚动效果,html 带左右按钮 js,//鼠标移走恢复滚动,需要判断原先的移动方向。

首页 > 建站 > 程序/文档 > 多张图片从左向右的滚动效果,html 带左右按钮 js 第 26 次浏览

多张图片从左向右的滚动效果,html 带左右按钮 js

  • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>图片滚动</title>
    <style type=”text/css”>
  • *{
    margin:0;
    padding:0;
    }
    #content {
    height: 125px;
    width: 340px;
    border: 1px solid #0000CC;
    position:absolute;
    top:50px;
    left:50px;
    }
    #the_left {
    background-color: #eeeeee;
    float: left;
    height: 125px;
    width: 20px;
    background-image: url(images/left.jpg);
    background-repeat: no-repeat;
    background-position: center;
    }
    #demo {
    background-color: #e1e1e1;
    float: left;
    height: 125px;
    width: 300px;
    overflow:hidden;
    }
    #the_right {
    background-color: #eeeeee;
    float: left;
    height: 125px;
    width: 20px;
    background-image: url(images/right.jpg);
    background-repeat: no-repeat;
    background-position: center;
    }
    #demo1 {
    float: left;
    height: 125px;
    }
    #indemo {
    float: left;
    height: 125px;
    width: 1000px;
    }
    #demo2 {
    float: left;
    height: 125px;
    }
    a img{
    filter:alpha(opacity=60);
    border:0;
    }
    a:hover img{
    filter:alpha(opacity=100);
    }
  • </style>
    </head>
    <body>
  • <div id=”content”>
    <div id=”the_left”></div>
    <div id=”demo”>
    <div id=”indemo”>
    <div id=”demo1″>
    <a href=”#”><img src=”yuchai.gif”/></a>
    <a href=”#”><img src=”yuchai.gif”/></a>
    <a href=”#”><img src=”yuchai.gif”/></a>
    <a href=”#”><img src=”yuchai.gif”/></a>
    </div>
    <div id=”demo2″></div>
    </div>
    </div>
    <div id=”the_right”></div>
    </div>
    <script>
    var flag;
    var MyMar_left;
    var MyMar_right;
    var speed=5;
    var demo=document.getElementById(“demo”);
    var demo1=document.getElementById(“demo1”);
    var demo2=document.getElementById(“demo2”);
    var button_left=document.getElementById(“the_left”);
    var button_right=document.getElementById(“the_right”);
    //将demo1的内容赋值给demo2,实现无缝隙滚动
    demo2.innerHTML=demo1.innerHTML;
    //向左滚动方法
    function Marquee_left(){
    flag=0;
    if(demo2.offsetWidth-demo.scrollLeft<=0){
    demo.scrollLeft-=demo1.offsetWidth;
    }else{
    demo.scrollLeft++;
    }
    }
    //向右滚动方法
    function Marquee_right(){
    flag=1;
    if(demo.scrollLeft<=0)
    demo.scrollLeft+=demo2.offsetWidth;
    else{
    demo.scrollLeft–;
    }
    }
    //左边按钮
    button_left.onmouseover=function(){
    clearInterval(MyMar_left);
    clearInterval(MyMar_right);
    MyMar_left=setInterval(“Marquee_left()”,speed);
    };
    //右边按钮
    button_right.onmouseover=function(){
    clearInterval(MyMar_left);
    clearInterval(MyMar_right);
    MyMar_right=setInterval(“Marquee_right()”,speed);
    };
    //鼠标放在图片上体制滚动
    demo.onmouseover=function(){
    clearInterval(MyMar_left);
    clearInterval(MyMar_right);
    };
    //鼠标移走恢复滚动,需要判断原先的移动方向
    demo.onmouseout=function(){
    if(flag==0){
    clearInterval(MyMar_left);
    clearInterval(MyMar_right);
    MyMar_left=setInterval(“Marquee_left()”,speed);
    }if(flag==1){
    clearInterval(MyMar_left);
    clearInterval(MyMar_right);
    MyMar_right=setInterval(“Marquee_right()”,speed);
    }
    };
  • </script>
    </body>
    </html>
更新时间: 2022-09-08
本文地址:https://www.lzb6.com/website/program/135.html
置顶