|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
作者：G.flower
记录时间：2020-08-21
==============
这是一个由简单JS+CSS+PHP组成的复合轮播，由四个部分组成：
背景动态云+前景左轮播+前景右轮播+定时器显隐提示文字
运用到的有：定时器、浮动层、滚动容器的结构。
其中右侧浮动轮播需要给body做onload播放标记：onload="imgMove()
效果演示：
点击查看演示效果
电脑端：
手机端：
css部分：
- <style type="text/css">
- .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%;
- }
- }
- @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;
- }
- .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;
- }
- /*轮播背景云朵手机端*/
- .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%;
- }
- .shanshuo1{ /*显隐闪烁文字效果-左*/
- top:230px;
- left:30%;
- }
- .shanshuo2{/*显隐闪烁文字效果-右*/
- top:230px;
- left:73%;
- }
- </style>
- <body onload="imgMove()">
- //轮播前景层-右-PC端的图片-横版
- echo '
- <div class="lunbo_r noshouji">
- <a href="gengxin.php">
- <img src="/lunboimg/pc/0.jpg" class="lunbo_rimg noshouji" id="img"/>
- </a>
- </div>
- <script type="text/javascript">
- //设置定时器
- window.setInterval("changeImage()",2000);
- var count =1; //在调用函数的时候0.jpg已经显示，如果num=0，那么在执行下面函数时，0.jpg会再次显示2秒
- //设置寻找图片的函数
- function changeImage() {
- var img = document.getElementById("img");//img对象就相当于img标签
- if (count < 9) {
- img.src = "lunboimg/pc/" + count + ".jpg";
- count++;
- }else {
- count= 0;
- changeImage();
- }
- }
- </script>
- ';
- //轮播前景层-右-手机端的图片-竖版
- echo '
- <div class="lunbo_r" nopc>
- <a href="gengxin.php">
- <img class="lunbo_rimg nopc" src="/lunboimg/sj/1.jpg" alt="" id="picture"/>
- </a>
- </div>
- <script language="javascript" type="text/javascript">
- var arr=new Array();
- arr[0]="/lunboimg/sj/2.jpg";
- arr[1]="/lunboimg/sj/3.jpg";
- arr[2]="/lunboimg/sj/4.jpg";
- arr[3]="/lunboimg/sj/5.jpg";
- arr[4]="/lunboimg/sj/6.jpg";
- arr[5]="/lunboimg/sj/7.jpg";
- arr[6]="/lunboimg/sj/8.jpg";
- arr[7]="/lunboimg/sj/9.jpg";
- var i=0;
- //轮播移动的函数
- function imgMove() {
- var imgs=document.getElementById("picture");
- imgs.src=arr[i];
- i++;
- if (i==4) {
- i=0;
- }
- setTimeout("imgMove()",3000);
- }
- </script>
- ';
单独区分设备手机端执行的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)
- .delay(shortIntervalTime)
- .fadeIn(500)
- .delay(longIntervalTime)
- .fadeOut(500, function() {cycle(nextId)});
- }
- cycle("shanshuo1");
- }
- });
- </script>
|
|
|Archiver|手机版|小黑屋|kedoutd.cn|wdc.store|fll.store|zuz.store|newbe.wang|pvp.store
( 苏ICP备14054272号 )
窥视卡
雷达卡
发表于 2020-8-21 23:52:51
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