自動適應設備的寬度，滑動會切換大圖，底部導航跟隨切換。點擊底部導航切換大圖。使用的jquery_mobile插件，引入1.4.5的插件，CSS表和jquery庫即可，除了ID,CLASS命名可能會和你項目重復，改成單獨即可，其他應該沒有重復的，因為本腳本使用計時器寫的，加入了方法判定，在執行一個方法的時候，鎖定其他方法禁止執行，不會沖突，使用計時器來控制動畫，可能不盡如人意，準備重構一下改成Jquery的animate()方法來執行動畫效果。近期重構好在上傳使用內置方法不用計時器的版本吧。
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="jsmobile/jquery.mobile-1.4.5.min.css"><script src="js/jquery183.min.js"></script><script src="jsmobile/jquery.mobile-1.4.5.min.js"></script><style>ul,li,a,body,div{margin:0px;list-style:none;}#nav li{width:18%;border:1px solid blue;height:50px;line-height:50px;list-style:none;text-align:center;float:left;}.top_jt{width:100px;height:50px;border:1px solid green;text-align:center;line-height:50px;position: fixed;top:800px;left:230px;z-index:1000;box-shadow: 1px 1px 10px #666;}.dingyi{position: fixed;top:0px;z-index:1000;box-shadow: 1px 1px 10px #666;}.p_ul_li{float:left;width:20%;height:20px;border:1px solid black;text-align:center;margin:2%;}.p_ul{width:100%;padding:0px;}.back{background-color:red;color:white;}</style></head><body><div data-role="page" id="pageone" ><!--引用頁頭--><iframe src="header.html" width="100%" height="50" frameborder="0"> </iframe><div data-role="content"><div class="container" id="container" style="width:100%;overflow:hidden;"><div class="content" id="content" style="overflow:hidden;"><div class="service_scope" style="height:300px;background-color:red;float:left;">AAAAAAAAA </div><div class="service_scope" style="height:300px;background-color:blue;float:left;">BBBBBBBBB </div><div class="service_scope" style="height:300px;background-color:green;float:left;">CCCCCCCCC </div><div class="service_scope" style="height:300px;background-color:black;float:left;">DDDDDDDDD </div></div><ul id="p_ul" class="p_ul "><li class="p_ul_li back">A</li><li class="p_ul_li">B</li><li class="p_ul_li">C</li><li class="p_ul_li">D</li></ul></div><script type="text/javascript">//獲取當前設備寬度var body_width = document.body.clientWidth;//當前設備寬度var arr = document.getElementsByClassName("service_scope");//幻燈片數組document.getElementById("content").style.width = body_width * arr.length;//幻燈片的父容器的寬度var i;//全局計數器var zhuangtai = false;//狀態判定，動畫效果執行的時候不能在疊加效果執行，執行完畢才能在執行新的函數var p_ul_li=0;//底部選擇器樣式的計數器var t = 380;//動畫效果執行時間，0.38Svar jishi = 1;//計時器每次執行時間for(i = 0;i < arr.length; i++){arr[i].style.width = body_width;//第一種子元素的寬度，用JS動態取值賦值}$(function(){$(".service_scope").swipeleft(function(){//console.log(p_ul_li);if($(this).index() >= 0 && $(this).index() < arr.length-1 && zhuangtai == false){$left_yidong = setInterval("left_yidong()",jishi);//$(".p_ul_li").eq(p_ul_li).next().addClass("back").siblings().removeClass("back");$(".p_ul_li").eq(p_ul_li).removeClass("back").css({"background-color":"white","color":"black"}).next().css({"background-color":$(this).next().css("background-color"),"color":"white"});p_ul_li++;}if(p_ul_li > arr.length-1){p_ul_li = arr.length-1;}});$(".service_scope").swiperight(function(){//console.log(p_ul_li);if($(this).index() > 0 && $(this).index() <= arr.length-1 && zhuangtai == false){//$(".p_ul_li").eq(p_ul_li).prev().addClass("back").siblings().removeClass("back");$(".p_ul_li").eq(p_ul_li).css({"background-color":"white","color":"black"}).prev().css({"background-color":$(this).prev().css("background-color"),"color":"white"});$right_yidong = setInterval("right_yidong()",jishi);p_ul_li--;}if(p_ul_li < 0){p_ul_li = 0;}});$(".p_ul_li").click(function(){if(zhuangtai == false){//$(this).addClass("back").siblings().removeClass("back");$(this).css({"background-color":$(".service_scope").eq($(this).index()).css("background-color"),"color":"white"}).siblings().removeClass("back").css({"background-color":"white","color":"black"});p_ul_li = $(this).index();switch ($(this).index()){ //此處可以設定更多的值，只需要大于要顯示的元素個數即可。條件就是Int，left就是寬度*對應的Intcase 0 : $("#content").offset({left:0});break; case 1 : $("#content").offset({left:-body_width});break; case 2 : $("#content").offset({left:-body_width*2}); break; case 3 : $("#content").offset({left:-body_width*3}); break; } }});});function left_yidong(){zhuangtai = true;$left = $("#content").position().left;$("#content").offset({left:$left-body_width/t});i++;if(i >= t){clearInterval($left_yidong);zhuangtai = false;i=0;}}function right_yidong(){zhuangtai = true;$left = $("#content").position().left;$("#content").offset({left:$left+body_width/t});i++;if(i >= t){clearInterval($right_yidong);zhuangtai = false;i=0;}}</script></div><!--引用頁尾--><iframe src="footer.html" width="100%" height="50" frameborder="0"> </iframe></div></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
