jquery 移动端轮播图
<div class="slide">
<div class="slide-box">
<ul class="slide-ul">
<li><a href="" title="1111"><img src="http://www.heibaipig.com/demo/images/test/1.jpg"></a></li>
<li><a href="" title="2222"><img src="http://0.thumb.pc6.com/up/2016-5/20165199297.jpg"></a></li>
<li><a href="" title="33333"><img src="http://0.thumb.pc6.com/up/2016-4/201642814841.jpg"></a></li>
<li><a href="" title="44444"><img src="http://m.pc6.com/public/img/20151202.jpg"></a></li>
</ul>
</div>
<div class="title-box"><p class="title">1111</p><span class="circle"><em class="active"></em><em></em><em></em><em></em></span></div>
</div>
*{ padding:; margin:;}
/*.slide{position:relative}
.slide-box{height:100%; margin:0 auto;position:relative; overflow:hidden}
.slide ul{ position:absolute; left:0; top:0; width:100%; min-height:160px;}
.slide ul li{ float:left; list-style:none; position:relative}
.slide ul li img{ width:100%; height:100%;}*/ /* focus_pic */
.slide{clear:both;position:relative;z-index:;width:100%;max-width:960px;max-height:480px;margin:0 auto 0.3em auto;overflow:hidden;}
.slide-box{ width:100%;height:100%; margin:0 auto;position:relative; overflow:hidden}
.slide .slide-ul{position:absolute;z-index:;left:;width:10000px;}
.slide .slide-ul li{float:left;display:block;}
.slide .slide-ul li img{display:block;width:100%;height:100%;}
.slide .title-box{ width:90%; padding:0 5%; z-index:; height:30px; line-height:30px; color:#fff; font-size:14px; background:rgba(0,0,0,.5); position:absolute; left:; bottom:;}
.slide .circle{ float:right;}
.slide .title{ float:left; display:inline-block;}
.slide .circle em{ display:inline-block; width:5px; height:5px; margin-left:5px; background-color:#fff; border-radius:50%;}
.slide .circle .active{ background-color:#f00}
<script>
//自适应
function sizeShow(){
var pic_w=$(window).width();
var pic_h=pic_w*0.5;
$(".slide").height(pic_h);
$(".slide li").width(pic_w).height(pic_h);
$(".slide ul").width(pic_w*4)
}; function scrollAuto(){
sizeShow();
$(window).resize(function(){sizeShow()});
var oclass=$(".slide");
var w=oclass.find("li").width();
var iNow = 0, index = 1, timer = null;
var touch={
"s":[],
"m":[],
"e":[],
"d":""
}; oclass[0].addEventListener('touchstart', function(e){
touch.s[0] = e.targetTouches[0].pageX;
touch.s[1] = e.targetTouches[0].pageY;
touch.s[2] = (new Date()).getTime();
clearInterval(timer)
}, false); oclass[0].addEventListener('touchmove', function(e){
var a=Math.abs(e.targetTouches[0].pageX-touch.s[0])
var b=Math.abs(e.targetTouches[0].pageY-touch.s[1]);
console.log("dMove:"+touch.d)
if(a>=b && touch.d==""){
touch.d=1;//左右
//touch.m[0]=touch.s[0]
}else if(touch.d==""){
touch.d=0;//上下或者偏上下
}
console.log(a+":::"+b)
if(touch.d==1){//左右滚动
e.preventDefault();
$(".slide ul").css({"left":-iNow*w+e.targetTouches[0].pageX-touch.s[0]});
// touch.m[0]=e.targetTouches[0].pageX;
//touch.m[1]=e.targetTouches[0].pageY;
} }, false); oclass[0].addEventListener('touchend', function(e){
console.log("dEnd:"+touch.d)
if(touch.d==1){
if((new Date()).getTime()-touch.s[2]>700){
if(e.changedTouches[0].pageX-touch.s[0]>w/3){
auto("right")
}else if(touch.s[0]-e.changedTouches[0].pageX>w/3){
auto("left")
}else{
auto("reset")
}
}else{
if(e.changedTouches[0].pageX>touch.s[0]){
auto("right");
}else if(touch.s[0]>e.changedTouches[0].pageX){
auto("left")
}
}
}
touch.d="";
timer=setInterval(function(){
if(iNow>=$(".slide li").length-1){
iNow=0;
}else{
iNow++
}
$(".slide ul").animate({"left":-w*iNow})
$(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
$(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
},3000); }, false); function auto(c){
if(c=="left"){
if(iNow>=$(".slide li").length-1){
iNow=$(".slide li").length-1
}else{
iNow++
}
console.log(iNow)
$(".slide ul").animate({"left":-w*iNow})
}else if(c=="right"){
if(iNow<=0){
iNow=0
}else{
iNow--
}
$(".slide ul").animate({"left":-w*iNow})
}else if(c=="reset"){
$(".slide ul").animate({"left":-w*iNow})
}
$(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
$(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
}; timer=setInterval(function(){
if(iNow>=$(".slide li").length-1){
iNow=0;
}else{
iNow++
}
$(".slide ul").animate({"left":-w*iNow})
$(".circle em").eq(iNow).addClass("active").siblings().removeClass("active");
$(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title"))
},3000); }
$(function(){
scrollAuto();
}) </script>
实现效果:
jquery 移动端轮播图的更多相关文章
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- 移动端轮播图vue-awesome-swiper
日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴ ...
- 用jQuery写的轮播图
效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- 移动端轮播图实现方法(dGun.js)
本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
随机推荐
- ServletRequest接口召回总结
<body> <form action="LoginServlet" method="post"> User:<input typ ...
- 024找到二维阵列(keep it up)
剑指offer在标题中:http://ac.jobdu.com/problem.php? pid=1384 题目描写叙述: 在一个二维数组中,每一行都依照从左到右递增的顺序排序.每一列都依照从上到下递 ...
- CocoaChina 第四个测试
1. iOS同意近期本地通知数量最大为多少? A.64 B.32 C.128 D.16 2. int x = 1; int y = 2; int z = x^y*y; NSLog(@"%d& ...
- mac在查看jre通路
于Finder于command+shift+G 选/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home 版权声明:本文博主原创 ...
- 我的MYSQL学习心得(一)
原文:我的MYSQL学习心得(一) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL ...
- lucene两个分页操作
基于lucene两个分页: lucene3.5查询方式(每次查询所有记录,然后取当中部分记录.这样的方式用的最多),lucene官方的解释:因为我们的速度足够快. 处理海量数据时.内存easy内存溢出 ...
- Swift——(三)Swift神奇的下划线
在Swift在.有许多神奇的下划线,在这里,我们将看到神奇的汇总,我希望能够帮助其他很多学习Swift朋友. @Author: twlkyao转载或者引用请保留此行. 1.格式化数字字面量 通 ...
- Nyoj Arbitrage(Floyd or spfa or Bellman-Ford)
描述Arbitrage is the use of discrepancies in currency exchange rates to transform one unit of a curren ...
- Android 内存管理 &Memory Leak & OOM 分析
1.Android 流程管理&内存 Android主要应用在嵌入式设备其中.而嵌入式设备因为一些众所周知的条件限制,通常都不会有非常高的配置,特别是内存是比較有限的. 假设我们编写的代 码其中 ...
- hive union all 使用
功能:将两个表中的 同样的字段拼接到一起 測试: create external table IF NOT EXISTS temp_uniontest_ta ( a1 string, a2 strin ...