通用轮播(包括响应式~)
话不多说,先上一段代码.此代码可根据浏览器窗口的大小自动改变根元素(html)的字体大小(即rem),把页面上需要设置宽高的元素,都以rem作为单位,只要rem不变,则宽高不变.rem改变,则宽高相应改变.而rem的大小会自动根据浏览器的可视范围大小而定,这样我们便可以根据rem来愉快的设定响应式了....
<script>
!(function(win, doc){
function setFontSize() {
// 获取window 宽度
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 730) * 100 + 'px' ;
};//这里标红的730指的是UI原稿中页面的大小.如果你的原稿是980,只需将730改成980即可.
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
// 初始化
setFontSize();
}(window, document));
</script>
接下来我们开始做轮播.
html部分:
<div class="father">
<div class="img">
<img src="../img/b1.jpg" alt="img1" id="img1"/>
<img src="../img/b2.jpg" alt="img2" id="img2"/>
<div class="circle circle1" id="circle1"></div>
<div class="circle circle2" id="circle2"></div>
<div class="circle circle3" id="circle3"></div>
<div class="circle circle4" id="circle4"></div>
<div class="circle circle5" id="circle5"></div>
</div>
</div>
CSS部分:
.img{
width: 7.3rem;
height: 4.54rem;
position: relative;
overflow: hidden;
margin: 0 auto;
}
img{
position: absolute;top: 0;
height: 4.54rem;width: 7.3rem;
}
#img1{
left: 0;
}
#img2{
left: 7.3rem;
}
思路就是页面正中有一个div,有两个大小一致的img子元素,假设img的宽度为1,而div的宽度也为1,且设置了该div over:hidden.这样页面上的可见范围就只有一个1的宽度了.
接下来我们将所有要参与轮播的图片的src放入一个数组.只需要设置一个定时器,让img中,left值为0的这个img的left值改为-1(改为-1之后,马上让他变为1,并切换src为接下来需要播放的图片的src);而img中left值为1的img的left值改为0,这样不断循环,达到轮播的效果.说起来可能有点绕,所以把完整代码附上.
<head lang="en">
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width,initial-scale=1"/>
<title></title>
<link rel="stylesheet" href="normalize.css"/>
<script src="jquery-1.7.2.min.js"></script>
<style>
.img{
width: 7.3rem;
height: 4.54rem;
position: relative;
overflow: hidden;
margin: 0 auto;
}
img{
position: absolute;top: 0;
height: 4.54rem;width: 7.3rem;
}
#img1{
left: 0;
}
#img2{
left: 7.3rem;
}
.circle{
height: .15rem;
width: .15rem;
border-radius: .075rem;
position: absolute;
background-color: #c9c3ff;
}
.circle1{
top: 4rem;left: 3.2rem;
}
.circle2{
top: 4rem;left: 3.4rem;
}
.circle3{
top: 4rem;left: 3.6rem;
}
.circle4{
top: 4rem;left: 3.8rem;
}
.circle5{
top: 4rem;left: 4rem;
}
</style>
</head>
<body>
<div class="father">
<div class="img">
<img src="../img/b1.jpg" alt="img1" id="img1"/>
<img src="../img/b2.jpg" alt="img2" id="img2"/>
<div class="circle circle1" id="circle1"></div>
<div class="circle circle2" id="circle2"></div>
<div class="circle circle3" id="circle3"></div>
<div class="circle circle4" id="circle4"></div>
<div class="circle circle5" id="circle5"></div>
</div>
</div>
</body>
<script>
$(function () {
var arrSrc=['../img/b1.jpg','../img/b2.jpg','../img/b3.jpg','../img/b4.jpg','../img/b5.jpg'];
var circleArr=$('.circle');
var nImg=1;
var nCircle=1;
var arrImg=[$('#img1'),$('#img2')];
$(circleArr[0]).css('backgroundColor','#5c43ff');
//定义自动播放函数
function play(){
$('.circle').css('backgroundColor','#c9c3ff');
$(circleArr[nCircle]).css('backgroundColor','#5c43ff');
$(arrImg).each(function (j){
if(parseInt($(this).position().left)<0){
$(this).css('left','7.3rem');
$(this).attr('src',arrSrc[nImg]);
}
});
$(arrImg).each(function (i) {
if($(this).position().left>0){
$(this).animate({
left:0
},1000)
}else if($(this).position().left==0){
$(this).animate({
left:-7.3+'rem'
},1000);
}
});
nImg++;
nCircle++;
if(nCircle>=5){
nCircle=0
}
if(nImg>=5){
nImg=0
}
}
var autoPlay=window.setInterval(function () {
play()
},4000);
//鼠标移入圆点时的事件
$('.circle').mouseenter(function () {
$('.circle').css('backgroundColor','#c9c3ff');
$(this).css('backgroundColor','#5c43ff');
var obj=$(this);
var objImg;
window.clearInterval(autoPlay);
$(arrImg).each(function (j){
if($(this).position().left==0){
objImg=$(this);
}
});
if($(this).attr('id')=='circle1'){
objImg.attr('src',arrSrc[0]);
nImg=1;
nCircle=1;
}else if($(this).attr('id')=='circle2'){
objImg.attr('src',arrSrc[1]);
nImg=2;
nCircle=2;
}else if($(this).attr('id')=='circle3'){
objImg.attr('src',arrSrc[2]);
nImg=3;
nCircle=3;
}else if($(this).attr('id')=='circle4'){
objImg.attr('src',arrSrc[3]);
nImg=4;
nCircle=4;
}else if($(this).attr('id')=='circle5'){
objImg.attr('src',arrSrc[4]);
nImg=0;
nCircle=0;
}
});
$('.circle').mouseleave(function () {
autoPlay=window.setInterval(function () {
play()
},4000)
})
})
</script>
<script>
!(function(win, doc){
function setFontSize() {
// 获取window 宽度
// zepto实现 $(window).width()就是这么干的
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 730) * 100 + 'px' ;
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
// 初始化
setFontSize();
}(window, document));
</script>
当然,以上代码是本人对轮播的一些体会,以后可能会写的更简介,酷炫.大家如果有更好的方法,欢迎提出交流~
你的眼界 不止于此
