jquery mobile移动端幻灯片滑动切换效果
更新时间：2020年04月15日 16:04:40 作者：天步
这篇文章主要为大家详细介绍了jquery mobile移动端幻灯片滑动切换效果，实现滑动切换和点击切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自动适应设备的宽度，滑动会切换大图，底部导航跟随切换。点击底部导航切换大图。使用的jquery_mobile插件，引入1.4.5的插件，CSS表和jquery库即可，除了ID,CLASS命名可能会和你项目重复，改成单独即可，其他应该没有重复的，因为本脚本使用计时器写的，加入了方法判定，在执行一个方法的时候，锁定其他方法禁止执行，不会冲突，使用计时器来控制动画，可能不尽如人意，准备重构一下改成Jquery的animate()方法来执行动画效果。近期重构好在上传使用内置方法不用计时器的版本吧。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jsmobile/jquery.mobile-1.4.5.min.css">
<script src="js/jquery183.min.js"></script>
<script src="jsmobile/jquery.mobile-1.4.5.min.js"></script>
<style>
ul,li,a,body,div{
margin:0px;
list-style:none;
}
#nav li{
width:18%;
border:1px solid blue;
height:50px;
line-height:50px;
list-style:none;
text-align:center;
float:left;
}
.top_jt{
width:100px;
height:50px;
border:1px solid green;
text-align:center;
line-height:50px;
position: fixed;
top:800px;
left:230px;
z-index:1000;
box-shadow: 1px 1px 10px #666;
}
.dingyi{
position: fixed;
top:0px;
z-index:1000;
box-shadow: 1px 1px 10px #666;
}
.p_ul_li{float:left;width:20%;height:20px;border:1px solid black;text-align:center;margin:2%;}
.p_ul{width:100%;padding:0px;}
.back{background-color:red;color:white;}
</style>
</head>
<body>
<div data-role="page" id="pageone" >
<!--引用页头-->
<iframe src="header.html" width="100%" height="50" frameborder="0">
</iframe>
<div data-role="content">
<div class="container" id="container" style="width:100%;overflow:hidden;">
<div class="content" id="content" style="overflow:hidden;">
<div class="service_scope" style="height:300px;background-color:red;float:left;">
AAAAAAAAA
</div>
<div class="service_scope" style="height:300px;background-color:blue;float:left;">
BBBBBBBBB
</div>
<div class="service_scope" style="height:300px;background-color:green;float:left;">
CCCCCCCCC
</div>
<div class="service_scope" style="height:300px;background-color:black;float:left;">
DDDDDDDDD
</div>
</div>
<ul id="p_ul" class="p_ul ">
<li class="p_ul_li back">A</li>
<li class="p_ul_li">B</li>
<li class="p_ul_li">C</li>
<li class="p_ul_li">D</li>
</ul>
</div>
<script type="text/javascript">
//获取当前设备宽度
var body_width = document.body.clientWidth;//当前设备宽度
var arr = document.getElementsByClassName("service_scope");//幻灯片数组
document.getElementById("content").style.width = body_width * arr.length;//幻灯片的父容器的宽度
var i;//全局计数器
var zhuangtai = false;//状态判定，动画效果执行的时候不能在叠加效果执行，执行完毕才能在执行新的函数
var p_ul_li=0;//底部选择器样式的计数器
var t = 380;//动画效果执行时间，0.38S
var jishi = 1;//计时器每次执行时间
for(i = 0;i < arr.length; i++){
arr[i].style.width = body_width;//第一种子元素的宽度，用JS动态取值赋值
}
$(function(){
$(".service_scope").swipeleft(function(){
//console.log(p_ul_li);
if($(this).index() >= 0 && $(this).index() < arr.length-1 && zhuangtai == false){
$left_yidong = setInterval("left_yidong()",jishi);
//$(".p_ul_li").eq(p_ul_li).next().addClass("back").siblings().removeClass("back");
$(".p_ul_li").eq(p_ul_li).removeClass("back").css({"background-color":"white","color":"black"}).next().css({"background-color":$(this).next().css("background-color"),"color":"white"});
p_ul_li++;
}
if(p_ul_li > arr.length-1){
p_ul_li = arr.length-1;
}
});
$(".service_scope").swiperight(function(){
//console.log(p_ul_li);
if($(this).index() > 0 && $(this).index() <= arr.length-1 && zhuangtai == false){
//$(".p_ul_li").eq(p_ul_li).prev().addClass("back").siblings().removeClass("back");
$(".p_ul_li").eq(p_ul_li).css({"background-color":"white","color":"black"}).prev().css({"background-color":$(this).prev().css("background-color"),"color":"white"});
$right_yidong = setInterval("right_yidong()",jishi);
p_ul_li--;
}
if(p_ul_li < 0){
p_ul_li = 0;
}
});
$(".p_ul_li").click(function(){
if(zhuangtai == false){
//$(this).addClass("back").siblings().removeClass("back");
$(this).css({"background-color":$(".service_scope").eq($(this).index()).css("background-color"),"color":"white"}).siblings().removeClass("back").css({"background-color":"white","color":"black"});
p_ul_li = $(this).index();
switch ($(this).index()){ //此处可以设定更多的值，只需要大于要显示的元素个数即可。条件就是Int，left就是宽度*对应的Int
case 0 : $("#content").offset({left:0});
break;
case 1 : $("#content").offset({left:-body_width});
break;
case 2 : $("#content").offset({left:-body_width*2});
break;
case 3 : $("#content").offset({left:-body_width*3});
break;
}
}
});
});
function left_yidong(){
zhuangtai = true;
$left = $("#content").position().left;
$("#content").offset({left:$left-body_width/t});
i++;
if(i >= t){
clearInterval($left_yidong);
zhuangtai = false;
i=0;
}
}
function right_yidong(){
zhuangtai = true;
$left = $("#content").position().left;
$("#content").offset({left:$left+body_width/t});
i++;
if(i >= t){
clearInterval($right_yidong);
zhuangtai = false;
i=0;
}
}
</script>
</div>
<!--引用页尾-->
<iframe src="footer.html" width="100%" height="50" frameborder="0">
</iframe>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
基于LayUI分页和LayUI laypage分页的使用示例
本篇文章主要介绍了基于LayUI分页和LayUI laypage分页的使用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
jquery中的queue和dequeue是一组很有用的方法，他们对于一系列需要按次序运行的函数特别有用。特别animate动画，ajax，以及timeout等需要一定时间的函数2014-03-03
网页应用程序需要对丰富的内容提供简单易用的上传和操作方式，但是这样会给只有少数图片处理技能的用户造成很大的困难。图片剪切是最基本的图片处理技术，这个详细的教程将包括在jQuery库上创建此参加的每一个步骤。2011-08-08
支持查询功能的键盘和简单得软键盘，键盘样式完全在独立的css文件中定义，可以自行美化2012-07-07
这篇文章主要介绍了jQuery模拟黑客帝国矩阵效果的方法,实例分析了jQuery操作页面元素实现动画效果的技巧,需要的朋友可以参考下2015-06-06![jQuery中[attribute]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg5.png)
这篇文章主要介绍了jQuery中[attribute]选择器用法,以实例形式分析了[attribute]选择器的功能、定义及匹配给定元素属性的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
jquery mobile changepage的三种传参方法介绍
本来觉得changePage 那么多option,传几个参数应该没问题结果翻遍国内外网站,基本方法只有三种，下面与大家分享下，感兴趣的朋友可以参考下2013-09-09
jquery 表单验证,检测表单是否为空2008-09-09
这篇文章主要介绍了jQuery中closest()函数用法,实例分析了closest()函数的功能、定义及匹配元素的各种技巧,需要的朋友可以参考下2015-01-01
在编写widget的时候，一般我们需要绑定一些事件，最好将这些widget的绑定事件加上当前widget的命名空间。2010-10-10
![jQuery中[attribute]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论