css3+jquery实现无间隔图片轮播

最新推荐文章于 2018-04-30 00:35:09 发布

lgdshr123

最新推荐文章于 2018-04-30 00:35:09 发布

阅读量598

点赞数

分类专栏： JavaScript 文章标签： web前端 jquery 移动端网页

本文链接：https://blog.csdn.net/lgdshr123/article/details/52830704

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name=“viewport” content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
<title>测试</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
.banner{width: 100%;position: relative;overflow: hidden;}
.banner .con{width: 400%;-webkit-transform: translateX(-25%); transform: translateX(-25%);-webkit-transition:all 0.5s;transition:all 0.5s;}
.banner .con li{width: 25%;float: left;}
.banner .con li a{width: 100%;display: block;}
.banner .con li img{width: 100%;vertical-align: middle;}
.banner .num{width: 60px;position: absolute;left: 50%;margin-left: -30px;bottom: 17px;}
.banner .num li{width: 12px;height: 12px;border-radius: 50%;background:#fff;float: left;margin-right: 18px;}
.banner .num .sel{background: #999;}
</style>
</head>
<body>
<div class="banner">
<ul class="con">
<li><a href="#"><p style="width: 100%;height:332px; background: red;"></p></a></li>
<li><a href="#"><p style="width: 100%;height:332px; background: blue;"></p></a></li>
<li><a href="#"><p style="width: 100%;height:332px; background: red;"></p></a></li>
<li><a href="#"><p style="width: 100%;height:332px; background: blue;"></p></a></li>
</ul>
<ol class="num">
<li class="sel"></li>
<li></li>
</ol>
</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
function adapter(){
var viewPort = document.documentElement.clientWidth;
var scale = viewPort/640;
document.body.style.zoom = scale;
}
adapter();
window.onresize = function () {
adapter();
}
$(function () {
var timer = null,picNum = 1,liNum = 0，timer2=null;
var $lis1 = $('.con li');//得到图片
var $lis2 = $('.num li');//得到下面的圆点
function autoMov(){//自动滚动函数
clearInterval(timer);//防止计时器乱在新建一个计时器前先清除一个计时器
timer = setInterval(function(){
picNum++;//图片索引
if(picNum == $lis1.length-1){
clearTimeout(timer2);
timer2=setTimeout(function () {//因为图片间切换要经过500毫秒所以要在500毫秒后重置con的位置
picNum = 1;
$('.con').css({
'-webkit-transform': 'translateX(-25%)',
'transform' : 'translateX(-25%)',//重置外部盒子为默认的其实位置开始
'-webkit-transition-duration': '0s',
'transition-duration': '0s' // 这里的css3的效果被去除了，所以看不出来有移动的效果，我们注意看transition-duration:0s;
});
},500);
}
liNum++;//圆点索引
if(liNum >= $lis2.length){
liNum = 0;
}
var end = -picNum*25;
$('.con').css({
'-webkit-transform': 'translateX('+ end +'%)',
'transform' : 'translateX('+ end +'%)',
'-webkit-transition-duration': '0.5s',
'transition-duration': '0.5s'
});
$lis2.eq(liNum).addClass('sel').siblings().removeClass('sel');
},2000);
}
autoMov();
})
</script>
</body>
</html>