基于html5整屏切换IDO智能手表页面滚动代码
2024-10-09 21:08:54
之前为大大家介绍了一款jquery实现的整屏切换特效。今天分享一款IDO智能手表页面滚动html5代码。这是一款基于jQuery+HTML5实现的页面滚动效果代码。效果图如下:
部分代码:
<div class="main" id="main">
<div class="page page1">
<div class="head-pic">
<div style="display: block;" id="showCon0" class="big-pic">
<img src="data:images/img1.png"></A>
</div>
<div style="display: none;" id="showCon1" class="big-pic">
<img src="data:images/img2.png">
</div>
<div style="display: none;" id="showCon2" class="big-pic">
<img src="data:images/img3.png">
</div>
<div style="display: none;" id="showCon3" class="big-pic">
<img src="data:images/img4.png">
</div>
<div style="display: none;" id="showCon4" class="big-pic">
<img src="data:images/img5.png">
</div>
<div style="display: none;" id="showCon5" class="big-pic">
<img src="data:images/img6.png">
</div>
<div style="display: none;" id="showCon6" class="big-pic">
<img src="data:images/img7.png">
</div>
<ul class="small-pic">
<li id="list0" class="on" onmouseover="showContent(0)">
<img alt="颜色" src="data:images/1.jpg"></li>
<li id="list1" onmouseover="showContent(1)">
<img alt="颜色" src="data:images/2.jpg"></li>
<li id="list2" onmouseover="showContent(2)">
<img alt="颜色" src="data:images/3.jpg"></li>
<li id="list3" onmouseover="showContent(3)">
<img alt="颜色" src="data:images/4.jpg"></li>
<li id="list4" onmouseover="showContent(4)">
<img alt="颜色" src="data:images/5.jpg"></li>
<li id="list5" onmouseover="showContent(5)">
<img alt="颜色" src="data:images/6.jpg"></li>
<li id="list6" onmouseover="showContent(6)">
<img alt="颜色" src="data:images/7.jpg"></li>
</ul>
</div>
<div class="icon">
</div>
<script language="javascript"> var current = 0;
var imgNum = 1;
var interval = 0;
function showContent(index) {
var oldTag = document.getElementById("list" + current.toString());
var oldCon = document.getElementById("showCon" + current.toString());
var newTag = document.getElementById("list" + index.toString());
var newCon = document.getElementById("showCon" + index.toString());
if (current != index) {
oldTag.className = "";
oldCon.style.display = "none";
current = index;
newTag.className = "on";
newCon.style.display = "block";
}
}
function setMode(n) {
if (n != null) {
imgNum = n + 1;
}
if (interval == 0) {
interval = setInterval("showTime()", 300000); //时间调整
}
}
function showTime() {
if (imgNum > 7) {
imgNum = 0;
}
showContent(imgNum);
imgNum++;
}
setMode(); </script>
</div>
<div class="page page2">
<div class="txt">
<div class="h2" id="page2_h2">
自动识别运动模式 </div>
<div class="h2_list" id="page2_list">
IDO ONE助您管理运动生活 <br />
通过自动识别您的运动,您可以清楚自己步数,<br />
距离,卡路里消耗,<br />
让生活更智能,便捷,提升生活品质。<br />
</div>
<div class="page2_img1">
<img src="data:images/page2_img1.jpg">
</div>
</div>
<img src="data:images/img2-b.jpg" class="img2-b">
</div>
<div class="page page3">
<div class="txt">
<div class="h3" id="page3_h3">
自动监测睡眠状态 </div>
<div class="h3_list" id="page3_list">
IDO ONE关心您的睡眠状况,助您改善睡眠质量 <br />
通过睡眠数据监测,您可以了解每晚入睡后深度睡眠 <br />
和浅度睡眠时间,还知道您夜晚清醒的次数,<br />
让您更了解入睡的自己,进一步提高睡眠质量。<br />
</div>
<div class="page3_img1">
<img src="data:images/page3_img1.jpg">
</div>
</div>
</div>
<div class="page page4">
<div class="photo w1920-h1080">
<ul>
<li class="one">
<div class="photo-mask" style="opacity: 0.5;">
</div>
<div class="photo-text">
防丢提醒</div>
</li>
<li class="two">
<div class="photo-mask" style="opacity: 0;">
</div>
<div class="photo-text">
久坐提醒</div>
</li>
<li class="three">
<div class="photo-mask" style="opacity: 0.5;">
</div>
<div class="photo-text">
来电提醒</div>
</li>
<li class="four">
<div class="photo-mask" style="opacity: 0.5;">
</div>
<div class="photo-text">
事件提醒</div>
</li>
</ul>
<!--导航-->
</div>
</div>
via:http://www.w2bc.com/Article/33819
最新文章
- 【Java EE 学习 78 上】【数据采集系统第十天】【Service使用Spring缓存模块】
- java中volatile关键字的含义
- fname
- poj 1035 Spell checker
- UVA116 单向 DSP(多段图最短路)
- 转:EF调用存储过程、函数
- -webkit-appearance: none;
- PDFBox创建并打印PDF文件, 以及缩放问题的处理.
- 「mysql优化专题」单表查询优化的一些小总结,非索引设计(3)
- 2017-07-12(touch df du)
- c# 编程语言tag
- HDU 1114
- windows环境安装MySQL
- 深入理解java虚拟机---垃圾回收(十一)
- highcharts多个Y轴
- js调试系列: 控制台命令行API
- Android 集成支付宝第三方登录
- Network File System
- Clean WRH$_ACTIVE_SESSION_HISTORY in SYSAUX
- PHP-php-fpm占用系统资源分析