欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS 移动端的焦点图切换加载 博客分类: 境-JS JS焦点图H5焦点图焦点图手机焦点图 

程序员文章站 2024-03-25 23:25:28
...
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/TouchSlide.1.0.js"></script>
<style>
.focus{ width:320px; height:140px;  margin:40px auto 0 auto; position:relative; overflow:hidden;}
.focus .hd{ width:100%; height:11px;  position:absolute; z-index:1; bottom:5px; text-align:center;}
.focus .hd ul{ display:inline-block; height:5px; padding:3px 5px; background-color:rgba(255,255,255,0.7); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-size:0; vertical-align:top;}
.focus .hd ul li{ display:inline-block; width:5px; height:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#8C8C8C; margin:0 5px;  vertical-align:top; overflow:hidden;}
.focus .hd ul .on{ background:#FE6C9C;}

.focus .bd{ position:relative; z-index:0; }
.focus .bd li img{ width:100%;  height:140px; background:url(img/loading.gif) center center no-repeat;  }
.focus .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
</style>
</head>
<body>
<div id="focus" class="focus">
	<div class="hd">
		<ul></ul>
	</div>
	<div class="bd">
		<ul>
			<li><a href="#"><img _src="img/m1.jpg" src="img/blank.png" /></a></li>
			<li><a href="#"><img _src="img/m2.jpg" src="img/blank.png"/></a></li>
			<li><a href="#"><img _src="img/m3.jpg" src="img/blank.png"/></a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
	TouchSlide({ 
		slideCell:"#focus",
		titCell:".hd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
		mainCell:".bd ul", 
		effect:"left", 
		autoPlay:true,//自动播放
		autoPage:true, //自动分页
		switchLoad:"_src" //切换加载,真实图片路径为"_src" 
	});
</script>
</body>
</html>

 

效果图(切换加载图片):
JS 移动端的焦点图切换加载
            
    
    博客分类: 境-JS JS焦点图H5焦点图焦点图手机焦点图 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • JS 移动端的焦点图切换加载
            
    
    博客分类: 境-JS JS焦点图H5焦点图焦点图手机焦点图 
  • 大小: 100 KB