基于html5整屏切换IDO智能手表页面滚动代码

之前为大大家介绍了一款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">
                    自动识别运动模式&nbsp;</div>
                <div class="h2_list" id="page2_list">
                    IDO ONE助您管理运动生活&nbsp;&nbsp;&nbsp;<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">
                    自动监测睡眠状态&nbsp;</div>
                <div class="h3_list" id="page3_list">
                    IDO ONE关心您的睡眠状况，助您改善睡眠质量&nbsp;&nbsp;&nbsp;<br />
                    通过睡眠数据监测，您可以了解每晚入睡后深度睡眠&nbsp;&nbsp;&nbsp;<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