iscroll做bannar(一般用作广告)
1、只需要改变#wrapper ul li的width和height来适应你自己的要求，以及#wrapper的margin（默认margin-top:0;margin-left:居中）
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="js/common/jquery-1.7.1.min.js"></script> <script src="js/iscroll.js"></script> <title>title</title> <style> *{padding:0;margin:0;font-family:"微软雅黑";} html, body {height: 100%;width: 100%;} body{text-align:center;font-size:12px;float: left;width: 100%;} li{list-style-type:none;} a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} #wrapper{overflow: hidden;} #wrapper ul{background-color:red;} #wrapper ul li{width:300px;height:148px;float:left;overflow:hidden;} #wrapper ul li:nth-child(1){background-color:#ffff00;} #wrapper ul li:nth-child(2){background-color:#0000ff;} #wrapper ul li:nth-child(3){background-color:#008000;} #wrapper ul li:nth-child(4){background-color:orange;} #wrapper ul li img{width:100%;} </style> </head> <body> <section id="wrapper"> <ul> <li><img src="images/test1.png"></li> <li><img src="images/test2.jpg"></li> <li><img src="images/test1.png"></li> <li><img src="images/test2.jpg"></li> </ul> </section> </body> <script type="text/javascript"> var screenWidth = document.documentElement.clientHeight < document.documentElement.offsetHeight?document.documentElement.clientWidth:document.documentElement.offsetWidth; $(function(){ LI_touchHandle("#wrapper ul li",function(obj){ liAction(obj); }); }); window.onload=function(){ LI_setScroll("wrapper",1); } //li的触发事件 function liAction(obj){ alert($(obj).html()); } </script> <!-- 辅助函数 在li-jquery-common.js中都有 --> <script type="text/javascript"> /* * 横向的滑动栏都可以使用，但是注意：只能在一个块级元素中放ul li * showCount:显示li的个数 * */ function LI_setScroll(id,showCount){ var wrapper = $("#"+id); var li =wrapper.children("ul").children("li"); var left = li.eq(1).css("marginLeft"); var count = li.size(); var borderWidth = li.css("borderWidth"); var height; left = LI_delXp(left); borderWidth = LI_delXp(borderWidth); height = borderWidth*2+li.height(); wrapper.children("ul").width(li.width()*count+left*(count-1)+borderWidth*count*2); wrapper.children("ul").height(height); wrapper.width(li.width()*showCount+left*(showCount-1)+borderWidth*showCount*2); wrapper.height(height); wrapper.css({"margin-left":(screenWidth-wrapper.width())/2+"px"}); var myScroll = new iScroll(id, { snap:"#"+id+" ul li", momentum: false, hScrollbar: false }); } /* * 去除长度单位，返回整型, 如"13px" 返回 13 * */ function LI_delXp(str){ if(str.length>2) return parseInt(str.substring(0,str.length-2)); else return alert(str+":是个错误格式的参数"); } /* touchmove和touchend的冲突解决方案 识别pc和移动设备，pc设备用click事件触发，移动设备用touch事件触发 */ function LI_touchHandle(li,touchAction){ var dragging = false; if(LI_isPC()){ $(li).mousemove(function(){ dragging = true; }); $(li).mouseup(function(){ if(dragging) return; else{ touchAction(this); } }); $(li).mousedown(function(){ dragging = false; }); }else{ $(li).on("touchmove",function(){ dragging = true; }); $(li).on("touchend",function(){ if(dragging) return; else{ touchAction(this); } }); $(li).on("touchstart",function(){ dragging = false; }); } } /* * 判断是否pc设备或者手持设备 * */ function LI_isPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; } </script> </html>
优点：1、可以选择你想要显示li的个数。（默认是1，也是最常用的）
2、可以识别手机和pc
3、使用了touchmove和touchend的冲突解决方案
4、li的触发事件以为您写好了
以"LI_"开头的都是我自定义的方法，有关这样的方法我还有很多，都是手机web开发常用的。如果需要请q我：841538513
这是另外一种广告栏的方法，也很好用，但不是我写的，我只是改了一下，你们也可以借鉴。
一共三个文件,index.html,imageSwipe_IScroll_2.css,bannar.js，代码通俗易懂
注意： 1、<body onload="bannar();">在body加载完了刷新，防止界面乱了。
index.html
<!DOCTYPE html> <!-- saved from url=(0052)http://cubiq.org/dropbox/iscroll4/examples/carousel/ --> <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"> <title>bannerdemo</title> <script type="text/javascript" src="js/iscroll.js"></script> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/bannar.js"></script> <link rel="stylesheet" type="text/css" href="css/imageSwipe_IScroll_2.css" /> </head> <body onload="bannar();"> <div id="wrapper" style="overflow: hidden;"> <div id="scroller" style="-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(-1800px, 0px) scale(1) translateZ(0px);"> <ul id="thelist"> <li><img src="images/activity1.png" /></li> <li><img src="images/activity2.png" /></li> <li><img src="images/activity1.png" /></li> </ul> </div> </div> <div id="nav"> <ul id="indicator"> <li class="">1</li> <li class="">2</li> <li class="active">3</li> </ul> </div> </body> <script type="text/javascript"> $(document).ready(function(){ bannar(); $("#thelist li").on("click",function(){ liAction(this); }); }); //监听浏览器的变化 window.onresize = function(){ bannar(); } //bannar触发事件 function liAction(obj){ var content = $(obj).html(); console.log(content); } function bannar(){ setBannar(0.86,0.47,'20px','7%');//该方法在bannar.js文件中 } </script> </html>
imageSwipe_IScroll_2.css
body,ul,li { margin:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } #wrapper { width:100%; float:left; position:relative; /* On older OS versions "position" and "z-index" must be defined, */ z-index:1; /* it seems that recent webkit is less picky and works anyway. */ overflow:hidden; background:#aaa; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px; background:#e3e3e3; } #scroller { height:100%; float:left; padding:0; } #scroller ul { list-style:none; display:block; float:left; height:100%; padding:0; margin:0; text-align:left; } #scroller li { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; display:block; float:left; text-align:center; font-family:georgia; font-size:18px; line-height:140%; } #thelist li img{ width:100%; } #nav { float:right; position: relative; z-index: 1; } #indicator, #indicator > li { display:block; float:left; list-style:none; padding:0; margin:0; } #indicator { width:110px; padding:12px 0 0 30px; } #indicator > li { text-indent:-9999em; width:8px; height:8px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:#ddd; overflow:hidden; margin-right:4px; } #indicator > li.active { background:#888; } #indicator > li:last-child { margin:0; }
bannar.js
/** * Created by Administrator on 14-4-18. */ /* * 参数说明： * width是相对屏幕可视区域宽的比例,如:0.86 * height是相对width的比例,如：0.47 * top,left是margin-top,margin-left的值,如:'7%','20px'（注意这里要加引号，建议加单引号） * */ function setBannar (width,height,top,left) { //screenWidth宽度为可视区域的宽度（否则界面会乱） var screenWidth = document.documentElement.clientHeight < document.documentElement.offsetHeight?document.documentElement.clientWidth:document.documentElement.offsetWidth; var ul = document.getElementById("thelist"); var li = ul.getElementsByTagName("li"); var liCount = li.length; var wrapperWidth = parseInt(screenWidth*width);//这里取整很重要，否则会出现细微的差别 var wrapperHeight = wrapperWidth*height; $("#wrapper").width(wrapperWidth); $("#wrapper").height(wrapperHeight); $("#wrapper").css({"margin-left":left,"margin-top":top}); $("#scroller").width(wrapperWidth*liCount); for(var i = 0; i<liCount; i++){ li[i].style.width = wrapperWidth+"px"; li[i].style.height = wrapperWidth*height+"px";//图片的标准100:47 } setNav(screenWidth,wrapperWidth); setScroll(); } function setNav(screenWidth,wrapperWidth){ var navTop = -20 - wrapperWidth*0.03; var navRight = (screenWidth-wrapperWidth)/2+wrapperWidth*0.05; $("#nav").css({"margin-top":navTop,"margin-right":navRight}); } function setScroll(){ var myScroll = 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'; } }); }
