2020-08-22

最新推荐文章于 2020-08-22 19:51:22 发布
最新推荐文章于 2020-08-22 19:51:22 发布
阅读量269 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanghuanll/article/details/108162728
版权

超简单PHP/HTML复合轮播图代码

作者：G.flower
记录时间：2020-08-21

这是一个简单的由JS+CSS+PHP组成的复合轮播，由四个部分组成:
背景动态云+前景左轮播+前景右轮播+定时器显隐提示文字
运用到的有：定时器、浮动层、滚动容器的结构。其中右侧浮动轮播需要给body做onload播放标记：οnlοad="imgMove()
文章来源:https://amoi.store/

手机端演示:
在这里插入图片描述
模拟手机端:
在这里插入图片描述
电脑端演示:
在这里插入图片描述
css部分：

  1. List item
.myui-header__top{ background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%);}
</style>
<style>
@media screen and (min-width: 1024px) { /*当屏幕最小尺寸大于1024px时，应用下面的CSS样式*/
.con-wrap {
    display:none; 
    }
.nopc{
    display:none;     
} 
.shanshuo1{
    display:none;  
}
.shanshuo2{
    display:none; 
}
.rom-margin{
    margin-top:300px;
}
/*轮播左图电脑端显示*/
#right { 
background: rgb(105,025,125,0.1); 
border-radius:5px;
overflow:hidden; 
border: 3px solid rgb(105,025,125,0.1); 
width: 68%; 
position:absolute;
z-index:5;
top:205px;
left:1%;
height:300px;
} 
#right img { 
border-radius:5px;
border: 3px solid #F2F2F2; 
height:295px;
} 
.img2{
    margin-right:3px;
}
#inright { 
float: left; 
width: 400%; 
} 
#right1 { 
float: left; 
} 
#right2 { 
float: left; 
} 
/*轮播背景云朵电脑端默认不显示*/
.gunimg{
    display:none; 
}
/*右侧轮播-显示在电脑端右侧横版图片*/
.lunbo_r{
    position:absolute;
    z-index:6;
    top:205px;
    left:70%;
    height:300px;
    width:29%;
    border-radius: 5px;
}      
.lunbo_rimg{
border-radius: 5px;
border: solid 2px rgb(105,025,125,0.1);
height:300px;
width:100%;
}
}```

 2. List item
 
```@media screen and (max-width: 1024px) { /*当屏幕最大尺寸小于1024px时，应用下面的CSS样式*/
.noshouji{  /*手机不可见的，主要是右侧轮播横版图片内容*/
    display: none;
}
a:link{ /*禁用手机端的文字链接点击效果*/
    text-decoration:none;
    }
a:visited{ /*禁用手机端的文字链接点击效果*/
    color:#fff;
    text-decoration:none; /*禁用手机端的文字点击效果*/
    }
a:hover{ /*禁用手机端的文字链接点击效果*/
    color:yellow;
    text-decoration:none;
    }
a:active{ /*禁用手机端的文字链接点击效果*/
    text-decoration:none;
}```

 3. List item
 
```.body {  /*禁用手机端的body内所有的文字效果*/
    text-decoration:none;
}
/*轮播左图手机端显示*/
#right { 
background: rgb(105,025,125,0.5); 
border-radius:5px;
overflow:hidden; 
border: 3px solid rgb(105,025,125,0.1); 
width: 60%; 
position:absolute;
z-index:5;
top:68px;
left:10px;
height:190px;
} 
#right img { 
border-radius:5px;
border: 3px solid #F2F2F2; 
height:188px;
} 
.img2{
    margin-right:3px;
}
#inright { 
float: left; 
width: 1600%; 
} 
#right1 { 
float: left; 
} 
#right2 { 
float: left; 
} ```

 4. List item
 
```/*轮播背景云朵手机端*/
.gunimg{
    width:100%;
    height:200px; 
}
/*轮播背景提示仅显示在手机端*/
.shanshuo{
    display:none;
    position:absolute;
    z-index:6;
    background-color: yellow;
    padding:2px 4px 2px 4px ;
    color:red;
    border-radius:5px;   
    width:;
}
/*轮播显示在手机端右侧*/
.lunbo_r{
    position:absolute;
    z-index:6;
    top:68px;
    left:65%;
    height:190px;
    width:32%;
    border-radius: 5px;
}      
.lunbo_rimg{
    border-radius: 5px;
    border: solid 2px rgb(105,025,125,0.1);
    height:190px;
    width:100%;
}```

 5. List item
 
```.shanshuo1{ /*显隐闪烁文字效果-左*/
    top:230px;
    left:30%;
}
.shanshuo2{/*显隐闪烁文字效果-右*/
    top:230px;
    left:73%;
}
</style>```

 6. List item

php内容：
```如果是html或者ASP，可以把<?php echo '';?>去掉即可
<body οnlοad="imgMove()">
<?php 
$i=0;  //预留的能和后台交互的响应开关，可以从网站后台给一个开关函数，0为关闭，1为开启
//新的轮播
//轮播背景层，纯纯的marquee标签实现```

 7. List item

