HTML5实现手机网页焦点图
摘要：支持手机上的所有浏览器
html5代码
运行代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>webkfa.com</title>
<link href="http://mobile.kuwo.cn/mpage/html5/2015/css/html5.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://statics.webkfa.com/js/iscroll.js"></script>
<script type="text/javascript">
function $S(s) {
return document.getElementById(s);
}
var timer=null;
var focustotal=0;
function tjScroll() {
var circle = document.querySelector("#scroller");
img = circle.querySelectorAll("img");
focustotal=img.length;
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
function loaded() {
var v_heigh = parseInt(w * 260 / 620) + "px";
var w_heigh = parseInt(w * 260 / 620);
$S("viewport").style.height = v_heigh;
$S("wrapper").style.height = v_heigh;
$S("scroller").style.height = v_heigh;
$S("scroller").style.width = parseInt(w * img.length) + "px";
for (var i = 0; i < img.length; i++) {
img[i].height = w_heigh;
}
var sWidth = w + "px";
var arr = document.getElementsByTagName("div");
var num = arr.length;
for (var j = 0; j < num; ++j) {
if (arr[j].className == "slide") {
arr[j].style.width = sWidth;
}
}
}
loaded();
if(timer)window.clearInterval(timer);
timer = window.setInterval(focusTime, 5000);
}
function selectyq(index){
var circle = document.querySelector("#tjditBox");
var imgarr = circle.querySelectorAll("img");
for(var i=0;i<imgarr.length;i++){
var obj=imgarr[i];
if(index==i){
obj.src='http://image.kuwo.cn/mpage/html5/2015/tuijian/db.png';
}else{
obj.src='http://image.kuwo.cn/mpage/html5/2015/tuijian/da.png';
}
}
}
function focusTime(){
//if($("#tjpblId").is(":visible") && focus_click_flag){
if(focus_click_flag){
try{myScroll_focus.scrollToPage('next',0);}catch(e){
//alert(e+":focus error:"+myScroll_focus);
insFocusPic();
}
}
}
function clickFocus(index){
if(g_click_flag==0)return;
try{
var fobj=config.focuslst[index];
commonClick(fobj.source,fobj.sourceid,fobj.name,'','','',1,"曲库->热门推荐->焦点图->"+fobj.name);
focus_click_flag=1;
}catch(e){}
}
var myScroll_focus;
var g_click_flag=1;
var focus_click_flag=1;
function insFocusPic(){
myScroll_focus = new iScroll('wrapper', {
snap: true,
bounce:false,
momentum: false,
hScrollbar: false,
onScrollStart:function(){
g_click_flag=1;
focus_click_flag=0;
},
onScrollMove: function () {
g_click_flag=0;
},
onScrollEnd: function () {
try{
setTimeout(cleargclickflag,80);
focus_click_flag=1;
if(this.currPageX==(focustotal-1)){
myScroll_focus.scrollToPage(1,0,0);
}else if(this.currPageX==0){
myScroll_focus.scrollToPage((focustotal-2),0,0);
}else{
selectyq(this.currPageX-1);
}
}catch(e){}
}
});
myScroll_focus.scrollToPage(1,0,0);
tjScroll();
}
function cleargclickflag(){
g_click_flag=1;
}
document.addEventListener('DOMContentLoaded', insFocusPic, false);
</script>
<style type="text/css" media="all">
#scroller {
width:900%;
height:100%;
float:left;
padding:0;
}
</style>
</head>
<body>
<div class="jdPs">
<div id="viewport">
<div id="wrapper">
<div id="scroller">
<div class="slide">
<div class="painting giotto" onclick="clickFocus(0)">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/10/10/1429842004714_.jpg" width="100%" height="130">
</div>
</div>
<div class="slide">
<div class="painting giotto" onclick="clickFocus(0)">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/3/3/1430131361555_.jpg" width="100%" height="130">
</div>
</div>
<div class="slide">
<div class="painting giotto" onclick="clickFocus(1)">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/3/3/1430103988563_.jpg" width="100%" height="130">
</div>
</div>
<div class="slide">
<div class="painting giotto">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/10/10/1429842004714_.jpg" width="100%" height="130">
</div>
</div>
<div class="slide">
<div class="painting giotto">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/3/3/1430131361555_.jpg" width="100%" height="130">
</div>
</div>
<div class="slide">
<div class="painting giotto">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/3/3/1430103988563_.jpg" width="100%" height="130">
</div>
</div>
<div class="slide">
<div class="painting giotto">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/10/10/1429842004714_.jpg" width="100%" height="130">
</div>
</div>
<div class="slide">
<div class="painting giotto">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/3/3/1430131361555_.jpg" width="100%" height="130">
</div>
</div>
<div class="slide">
<div class="painting giotto">
<img src="http://img4.kwcdn.kuwo.cn/star/upload/3/3/1430103988563_.jpg" width="100%" height="130">
</div>
</div>
</div>
</div>
</div>
<p class="ditBox" id="tjditBox" style="z-index: 90">
<a href="javascript:void(0)">
<img src="http://image.kuwo.cn/mpage/html5/2015/tuijian/da.png" width="80%">
</a>
<a href="javascript:void(0)">
<img src="http://image.kuwo.cn/mpage/html5/2015/tuijian/da.png" width="80%">
</a>
<a href="javascript:void(0)">
<img src="http://image.kuwo.cn/mpage/html5/2015/tuijian/db.png" width="80%">
</a>
<a href="javascript:void(0)">
<img src="http://image.kuwo.cn/mpage/html5/2015/tuijian/da.png" width="80%">
</a>
<a href="javascript:void(0)">
<img src="http://image.kuwo.cn/mpage/html5/2015/tuijian/da.png" width="80%">
</a>
<a href="javascript:void(0)">
<img src="http://image.kuwo.cn/mpage/html5/2015/tuijian/da.png" width="80%">
</a>
<a href="javascript:void(0)">
<img src="http://image.kuwo.cn/mpage/html5/2015/tuijian/da.png" width="80%">
</a>
</p>
</div>
</body>
</html>
相关文章