基于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='/images/loading.gif' data-original="images/img1.png"></A>        </div>        <div style="display: none;" id="showCon1" class="big-pic">          <img src='/images/loading.gif' data-original="images/img2.png">        </div>        <div style="display: none;" id="showCon2" class="big-pic">          <img src='/images/loading.gif' data-original="images/img3.png">        </div>        <div style="display: none;" id="showCon3" class="big-pic">          <img src='/images/loading.gif' data-original="images/img4.png">        </div>        <div style="display: none;" id="showCon4" class="big-pic">          <img src='/images/loading.gif' data-original="images/img5.png">        </div>        <div style="display: none;" id="showCon5" class="big-pic">          <img src='/images/loading.gif' data-original="images/img6.png">        </div>        <div style="display: none;" id="showCon6" class="big-pic">          <img src='/images/loading.gif' data-original="images/img7.png">        </div>        <ul class="small-pic">          <li id="list0" class="on" onmouseover="showContent(0)">            <img  src='/images/loading.gif' data-original="images/1.jpg"></li>          <li id="list1" onmouseover="showContent(1)">            <img  src='/images/loading.gif' data-original="images/2.jpg"></li>          <li id="list2" onmouseover="showContent(2)">            <img  src='/images/loading.gif' data-original="images/3.jpg"></li>          <li id="list3" onmouseover="showContent(3)">            <img  src='/images/loading.gif' data-original="images/4.jpg"></li>          <li id="list4" onmouseover="showContent(4)">            <img  src='/images/loading.gif' data-original="images/5.jpg"></li>          <li id="list5" onmouseover="showContent(5)">            <img  src='/images/loading.gif' data-original="images/6.jpg"></li>          <li id="list6" onmouseover="showContent(6)">            <img  src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="images/page2_img1.jpg">        </div>      </div>      <img src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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>

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

关键词：HTML