【jq】自适应PC端幻灯片样式

自适应PC端幻灯片样式

banner.html

<!--幻灯片大图开始-->
<div id="slideBox" class="slideBox1"><div class="bd"><ul>{eyou:adv pid='1'}<li><a href="{$field.links}"><img src="{$field.litpic}"/></a></li>{/eyou:adv}</ul></div><div class="hd"><ul>{eyou:adv pid='1'}<li></li>{/eyou:adv}</ul></div></div>
<script src="{eyou:global name='web_templets_pc' /}/skin/js/banner.js"></script>
<!--幻灯片大图结束-->

banner.css

/* 幻灯切换 */
.slideBox1 {position: relative;display: block;/* width: 100%; *//* height: 440px; */overflow: hidden;
}
.slideBox1 .bd img {display: block;margin: 0 auto;/* height: 440px; */width: 100%;
}
.slideBox1 .prev {display: none;position: absolute;padding: 0;left: 50%;margin-left: -595px;top: 57%;margin-top: -60px;width: 30px;height: 60px;background: url(../images/arrow_left.png) no-repeat left center;background-position: 0 0;
}
.slideBox1 .next {display: none;position: absolute;padding: 0;right: 50%;margin-right: -595px;top: 57%;margin-top: -60px;width: 30px;height: 60px;background: url(../images/arrow_right.png) no-repeat left center;background-position: right center;
}
.slideBox1 .prev:hover, .slideBox1 .next:hover {opacity: .7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";-khtml-opacity: .7;
}
.slideBox1 .hd {position: relative;z-index: 1;
}
.slideBox1 .hd ul {text-align: center;margin-top: -25px;
}
.slideBox1 .hd ul li {width: 12px;height: 12px;border-radius: 50%;display: inline-block;margin: 0 3px;cursor: pointer;background: #333;
}
.slideBox1 .hd ul li.on {background: #d81e06;
}
/* 幻灯切换 */
.slideBox2 {position: relative;display: block;width: 100%;height: 220px;overflow: hidden;
}
.slideBox2 .bd img {display: block;margin: 0 auto;height: 220px;
}
.slideBox2 .prev {display: none;position: absolute;padding: 0;left: 50%;margin-left: -595px;top: 64%;margin-top: -60px;width: 30px;height: 60px;background: url(../images/arrow_left.png) no-repeat left center;background-position: 0 0;
}
.slideBox2 .next {display: none;position: absolute;padding: 0;right: 50%;margin-right: -595px;top: 64%;margin-top: -60px;width: 30px;height: 60px;background: url(../images/arrow_right.png) no-repeat left center;background-position: right center;
}
.slideBox2 .prev:hover, .slideBox2 .next:hover {opacity: .7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";-khtml-opacity: .7;
}
.slideBox2 .hd {position: relative;z-index: 1;
}
.slideBox2 .hd ul {text-align: center;margin-top: -25px;
}
.slideBox2 .hd ul li {width: 12px;height: 12px;border-radius: 50%;display: inline-block;margin: 0 3px;cursor: pointer;background: #333;
}
.slideBox2 .hd ul li.on {background: #ff9700;
}

banner.js

/* 幻灯动画 */
jQuery("#slideBox").slide({mainCell: ".bd ul",interTime: 5000,autoPlay: true
});
jQuery("#slideBox").hover(function() {$(this).find(".prev").stop(true, true).fadeIn(500);$(this).find(".next").stop(true, true).fadeIn(500);
},
function(){$(this).find(".prev").fadeOut(500);$(this).find(".next").fadeOut(500);
});

【jq】自适应PC端幻灯片样式相关推荐

【学习】自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
pc端rem适配_自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
html页面自动适应pc端,自适应PC端网页制作使用REM(示例代码)
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
网页自适应pc端和移动端
手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果, ...
vue 2.x 自适应pc端浏览器百分比.(简单/详细)
做项目的时候都会要求做基础的自适应功能. 先介绍一下,我说的这个自适应就是把我们用的"px"转为"rem".废话不多说,直接上效果图. 两张图对比,一个是100 ...
Vue.js——PC端和移动端样式适配方案
此方案整合了断点响应式样式,和移动端样式重分配. 前言最近在学习Vue的项目架构,查询了很多移动端样式适配,整合了一下我自己的适配方案做一个记录,可能不是最好的,但我自己用着还蛮顺手的~欢迎大家补充 ...
html浏览器pc端禁止缩放,阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码众所周知:移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮浏 ...
PHP绿茶小说站群网站源码自适应pc+手机端
介绍: PHP绿茶小说站群网站源码自适应电脑+手机端+秒收隔天速出权重绿茶小说站群2.x-秒收隔天速出权重-小说流量稳定收割机-精品轻量级PHP站群系统站群系统,小说行业专用引流精品站群,绿茶小说 ...
vuecli3 实现移动端和pc端界面切换（两套代码）
适合场景多页面多系统应用所有系统都在同一目录下.配置多入口多出口.每个系统之间可以链接.每个系统内依然采用Vue单页应用开发. 产品需求:一套代码兼容pc端和移动端 , 移动端和pc端的样式布局 ...

【jq】自适应PC端幻灯片样式

【jq】自适应PC端幻灯片样式相关推荐

最新文章

热门文章