```echo '
<div style="margin-left:-20px;background:#00ddff;" class="nopc">
<marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="50" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/11.png">  
  <img class="gunimg" src="/lunboimg/bg/33.png">   
  <img class="gunimg" src="/lunboimg/bg/22.png"> 
  <img class="gunimg" src="/lunboimg/bg/44.png"> 
  <img class="gunimg" src="/lunboimg/bg/11.png">   
</marquee>   
</div>
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="10" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/22.png">  
  <img class="gunimg" src="/lunboimg/bg/44.png">   
  <img class="gunimg" src="/lunboimg/bg/11.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png"> 
  <img class="gunimg" src="/lunboimg/bg/44.png">   
</marquee>   
</div>
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="3" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/11.png">  
  <img class="gunimg" src="/lunboimg/bg/44.png">   
  <img class="gunimg" src="/lunboimg/bg/22.png"> 
  <img class="gunimg" src="/lunboimg/bg/11.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png">   
</marquee>   
</div>
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="30" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/44.png">  
  <img class="gunimg" src="/lunboimg/bg/11.png">   
  <img class="gunimg" src="/lunboimg/bg/33.png"> 
  <img class="gunimg" src="/lunboimg/bg/22.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png">   
</marquee> 
</div>
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="17" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/22.png">  
  <img class="gunimg" src="/lunboimg/bg/33.png">   
  <img class="gunimg" src="/lunboimg/bg/11.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png"> 
  <img class="gunimg" src="/lunboimg/bg/44.png">   
</marquee>  
</div>
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="27" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/11.png">  
  <img class="gunimg" src="/lunboimg/bg/44.png">   
  <img class="gunimg" src="/lunboimg/bg/11.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png"> 
  <img class="gunimg" src="/lunboimg/bg/22.png">   
</marquee>   
</div> 
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="1" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/33.png">  
  <img class="gunimg" src="/lunboimg/bg/11.png">   
  <img class="gunimg" src="/lunboimg/bg/44.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png"> 
  <img class="gunimg" src="/lunboimg/bg/22.png">   
</marquee>   
</div> 
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="14" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/33.png">  
  <img class="gunimg" src="/lunboimg/bg/22.png">   
  <img class="gunimg" src="/lunboimg/bg/44.png"> 
  <img class="gunimg" src="/lunboimg/bg/11.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png">   
</marquee>   
</div>
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="9" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/33.png">  
  <img class="gunimg" src="/lunboimg/bg/44.png">   
  <img class="gunimg" src="/lunboimg/bg/22.png"> 
  <img class="gunimg" src="/lunboimg/bg/11.png"> 
  <img class="gunimg" src="/lunboimg/bg/44.png">   
</marquee>   
</div>    
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="5" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/44.png">  
  <img class="gunimg" src="/lunboimg/bg/22.png">   
  <img class="gunimg" src="/lunboimg/bg/33.png"> 
  <img class="gunimg" src="/lunboimg/bg/44.png"> 
  <img class="gunimg" src="/lunboimg/bg/11.png">   
</marquee>   
</div>
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="45" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/33.png">  
  <img class="gunimg" src="/lunboimg/bg/11.png">   
  <img class="gunimg" src="/lunboimg/bg/44.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png"> 
  <img class="gunimg" src="/lunboimg/bg/22.png">   
</marquee>   
</div>
<div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
<marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="15" contenteditable="true"  width="100%" οnmοuseοver="this.stop();"
 οnmοuseοut="this.start();">
  <img class="gunimg" src="/lunboimg/bg/22.png">  
  <img class="gunimg" src="/lunboimg/bg/44.png">   
  <img class="gunimg" src="/lunboimg/bg/11.png"> 
  <img class="gunimg" src="/lunboimg/bg/33.png"> 
  <img class="gunimg" src="/lunboimg/bg/44.png">   
</marquee>   
</div>
';```

 1. List item
 
