<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3/5</title>
<script src="http://activity.itcpn.net/shoujijs/common/dojo.js" type="text/javascript"></script>
<script src="http://activity.itcpn.net/shoujijs/common/iscroll.js" type="text/javascript"></script>
<script>
dojo.ready(function(){
new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
}
});
});
</script>
<style>
body{font-size:16px;margin:0;padding:0;height: auto;background: #ffffff;text-align:center;}
*{margin: 0px;padding:0px;}
a {color: #056ea1;text-decoration: none;blr:expression(this.onFocus=this.blur())}
li{ list-style:none;}
a:hover{text-decoration: none;text-decoration: underline;}
img {border:0px;}
/*正文大图滚动----begin ---*/
#nav{ margin:0 auto; width:100%; height:14px;position:absolute;bottom:0px;}
#nav #indicator{width:120px;margin:0px auto;height:14px;}
#nav #indicator li{display:block; float:left; list-style:none; padding:0; margin-right:10px;background:aqua}
#nav #indicator li{ text-indent:-9999em; width:8px; height:8px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background:#ddd; overflow:hidden; }
#nav #indicator li.active{background:#eb862c;}
#nav #indicator li:last-child{ margin:0;}
/*正文大图滚动----end ---*/
.scroller{height:120px;}
.scroller li{float:left;width:320px; height:120px; text-align:center; vertical-align:middle; display:table-cell;}
.scroller li img{width:320px;height:120px;}
/*++++++++++++++++++++++++++*/
.treea{width:320px;height:120px;position:relative;margin:0px auto}
</style>
</head>
<body>
<div class="treea">
<!-- left begin -->
<div id="wrapper">
<div id="scroller" style="width:1920px;" class="scroller">
<ul> <li ><img src="./33.gif" /></li>
<li ><img src="./2.jpg"/></li>
<li ><img src="./3.jpg" /></li>
<li ><img src="./4.jpg" /></li>
<li ><img src="./5.jpg" /></li>
<li ><img src="./6.jpg" /></li>
</ul>
</div>
<div id="nav">
<ul id="indicator">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
<!-- left end -->
</div>
</body>
</html>