<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>JS 移动端的焦点图触屏滑动</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/TouchSlide.1.0.js"></script>
<style>
.focus{ width:320px; height:140px; margin:20px auto 0 auto; position:relative; overflow:hidden; }
.focus .hd{ width:100%; height:5px; position:absolute; z-index:1; bottom:0; text-align:center; }
.focus .hd ul{ overflow:hidden; display:-moz-box; display:-webkit-box; display:box; height:5px; background-color:rgba(51,51,51,0.5); }
.focus .hd ul li{ -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; }
.focus .hd ul .on{ background:#FF4000; }
.focus .bd{ position:relative; z-index:0; }
.focus .bd li img{ width:100%; height:150px; }
.focus .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
</style>
</head>
<body>
<div id="focus" class="focus">
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul>
<li><a href="#"><img src="img/m1.jpg" /></a></li>
<li><a href="#"><img src="img/m2.jpg" /></a></li>
<li><a href="#"><img src="img/m3.jpg" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
TouchSlide({
slideCell:"#focus",
titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
mainCell:".bd ul",
effect:"leftLoop",
autoPlay:true,//自动播放
autoPage:true //自动分页
});
</script>
</body>
</html>
效果图：
相关推荐
本文将详细解析"移动端焦点图轮播"这一技术，并着重讲解其支持的手指触摸功能。 首先，移动端焦点图轮播的核心功能是实现图片或内容的自动循环播放，通常包括前进、后退、自动切换、分页指示器等功能。在移动设备上...
总的来说，这个“jquery带触摸移动端焦点图”项目展示了如何利用jQuery的强大功能和简洁的API，结合触摸事件和响应式设计，创建一个既适用于桌面也适用于移动设备的焦点图轮播组件。无论是网页设计师还是前端开发者...
总的来说，移动端焦点图的实现涉及到HTML结构设计、CSS样式控制以及JavaScript事件监听和处理。通过合理的布局和交互设计，我们可以打造出一款用户体验优秀的移动端幻灯片组件，同时支持图片的点击放大和滑动切换，...
总结起来，触屏滑动特效插件是通过JavaScript实现的一种增强移动端用户体验的工具，它能够提供触屏焦点图、Tab切换、多图切换等多种交互效果。通过合理配置和自定义，开发者可以为自己的移动应用或网站添加丰富的...
在移动端，这种功能尤其重要，因为屏幕空间有限，滑动焦点图能有效地利用有限的空间来展示多样的信息。 标题中的“手机滑动焦点图”主要涉及以下技术点： 1. **响应式设计**：手机滑动焦点图需要具备自适应性，...
"手机移动端触屏版无缝滚动焦点图代码手机网页特效"是一个针对这一领域的资源，它提供了适用于触屏设备的自适应网页模板，旨在提升手机用户的浏览体验。这个压缩包包含了一套精心设计的HTML5代码，用于实现触屏设备...
在开发手机版网页时，为了提供优秀的用户体验，常常需要实现全屏、满屏的滚动效果，特别是在制作焦点图或幻灯片展示时。本项目聚焦于使用Swiper库来实现这样的功能，尤其适用于移动设备的触屏操作。Swiper是一款强大...
本项目“jQuery手机触屏滑动切换幻灯片”正是为这一目的而设计，它利用了流行的JavaScript库jQuery以及专业的swiper.js插件，为移动端用户提供了流畅的滑动浏览体验。 jQuery是一个轻量级的JavaScript库，它简化了...
6. **jQuerycarousel_focus685120151216**：此插件可能提供了焦点图轮播效果，强调当前展示的项目，适合用于突出显示重要信息。 7. **jQuery-hdp223920151229**：可能是一个具有高清支持的轮播插件，确保在高分辨率...
【jQuery宽屏焦点图左右切换代码 兼容手机移动端】 在网页设计中，焦点图是一种常见的展示手段，用于在有限的空间内展示多张图片或内容。这款jQuery宽屏焦点图左右切换代码专为适应现代网页设计的需求而设计，不仅...
响应式设计是现代网页开发的关键元素，特别是在移动设备占据主导地位的时代。hiSlider.js是一款针对这一...通过深入理解并有效利用这个插件，开发者可以创建出既美观又实用的移动端焦点图，提升网站的整体用户体验。
在压缩包中的“移动端焦点图”可能包含了实现以上功能的所有必要文件，如HTML文件、CSS文件、JavaScript文件以及示例图片等。开发者可以通过查看和修改这些文件，根据自己的需求定制自己的移动WAP端焦点图。同时，也...
Swiper是一款强大的JavaScript滑动插件，常用于创建移动端的触摸滑动效果，如轮播图、焦点图等。在本示例中，“swiper横向循环焦点图片”是基于Swiper实现的一个功能，允许图片在水平方向上进行无缝循环展示，为用户...
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css...
6. **移动端适配**：考虑到现代网页的跨平台性，焦点图需要兼容各种设备，特别是触摸屏设备。为此，需要监听`touchstart`、`touchmove`和`touchend`事件，调整手势识别逻辑。 7. **优化与性能**：为了提高性能和...
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 基于swipe4写了一个移动端的全屏滚动效果 但是图片始终不能自适应...
【标题】"js左右移动切换也可自动切换的焦点图demo"是基于JavaScript实现的一个功能，主要目的是在网页中创建一个可以左右滑动并且能够自动切换的焦点图组件。这种组件通常用于展示一组图片或信息，使得用户能够在...
Swiper是开源、免费、强大的移动端触摸滑动插件，能够实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果，通过本课程可以快速掌握Swiper插件的使用，并通过综合案例讲解在实际工作中的应用。通过多个案例逐一...