发源地·开源项目分享社区

 找回密码
 立即注册
查看: 1829|回复: 0
收起左侧

[其他综合] 超简单代码实现复合轮播

[复制链接]

活雷锋

329

主题

1359

帖子

2667万

积分

管理员

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

UID
1
性别
银票
8889541
铜板
8892050
钢镚
8897155
好友
2
记录
1
日志
0
相册
54
帖子
1359
主题
329
精华
116
分享
0
注册时间
2019-5-13
最后登录
2021-1-3
在线时间
376 小时
卖家信用
买家信用
听众
1
收听
1
居住地
江苏省 苏州市 太仓市 太仓经济开发区
职业
山贼
自我介绍
他们都是叛徒,但我从没恨过他们...
兴趣爱好
IT/互联网/硬件/软件
发表于 2020-8-21 23:52:51 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
作者:G.flower
记录时间:2020-08-21
==============
这是一个由简单JS+CSS+PHP组成的复合轮播,由四个部分组成:
背景动态云+前景左轮播+前景右轮播+定时器显隐提示文字
运用到的有:定时器、浮动层、滚动容器的结构。
其中右侧浮动轮播需要给body做onload播放标记:onload="imgMove()
效果演示:
点击查看演示效果
电脑端:
QQ浏览器截图20200821234035.png
手机端:
QQ浏览器截图20200821235320.png
css部分:
  1. <style type="text/css">
  2. .myui-header__top{ background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 100%);}
  3. </style>
  4. <style>
  5. @media screen and (min-width: 1024px) { /*当屏幕最小尺寸大于1024px时,应用下面的CSS样式*/
  6. .con-wrap {
  7.     display:none;
  8.     }
  9. .nopc{
  10.     display:none;     
  11. }
  12. .shanshuo1{
  13.     display:none;  
  14. }
  15. .shanshuo2{
  16.     display:none;
  17. }
  18. .rom-margin{
  19.     margin-top:300px;
  20. }
  21. /*轮播左图电脑端显示*/
  22. #right {
  23. background: rgb(105,025,125,0.1);
  24. border-radius:5px;
  25. overflow:hidden;
  26. border: 3px solid rgb(105,025,125,0.1);
  27. width: 68%;
  28. position:absolute;
  29. z-index:5;
  30. top:205px;
  31. left:1%;
  32. height:300px;
  33. }
  34. #right img {
  35. border-radius:5px;
  36. border: 3px solid #F2F2F2;
  37. height:295px;
  38. }
  39. .img2{
  40.     margin-right:3px;
  41. }
  42. #inright {
  43. float: left;
  44. width: 400%;
  45. }
  46. #right1 {
  47. float: left;
  48. }
  49. #right2 {
  50. float: left;
  51. }
  52. /*轮播背景云朵电脑端默认不显示*/
  53. .gunimg{
  54.     display:none;
  55. }
  56. /*右侧轮播-显示在电脑端右侧横版图片*/
  57. .lunbo_r{
  58.     position:absolute;
  59.     z-index:6;
  60.     top:205px;
  61.     left:70%;
  62.     height:300px;
  63.     width:29%;
  64.     border-radius: 5px;
  65. }      
  66. .lunbo_rimg{
  67.     border-radius: 5px;
  68.     border: solid 2px rgb(105,025,125,0.1);
  69.     height:300px;
  70.     width:100%;
  71. }
  72. }
  73. @media screen and (max-width: 1024px) { /*当屏幕最大尺寸小于1024px时,应用下面的CSS样式*/
  74. .noshouji{  /*手机不可见的,主要是右侧轮播横版图片内容*/
  75.     display: none;
  76. }
  77. a:link{ /*禁用手机端的文字链接点击效果*/
  78.     text-decoration:none;
  79.     }
  80. a:visited{ /*禁用手机端的文字链接点击效果*/
  81.     color:#fff;
  82.     text-decoration:none; /*禁用手机端的文字点击效果*/
  83.     }
  84. a:hover{ /*禁用手机端的文字链接点击效果*/
  85.     color:yellow;
  86.     text-decoration:none;
  87.     }
  88. a:active{ /*禁用手机端的文字链接点击效果*/
  89.     text-decoration:none;
  90. }
  91. .body {  /*禁用手机端的body内所有的文字效果*/
  92.     text-decoration:none;
  93. }
  94. /*轮播左图手机端显示*/
  95. #right {
  96. background: rgb(105,025,125,0.5);
  97. border-radius:5px;
  98. overflow:hidden;
  99. border: 3px solid rgb(105,025,125,0.1);
  100. width: 60%;
  101. position:absolute;
  102. z-index:5;
  103. top:68px;
  104. left:10px;
  105. height:190px;
  106. }
  107. #right img {
  108. border-radius:5px;
  109. border: 3px solid #F2F2F2;
  110. height:188px;
  111. }
  112. .img2{
  113.     margin-right:3px;
  114. }
  115. #inright {
  116. float: left;
  117. width: 1600%;
  118. }
  119. #right1 {
  120. float: left;
  121. }
  122. #right2 {
  123. float: left;
  124. }
  125. /*轮播背景云朵手机端*/
  126. .gunimg{
  127.     width:100%;
  128.     height:200px;
  129. }
  130. /*轮播背景提示仅显示在手机端*/
  131. .shanshuo{
  132.     display:none;
  133.     position:absolute;
  134.     z-index:6;
  135.     background-color: yellow;
  136.     padding:2px 4px 2px 4px ;
  137.     color:red;
  138.     border-radius:5px;   
  139.     width:;
  140. }
  141. /*轮播显示在手机端右侧*/
  142. .lunbo_r{
  143.     position:absolute;
  144.     z-index:6;
  145.     top:68px;
  146.     left:65%;
  147.     height:190px;
  148.     width:32%;
  149.     border-radius: 5px;
  150. }      
  151. .lunbo_rimg{
  152.     border-radius: 5px;
  153.     border: solid 2px rgb(105,025,125,0.1);
  154.     height:190px;
  155.     width:100%;
  156. }
  157. .shanshuo1{ /*显隐闪烁文字效果-左*/
  158.     top:230px;
  159.     left:30%;
  160. }
  161. .shanshuo2{/*显隐闪烁文字效果-右*/
  162.     top:230px;
  163.     left:73%;
  164. }
  165. </style>