```//轮播前景层-左，向右滚动效果，非常简洁的轮播图，可以单独提出来用，重新设置高宽即可
echo '
<div id="right"> 
<div id="inright"> 
<div id="right1"> 
<a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a> 
<a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a> 
<a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a> 
<a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a> 
<a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a> 
<a href="#"><img src="/lunboimg/lunbo/4.png" class="img2 alpha" border="0" /></a> 
</div> 
<div id="right2"></div>
</div>
</div>
<script> 
var speed=30; //数字1为最快
var tab=document.getElementById("right"); 
var tab1=document.getElementById("right1"); 
var tab2=document.getElementById("right2"); 
tab2.innerHTML=tab1.innerHTML; 
function Marquee(){ 
if(tab.scrollLeft<=0) 
tab.scrollLeft+=tab2.offsetWidth 
else{ 
tab.scrollLeft-- 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.οnmοuseοver=function() {clearInterval(MyMar)}; 
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}; 
</script> 
';```

 2. List item
 
```//轮播前景层-右-手机端的图片-竖版
echo '
 <div class="lunbo_r nopc">
            <img class="lunbo_rimg" src="/lunboimg/lunbo/1.png" alt="" id="picture"/>
        </div>
<script type="text/javascript">
            var arr=new Array();
                arr[0]="/lunboimg/lunbo/shouji/2.png";
                arr[1]="/lunboimg/lunbo/shouji/3.png";
               ?> ```
 
 10. List item

//轮播前景层-右-电脑端的图片-横版
```echo '
 <div class="lunbo_r noshouji">
            <img class="lunbo_rimg" src="/lunboimg/lunbo/1.png" alt="" id="picture"/>
        </div>
<script type="text/javascript">
            var arr=new Array();
                arr[0]="/lunboimg/lunbo/pc/2.png";
                arr[1]="/lunboimg/lunbo/pc/3.png";```
                
 11. List item

<单独区分设备手机端执行的JS：-->

