jQuery -- touch事件之轮播图效果
2017-06-28 14:56
323 查看
废话不多说，下面放代码，注释很详细，不怕看不懂
效果图预览：
相关知识传送门：
touch事件基础： http://blog.csdn.net/sinat_19327991/article/details/73823874
`
效果图预览：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.content{
posit
4000
ion: relative;
width: 100%;
overflow: hidden;
}
.net{
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate(0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
transition: all .5s;
-moz-transition: all .5s; /* Firefox 4 */
-webkit-transition: all .5s; /* Safari 和 Chrome */
-o-transition: all .5s; /* Opera */
position: relative;
right: 0;
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
.net div{
width: 100%;
height: 11.76rem;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
text-align: center;
line-height: 4.7rem;
font-size: 0.94rem;
background-size: cover;
background-position: 50% 50%;
}
.net div:nth-child(1){
background-image: url(img/follow-home-banner.jpg);
}
.net div:nth-child(2){
background-image: url(img/index-banner.jpg);
}
.net div:nth-child(3){
background-image: url(img/index-list-1.jpg);
}
.net div:nth-child(4){
background-image: url(img/index-list-2.jpg);
}
.content .location{
position: absolute;
bottom: 0.58rem;
left: 50%;
transform: translate(-50%, 30%);
-ms-transform: translate(-50%, 30%);
-o-transform: translate(-50%, 30%);
-moz-transform: translate(-50%, 30%);
-webkit-transform: translate(-50%, 30%);
}
.content .location li{
display: inline-block;
height: 0.58rem;
width: 0.58rem;
margin: 0 3px;
background-color: darkgrey;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.content .location li.on{
background-color: orangered;
}
</style>
</head>
<body>
<div class="content">
<!--轮播图-->
<div class="net">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--焦点-->
<ul class="location"></ul>
</div>
<script type="text/javascript">
//获取相关数据
var w = parseInt($('.net div').width());
var w_length = $('.net div').length;
var c_w = parseInt(($('.net div').length*w)-w);
var left = parseInt($('.net').position().left);
var i = 0;
var
efe6
bannerTime = 3000;
//根据轮播图数量动态添加焦点
for (var j = 0; j < w_length; j++) {
if (j < w_length) {
$('.location').append('<li></li>');
$('.location li').eq(0).addClass('on');
}
}
function banner () {
//如果播放到最后一张图则跳到第一张图，否则继续下一张
if (left == c_w) {
left -= c_w;
$('.net').css('right', left + 'px');
}else{
left += w;
$('.net').css('right', left + 'px');
}
if (i > w_length -2) {
i -= w_length -1;
$('.location li').eq(i).addClass('on').siblings().removeClass('on');
}else{
i++;
$('.location li').eq(i).addClass('on').siblings().removeClass('on');
}
}
//每隔3秒换一次图
var bannerData = setInterval(banner,bannerTime);
//刷新页面更新数据
function defult () {
history.go(0);
}
//窗口大小发生变化刷新页面重新获取数据
$(window).on('resize', function() {
defult();
});
$('.net').on('touchstart', function (e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
//触摸开始时获取其X轴和Y轴的坐标
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
clearInterval(bannerData);
});
$('.net').on('touchend', function (e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
//触摸结束获取其X轴和Y轴的坐标
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
//利用触摸开始的坐标和触摸结束的坐标相减 得出的值判断其滑动方向
X = moveEndX - startX,
Y = moveEndY - startY;
//左滑
if ( X > 0 ) {
//若第一张往左滑 则回到最后一张
if (left == 0) {
left = c_w;
$('.net').css('right', left + 'px');
}else{
left -= w;
$('.net').css('right', left + 'px');
}
if (i < 0) {
i = w_length - 2;
$('.location li').eq(i).addClass('on').siblings().removeClass('on');
}else{
i--;
$('.location li').eq(i).addClass('on').siblings().removeClass('on');
}
}
//右滑
else if ( X < 0 ) {
//若滑到最后一张图片 则回到第一张图片
if (left == c_w) {
left -= c_w;
$('.net').css('right', left + 'px');
}else{
left += w;
$('.net').css('right', left + 'px');
}
if (i > w_length -2) {
i -= w_length -1;
$('.location li').eq(i).addClass('on').siblings().removeClass('on');
}else{
i++;
$('.location li').eq(i).addClass('on').siblings().removeClass('on');
}
}
//下滑
else if ( Y > 0) {
console.log('top 2 bottom');
}
//上滑
else if ( Y < 0 ) {
console.log('bottom 2 top');
}
//单击
else{
console.log('just touch');
}
//触摸结束后图片继续播放
bannerData = setInterval(banner,bannerTime);
});
</script>
</body>
</html>相关知识传送门：
touch事件基础： http://blog.csdn.net/sinat_19327991/article/details/73823874
`
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 又一个jquery轮播效果，焦点图，带数字显示序号，这个可以添加对应标题在图片上，支持主流浏览器
- 又一个jquery轮播效果，焦点图，带数字显示序号，这个可以添加对应标题在图片上，支持主流浏览器
- JQuery实现图片轮播切换效果--水平切换/垂直切换
- 【jQuery插件】slideImg-广告轮播，焦点图效果
- pixviewer图片轮播效果（jQuery客户端与服务端相分离）
- jQuery--仿迅雷图片轮播切换效果
- [转]JQuery实现图片轮播效果
- JQuery实现图片轮播效果(转)
- jQuery首页轮播效果
- 常用实用图片轮播效果jquery插件
- jquery实现图片轮播效果
- 利用jQuery全局事件ajaxStart为特定请求实现提示效果
- 利用jquery实现图片轮播效果（可配置每张图片的停留时间）
- Jquery图片轮播效果
- jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
- 又一个jquery轮播效果，焦点图，带数字显示序号，这个可以添加对应标题在图片上，支持主流浏览器
- 基于JQuery的实现图片轮播效果(焦点图)
- jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例
- Jquery图片轮播效果2
- JQuery实现图片轮播效果