复制代码
php内容:如果是html或者ASP,可以把<?php echo '';?>去掉即可
  1. <body onload="imgMove()">
复制代码
  1. <?php
  2. $i=0;  //预留的能和后台交互的响应开关,可以从网站后台给一个开关函数,0为关闭,1为开启

  3. //新的轮播
  4. //轮播背景层,纯纯的marquee标签实现
  5. echo '
  6. <div style="margin-left:-20px;background:#00ddff;" class="nopc">
  7. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="50" contenteditable="true"  width="100%" onmouseover="this.stop();"
  8. onmouseout="this.start();">
  9.   <img class="gunimg" src="/lunboimg/bg/11.png">  
  10.   <img class="gunimg" src="/lunboimg/bg/33.png">   
  11.   <img class="gunimg" src="/lunboimg/bg/22.png">
  12.   <img class="gunimg" src="/lunboimg/bg/44.png">
  13.   <img class="gunimg" src="/lunboimg/bg/11.png">   
  14. </marquee>   
  15. </div>
  16. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  17. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="10" contenteditable="true"  width="100%" onmouseover="this.stop();"
  18. onmouseout="this.start();">
  19.   <img class="gunimg" src="/lunboimg/bg/22.png">  
  20.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  21.   <img class="gunimg" src="/lunboimg/bg/11.png">
  22.   <img class="gunimg" src="/lunboimg/bg/33.png">
  23.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  24. </marquee>   
  25. </div>
  26. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  27. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="3" contenteditable="true"  width="100%" onmouseover="this.stop();"
  28. onmouseout="this.start();">
  29.   <img class="gunimg" src="/lunboimg/bg/11.png">  
  30.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  31.   <img class="gunimg" src="/lunboimg/bg/22.png">
  32.   <img class="gunimg" src="/lunboimg/bg/11.png">
  33.   <img class="gunimg" src="/lunboimg/bg/33.png">   
  34. </marquee>   
  35. </div>
  36. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  37. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="30" contenteditable="true"  width="100%" onmouseover="this.stop();"
  38. onmouseout="this.start();">
  39.   <img class="gunimg" src="/lunboimg/bg/44.png">  
  40.   <img class="gunimg" src="/lunboimg/bg/11.png">   
  41.   <img class="gunimg" src="/lunboimg/bg/33.png">
  42.   <img class="gunimg" src="/lunboimg/bg/22.png">
  43.   <img class="gunimg" src="/lunboimg/bg/33.png">   
  44. </marquee>
  45. </div>
  46. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  47. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="17" contenteditable="true"  width="100%" onmouseover="this.stop();"
  48. onmouseout="this.start();">
  49.   <img class="gunimg" src="/lunboimg/bg/22.png">  
  50.   <img class="gunimg" src="/lunboimg/bg/33.png">   
  51.   <img class="gunimg" src="/lunboimg/bg/11.png">
  52.   <img class="gunimg" src="/lunboimg/bg/33.png">
  53.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  54. </marquee>  
  55. </div>
  56. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  57. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="27" contenteditable="true"  width="100%" onmouseover="this.stop();"
  58. onmouseout="this.start();">
  59.   <img class="gunimg" src="/lunboimg/bg/11.png">  
  60.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  61.   <img class="gunimg" src="/lunboimg/bg/11.png">
  62.   <img class="gunimg" src="/lunboimg/bg/33.png">
  63.   <img class="gunimg" src="/lunboimg/bg/22.png">   
  64. </marquee>   
  65. </div>
  66. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  67. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="1" contenteditable="true"  width="100%" onmouseover="this.stop();"
  68. onmouseout="this.start();">
  69.   <img class="gunimg" src="/lunboimg/bg/33.png">  
  70.   <img class="gunimg" src="/lunboimg/bg/11.png">   
  71.   <img class="gunimg" src="/lunboimg/bg/44.png">
  72.   <img class="gunimg" src="/lunboimg/bg/33.png">
  73.   <img class="gunimg" src="/lunboimg/bg/22.png">   
  74. </marquee>   
  75. </div>
  76. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  77. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="14" contenteditable="true"  width="100%" onmouseover="this.stop();"
  78. onmouseout="this.start();">
  79.   <img class="gunimg" src="/lunboimg/bg/33.png">  
  80.   <img class="gunimg" src="/lunboimg/bg/22.png">   
  81.   <img class="gunimg" src="/lunboimg/bg/44.png">
  82.   <img class="gunimg" src="/lunboimg/bg/11.png">
  83.   <img class="gunimg" src="/lunboimg/bg/33.png">   
  84. </marquee>   
  85. </div>
  86.    
  87. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  88. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="9" contenteditable="true"  width="100%" onmouseover="this.stop();"
  89. onmouseout="this.start();">
  90.   <img class="gunimg" src="/lunboimg/bg/33.png">  
  91.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  92.   <img class="gunimg" src="/lunboimg/bg/22.png">
  93.   <img class="gunimg" src="/lunboimg/bg/11.png">
  94.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  95. </marquee>   
  96. </div>   
  97.    
  98. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  99. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="5" contenteditable="true"  width="100%" onmouseover="this.stop();"
  100. onmouseout="this.start();">
  101.   <img class="gunimg" src="/lunboimg/bg/44.png">  
  102.   <img class="gunimg" src="/lunboimg/bg/22.png">   
  103.   <img class="gunimg" src="/lunboimg/bg/33.png">
  104.   <img class="gunimg" src="/lunboimg/bg/44.png">
  105.   <img class="gunimg" src="/lunboimg/bg/11.png">   
  106. </marquee>   
  107. </div>
  108. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  109. <marquee class="gun" behavior="scroll" direction="left" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="45" contenteditable="true"  width="100%" onmouseover="this.stop();"
  110. onmouseout="this.start();">
  111.   <img class="gunimg" src="/lunboimg/bg/33.png">  
  112.   <img class="gunimg" src="/lunboimg/bg/11.png">   
  113.   <img class="gunimg" src="/lunboimg/bg/44.png">
  114.   <img class="gunimg" src="/lunboimg/bg/33.png">
  115.   <img class="gunimg" src="/lunboimg/bg/22.png">   
  116. </marquee>   
  117. </div>
  118. <div style="margin-left:-20px;margin-top:-200px;position: absolute;z-index:2;">
  119. <marquee class="gun" behavior="scroll" direction="right" hspace="0" vspace="0" loop="-1" left="-20" scrollamount="15" contenteditable="true"  width="100%" onmouseover="this.stop();"
  120. onmouseout="this.start();">
  121.   <img class="gunimg" src="/lunboimg/bg/22.png">  
  122.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  123.   <img class="gunimg" src="/lunboimg/bg/11.png">
  124.   <img class="gunimg" src="/lunboimg/bg/33.png">
  125.   <img class="gunimg" src="/lunboimg/bg/44.png">   
  126. </marquee>   
  127. </div>
  128. ';


  129. //轮播前景层-左,向右滚动效果,非常简洁的轮播图,可以单独提出来用,重新设置高宽即可
  130. echo '
  131. <div id="right">
  132. <div id="inright">
  133. <div id="right1">
  134. <a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a>
  135. <a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a>
  136. <a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a>
  137. <a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a>
  138. <a href="#"><img src="/lunboimg/lunbo/2.png" class="alpha" border="0" /></a>
  139. <a href="#"><img src="/lunboimg/lunbo/4.png" class="img2 alpha" border="0" /></a>
  140. </div>
  141. <div id="right2"></div>
  142. </div>
  143. </div>
  144. <script>
  145. var speed=30; //数字1为最快
  146. var tab=document.getElementById("right");
  147. var tab1=document.getElementById("right1");
  148. var tab2=document.getElementById("right2");
  149. tab2.innerHTML=tab1.innerHTML;
  150. function Marquee(){
  151. if(tab.scrollLeft<=0)
  152. tab.scrollLeft+=tab2.offsetWidth
  153. else{
  154. tab.scrollLeft--
  155. }
  156. }
  157. var MyMar=setInterval(Marquee,speed);
  158. tab.onmouseover=function() {clearInterval(MyMar)};
  159. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  160. </script>
  161. ';