```<!--闪烁文字提示，当设备为电脑时不出现闪烁文字-->
<script language='javascript' type='text/javascript'>
function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    };
    $(document).ready(function(){
        var isPC=IsPC();
        if(isPC){
           //PC端不执行；
      }
        else{
           //移动执行；
var shortIntervalTime = 2 * 1000;
var longIntervalTime = 2 * 1000;
function cycle(id) {
    var nextId = (id == "shanshuo1") ? "shanshuo2":"shanshuo1";
    $("#" + id)//ID循环
        .delay(shortIntervalTime)
        .fadeIn(500)//淡入时长
        .delay(longIntervalTime)
        .fadeOut(500, function() {cycle(nextId)});//淡出时长
}
cycle("shanshuo1");       
        }
    });
</script>```
Damn! It's all notes
关注
专栏目录
2020-05-08
weixin_41208789的博客
05-08 824
见字如面: 因为学习及进取需要，准备从RNA-seq和ChIP-seq分析开启生信之路。在查阅资料的过程中，从简书，CSDN，及知乎上学到了很多，特注册账号，已备日后留文。生信之路，必将艰难重重，bug不断。定将不断摸索，掌握技能，期以日后自己能分享一些有价值的东西予人，不甚乐哉！特留一段文字，给予自己动力！ lierkui 2020-05-07晚于北京 ...
2020-06-03
zh1775825464的博客
06-03 1008
坚持是一件不容易的事，未来不一定美好，但当下希望要珍惜。昨天看见的一句话。 stay hungry，stay foolish。 这是谁说的呢？
2020-06-08
qq_44880289的博客
06-08 3248
stm32属性上找不到编写好的hex 因为还没有编译！
2020-05-09
wanghuanll的博客
05-09 1322
Dⅹ3.4
2020-06-07
lyyzxl的博客
06-07 2801
arcgis engine 实现栅格计算器，包括数学运算、逻辑运算、三角函数运算和代数运算。有大佬能帮一下吗？arcgis用10.2版本，环境用vs2015，代码加注释。求大佬。
2020-03-14
东哥的博客
03-14 1099
<% } %> 这个怎么改成随机
2020-07-07
北漂猿
07-07 839
2020-05-07
weixin_47552725的博客
05-07 851
第一次整合SSM框架遇到的坑 根据报错来配对下面的坑(看不懂英语的可以用百度翻译，我反正是没看懂) 查看连接池的不同，不同的连接池有不同的属性名，有不同的配置方法 如果用了mybatis的逆向工程，*Mapper.xml文件的空间名一定要改，还有各种包名(容易忘，拿过来就不管了) 各个配置中的属性名的大小写一定要区分开， 配置文件最上面的地址最好不要写版本好，它会自动匹配 web.xml配置文件...
2020-05-13
lushangdem的博客
05-13 753
日常 笔记本无法启动，显示注册表问题。复制pe系统注册表system到本地计算机后正常启动
2020-05-10
zcz19920114的博客
05-10 1259
本人camera hal小白，无从下手有没有camera hal 的大佬可以指点一下或者提供一点资料，在此谢了
Draft 2020-08-22 10:05:16-数据集
03-25
本数据集的标题为“Draft 2020-08-22 10:05:16-数据集”，这表明这是一个在2020年8月22日10:05:16时创建或更新的数据集草稿，可能用于实验、原型设计或初步分析。数据集通常是结构化的信息集合，通常包含多行记录和...
LP156WF1-TLF3 #1 2020-03-14 02-10 2.2 VF-S XYZLUT+MTX.icm
06-05
适用于LGD0259(LG Philips LP156WF1-TLF3)笔记本屏幕的icm颜色文件。使用Spyder2 Express校色仪校准，可用DisplayCAL加载。
matlab中的fit函数实现源码-2020-03-Whh-thesis:2020-03-Whh-thesis
05-19
2020-05-22 Fri 08:30 修改参考文献 2020-05-20 Wed 6:40 思维框架图和甘特图 2020-05-19 Tue 19:36 尝试修改matlab的DCC-MIDAS代码，目前可基本实现，不过还有很多部分需完全明白，才能 改动 2020-05-04 Mon 14:36 ...
2020-08-22-环境配置
weixin_38522541的博客
08-22 402
在anaconda中创建虚拟环境 conda create --name tf_gpu_env2 python=3.6 查看所有的虚拟环境 conda info --envs 连接环境 source activate tf_gpu_env2 关闭环境 source deactivate 查看tensorflow各个版本：（查看会发现有一大堆TensorFlow源，但是不能随便选，选择可以用查找命令定位） anaconda search -t conda tensorflow-gpu 查看tensorflow
2020-04-13
wanghuanll的博客
04-13 574
#Discuz x3.4手机版后台二次开发示例 ##简单粗暴直接加样式 ###以下面几页为例: pc登录界面效果预览图： 手机端登录首页： 手机端登录首页： 电脑/手机端自适应后台管理页面菜单： 系统信息页面： 社区信息页面： 全局设置-访问控制页面： 实例页面： PHP登录页面+HTML宫格主菜单+PHP常用设置首页+PHP全局设置首页 修改文件：admincp_login.php ...
2020-05-23
wanghuanll的博客
05-23 466
Dzⅹ3.4万能上传插件，多端兼容，多浏览器实测
2020-05-25
wanghuanll的博客
05-25 435
DZⅹ3.4万能头像上传插件 #作者:青花 #转载请注源 使用方法： touch版：请将这两个文件上传到：/template/第三方手机模板/touch/home文件夹下，完美兼容所有手机版，细微显示差异自行调整 默认手机版：请将这两个文件上传到：/template/default/mobile/home，完美呈现。 代码： spacecp_avatar.htm单页代码 这个页面是原创手写，调用DZx3.4电脑端的H5上传组件，移动适配方案，如果显示错位、不正常，自行将里面的CSS样式调整一下，测试过几款模
2020-05-30
wanghuanll的博客
05-30 385
D
2020-05-11
wanghuanll的博客
05-11 348
Dz插件开发给按钮加弹窗并自定义 作者：汪才茂 DZ插件开发如何给按钮添加确认弹窗，调用论坛的弹窗提示，并且实现可弹窗内容自定义，甚至可以给弹窗做样式自定义，如果需要自定义弹窗的样式，我们需要使用JS来对弹窗做样式处理，这里就不细说。实现代码如下：添加弹窗之前：[code]加精[/code][code]降权[/code][code]更新[/code][code]删除[/code]添加弹窗之后：[code]加精[/code][code]<a href=“javascript:;” s
根据时间段【2020-11-20 09:09:09,2021-10-09 10:10:10】先转换为【2020-11-20 00:00:00,2021-10-09 59:59:59】 再根据转换时间把里面的每一天的开始时间和结束时间获取出来 java
最新发布
05-24
Day 2020-11-22 starts at 2020-11-22T00:00 and ends at 2020-11-22T23:59:59.999999999 ... Day 2021-10-07 starts at 2021-10-07T00:00 and ends at 2021-10-07T23:59:59.999999999 Day 2021-10-08 starts at ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值