<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css" />
<!-- Demo styles -->
<style>
body {
margin: 0;
padding: 0
}
.timeaxis-current:after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 18;
display: block;
height: 0;
width: 0;
margin: auto;
border-top: 7px solid #fc353a;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
#swiper-container3 {
width: 100%;
height: 60px;
position: relative;
left: 0;
}
#swiper-container3 .swiper-slide {
height: 30px;
width: 100px!important;
font-size: 14px;
text-align: center;
color: #000;
}
.timeaxis-current {
position: absolute;
top: 0;
bottom: 0;
left: 40%;
right: 40%;
z-index: 1;
background: #fc353a;
}
.timeaxis_warp {
position: relative;
background: #2d3845;
}
.timeaxis-item-inner {
line-height: 20px;
padding-top: 8px;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="timeaxis_warp">
<div class="timeaxis-current"></div>
<div class="swiper-container" id="swiper-container3">
<div class="swiper-wrapper">
<div class="swiper-slide" data-num="0">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">17:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="1">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">19:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="2">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">21:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="3">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">22:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="4">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">23:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="5">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">00:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="6">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">06:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="7">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">08:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="8">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">10:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="9">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">12:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="10">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">13:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="11">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">15:00</div>
<div class="timeaxis-info">已开抢</div>
</div>
</div>
<div class="swiper-slide" data-num="12">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">17:00</div>
<div class="timeaxis-info">即将开场</div>
</div>
</div>
<div class="swiper-slide" data-num="13">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">19:00</div>
<div class="timeaxis-info">即将开场</div>
</div>
</div>
<div class="swiper-slide" data-num="14">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">21:00</div>
<div class="timeaxis-info">即将开场</div>
</div>
</div>
<div class="swiper-slide" data-num="15">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">22:00</div>
<div class="timeaxis-info">即将开场</div>
</div>
</div>
<div class="swiper-slide" data-num="16">
<div class="timeaxis-item-inner">
<div class="timeaxis-time">23:00</div>
<div class="timeaxis-info">即将开场</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: "auto",
/*设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。*/
freeMode: true,
/*自动贴合*/
freeModeSticky: true,
/*自动贴合。*/
centeredSlides: true,
/*设定为true时，活动块会居中，而不是默认状态下的居左。*/
slideToClickedSlide: true,
/*设置为true则swiping时点击slide会过渡到这个slide。*/
centeredSlides: true,
/*设定为true时，活动块会居中，而不是默认状态下的居左。*/
onInit: function(swiper) { /*回调函数，初始化后执行。*/
$(".swiper-slide-active").css({
"color": '#fff',
"font-weight": 'bold'
});
},
onTransitionEnd: function() {
/* alert( $(".swiper-slide-active").attr("data-num")); ajax传参数*/
$(".swiper-slide-active").css({
"color": '#fff',
"font-weight": 'bold'
});
},
onTouchMove: function() {
$(".swiper-slide").not('.swiper-slide-active').css({
"color": '#000',
"font-weight": 'normal'
});
}
})
</script>
</body>
</html>
手机端仿照淘抢购倒计时时间滑动tab页面
3星 · 超过75%的资源 需积分: 50 128 浏览量
2016-06-29
18:31:43
上传
评论
收藏 282KB RAR 举报 
左右滑动.rar （17个子文件） 
左右滑动 
.project 388B images 
banner_pre.jpg 3KB
b4.png 27KB b5.png 27KB b3.png 26KB b7.png 49KB banner_next.jpg 3KB b1.png 27KB b2.png 39KB b6.png 29KB
淘抢购滑动时间效果.html 6KB js swiper.min.js 76KB jquery.min.js 84KB Script.js 4KB huadong.html 1KB css swiper.min.css 17KB style.css 1KB资源评论
sinat_355477222017-03-31坑爹，就特么知道，js资源，完全没用！！！
silveryao2017-08-08可以在html5中试用