复制代码
电脑端右侧轮播(昨天的有BUG,执行JS时电脑端和手机端产生了冲突,更新一下,区分图片ID,电脑端id=img,手机端id=picture
  1. //轮播前景层-右-PC端的图片-横版
  2. echo '
  3. <div class="lunbo_r noshouji">
  4. <a href="gengxin.php">
  5.            <img src="/lunboimg/pc/0.jpg" class="lunbo_rimg noshouji" id="img"/>
  6. </a>
  7. </div>
  8.     <script type="text/javascript">
  9.         //设置定时器
  10.         window.setInterval("changeImage()",2000);
  11.         var count =1;    //在调用函数的时候0.jpg已经显示,如果num=0,那么在执行下面函数时,0.jpg会再次显示2秒
  12.         //设置寻找图片的函数
  13.         function changeImage() {
  14.             var img = document.getElementById("img");//img对象就相当于img标签
  15.             if (count < 9) {
  16.                 img.src = "lunboimg/pc/" + count + ".jpg";
  17.                 count++;
  18.             }else {
  19.                 count= 0;
  20.                 changeImage();
  21.             }
  22.         }
  23.     </script>
  24. ';
  25. //轮播前景层-右-手机端的图片-竖版
  26. echo '
  27. <div class="lunbo_r" nopc>
  28. <a href="gengxin.php">
  29.             <img class="lunbo_rimg nopc" src="/lunboimg/sj/1.jpg" alt="" id="picture"/>
  30. </a>
  31. </div>
  32. <script  language="javascript" type="text/javascript">
  33.                 var arr=new Array();
  34.                 arr[0]="/lunboimg/sj/2.jpg";
  35.                 arr[1]="/lunboimg/sj/3.jpg";
  36.                 arr[2]="/lunboimg/sj/4.jpg";
  37.                 arr[3]="/lunboimg/sj/5.jpg";
  38.                 arr[4]="/lunboimg/sj/6.jpg";
  39.                 arr[5]="/lunboimg/sj/7.jpg";
  40.                 arr[6]="/lunboimg/sj/8.jpg";
  41.                 arr[7]="/lunboimg/sj/9.jpg";                 
  42.             var i=0;
  43.             //轮播移动的函数
  44.             function imgMove() {
  45.                 var imgs=document.getElementById("picture");
  46.                 imgs.src=arr[i];
  47.                 i++;
  48.                 if (i==4) {
  49.                     i=0;
  50.                 }
  51.                 setTimeout("imgMove()",3000);
  52.             }
  53. </script>
  54. ';
复制代码


单独区分设备手机端执行的JS:
  1. <!--闪烁文字提示,当设备为电脑时不出现闪烁文字-->
  2. <script language='javascript' type='text/javascript'>
  3. function IsPC() {
  4.         var userAgentInfo = navigator.userAgent;
  5.         var Agents = ["Android", "iPhone",
  6.                     "SymbianOS", "Windows Phone",
  7.                     "iPad", "iPod"];
  8.         var flag = true;
  9.         for (var v = 0; v < Agents.length; v++) {
  10.             if (userAgentInfo.indexOf(Agents[v]) > 0) {
  11.                 flag = false;
  12.                 break;
  13.             }
  14.         }
  15.         return flag;
  16.     };
  17.     $(document).ready(function(){
  18.         var isPC=IsPC();
  19.         if(isPC){
  20.            //这里执行的是PC端的代码;
  21.       }
  22.         else{
  23.            //这里执行的是移动端的代码;
  24. var shortIntervalTime = 2 * 1000;
  25. var longIntervalTime = 2 * 1000;
  26. function cycle(id) {
  27.     var nextId = (id == "shanshuo1") ? "shanshuo2":"shanshuo1";
  28.     $("#" + id)
  29.         .delay(shortIntervalTime)
  30.         .fadeIn(500)
  31.         .delay(longIntervalTime)
  32.         .fadeOut(500, function() {cycle(nextId)});
  33. }
  34. cycle("shanshuo1");      
  35.         }
  36.     });
  37. </script>
复制代码




哎...今天够累的,签到来了4...
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|kedoutd.cn|wdc.store|fll.store|zuz.store|newbe.wang|pvp.store ( 苏ICP备14054272号 )

GMT+8, 2021-3-5 17:29

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表