HTML5实现动画轮播和手势控制

用了iframe添加了一个轮播页面进来 ：

<a target=_blank id="L1" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L1" rel="#L1" style="color: rgb(102, 102, 102); text-decoration: none;"> 1</a> <a target=_blank id="L2" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L2" rel="#L2" style="color: rgb(102, 102, 102); text-decoration: none;"> 2</a> <a target=_blank id="L3" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L3" rel="#L3" style="color: rgb(102, 102, 102); text-decoration: none;"> 3</a> <a target=_blank id="L4" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L4" rel="#L4" style="color: rgb(102, 102, 102); text-decoration: none;"> 4</a> <a target=_blank id="L5" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L5" rel="#L5" style="color: rgb(102, 102, 102); text-decoration: none;"> 5</a> <a target=_blank id="L6" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L6" rel="#L6" style="color: rgb(102, 102, 102); text-decoration: none;"> 6</a> <a target=_blank id="L7" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L7" rel="#L7" style="color: rgb(102, 102, 102); text-decoration: none;"> 7</a> <a target=_blank id="L8" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L8" rel="#L8" style="color: rgb(102, 102, 102); text-decoration: none;"> 8</a> <a target=_blank id="L9" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L9" rel="#L9" style="color: rgb(102, 102, 102); text-decoration: none;"> 9</a> <a target=_blank id="L10" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L10" rel="#L10" style="color: rgb(102, 102, 102); text-decoration: none;"> 10</a> <a target=_blank id="L11" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L11" rel="#L11" style="color: rgb(102, 102, 102); text-decoration: none;"> 11</a> <a target=_blank id="L12" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L12" rel="#L12" style="color: rgb(102, 102, 102); text-decoration: none;"> 12</a> <a target=_blank id="L13" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L13" rel="#L13" style="color: rgb(102, 102, 102); text-decoration: none;"> 13</a> <a target=_blank id="L14" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L14" rel="#L14" style="color: rgb(102, 102, 102); text-decoration: none;"> 14</a> <a target=_blank id="L15" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L15" rel="#L15" style="color: rgb(102, 102, 102); text-decoration: none;"> 15</a> <a target=_blank id="L16" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L16" rel="#L16" style="color: rgb(102, 102, 102); text-decoration: none;"> 16</a> <a target=_blank id="L17" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L17" rel="#L17" style="color: rgb(102, 102, 102); text-decoration: none;"> 17</a> <a target=_blank id="L18" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L18" rel="#L18" style="color: rgb(102, 102, 102); text-decoration: none;"> 18</a> <a target=_blank id="L19" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L19" rel="#L19" style="color: rgb(102, 102, 102); text-decoration: none;"> 19</a> <a target=_blank id="L20" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L20" rel="#L20" style="color: rgb(102, 102, 102); text-decoration: none;"> 20</a> <a target=_blank id="L21" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L21" rel="#L21" style="color: rgb(102, 102, 102); text-decoration: none;"> 21</a> <a target=_blank id="L22" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L22" rel="#L22" style="color: rgb(102, 102, 102); text-decoration: none;"> 22</a> <a target=_blank id="L23" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L23" rel="#L23" style="color: rgb(102, 102, 102); text-decoration: none;"> 23</a> <a target=_blank id="L24" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L24" rel="#L24" style="color: rgb(102, 102, 102); text-decoration: none;"> 24</a> <a target=_blank id="L25" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L25" rel="#L25" style="color: rgb(102, 102, 102); text-decoration: none;"> 25</a> <a target=_blank id="L26" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L26" rel="#L26" style="color: rgb(102, 102, 102); text-decoration: none;"> 26</a> <a target=_blank id="L27" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L27" rel="#L27" style="color: rgb(102, 102, 102); text-decoration: none;"> 27</a> <a target=_blank id="L28" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L28" rel="#L28" style="color: rgb(102, 102, 102); text-decoration: none;"> 28</a> <a target=_blank id="L29" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L29" rel="#L29" style="color: rgb(102, 102, 102); text-decoration: none;"> 29</a> <a target=_blank id="L30" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L30" rel="#L30" style="color: rgb(102, 102, 102); text-decoration: none;"> 30</a> <a target=_blank id="L31" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L31" rel="#L31" style="color: rgb(102, 102, 102); text-decoration: none;"> 31</a> <a target=_blank id="L32" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L32" rel="#L32" style="color: rgb(102, 102, 102); text-decoration: none;"> 32</a> <a target=_blank id="L33" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L33" rel="#L33" style="color: rgb(102, 102, 102); text-decoration: none;"> 33</a> <a target=_blank id="L34" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L34" rel="#L34" style="color: rgb(102, 102, 102); text-decoration: none;"> 34</a> <a target=_blank id="L35" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L35" rel="#L35" style="color: rgb(102, 102, 102); text-decoration: none;"> 35</a> <a target=_blank id="L36" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L36" rel="#L36" style="color: rgb(102, 102, 102); text-decoration: none;"> 36</a> <a target=_blank id="L37" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L37" rel="#L37" style="color: rgb(102, 102, 102); text-decoration: none;"> 37</a> <a target=_blank id="L38" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L38" rel="#L38" style="color: rgb(102, 102, 102); text-decoration: none;"> 38</a> <a target=_blank id="L39" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L39" rel="#L39" style="color: rgb(102, 102, 102); text-decoration: none;"> 39</a> <a target=_blank id="L40" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L40" rel="#L40" style="color: rgb(102, 102, 102); text-decoration: none;"> 40</a> <a target=_blank id="L41" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L41" rel="#L41" style="color: rgb(102, 102, 102); text-decoration: none;"> 41</a> <a target=_blank id="L42" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L42" rel="#L42" style="color: rgb(102, 102, 102); text-decoration: none;"> 42</a> <a target=_blank id="L43" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L43" rel="#L43" style="color: rgb(102, 102, 102); text-decoration: none;"> 43</a> <a target=_blank id="L44" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L44" rel="#L44" style="color: rgb(102, 102, 102); text-decoration: none;"> 44</a> <a target=_blank id="L45" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L45" rel="#L45" style="color: rgb(102, 102, 102); text-decoration: none;"> 45</a> <a target=_blank id="L46" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L46" rel="#L46" style="color: rgb(102, 102, 102); text-decoration: none;"> 46</a> <a target=_blank id="L47" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L47" rel="#L47" style="color: rgb(102, 102, 102); text-decoration: none;"> 47</a> <a target=_blank id="L48" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L48" rel="#L48" style="color: rgb(102, 102, 102); text-decoration: none;"> 48</a> <a target=_blank id="L49" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L49" rel="#L49" style="color: rgb(102, 102, 102); text-decoration: none;"> 49</a> <a target=_blank id="L50" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L50" rel="#L50" style="color: rgb(102, 102, 102); text-decoration: none;"> 50</a> <a target=_blank id="L51" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L51" rel="#L51" style="color: rgb(102, 102, 102); text-decoration: none;"> 51</a> <a target=_blank id="L52" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L52" rel="#L52" style="color: rgb(102, 102, 102); text-decoration: none;"> 52</a> <a target=_blank id="L53" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L53" rel="#L53" style="color: rgb(102, 102, 102); text-decoration: none;"> 53</a> <a target=_blank id="L54" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L54" rel="#L54" style="color: rgb(102, 102, 102); text-decoration: none;"> 54</a> <a target=_blank id="L55" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L55" rel="#L55" style="color: rgb(102, 102, 102); text-decoration: none;"> 55</a> <a target=_blank id="L56" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L56" rel="#L56" style="color: rgb(102, 102, 102); text-decoration: none;"> 56</a> <a target=_blank id="L57" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L57" rel="#L57" style="color: rgb(102, 102, 102); text-decoration: none;"> 57</a> <a target=_blank id="L58" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L58" rel="#L58" style="color: rgb(102, 102, 102); text-decoration: none;"> 58</a> <a target=_blank id="L59" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L59" rel="#L59" style="color: rgb(102, 102, 102); text-decoration: none;"> 59</a> <a target=_blank id="L60" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L60" rel="#L60" style="color: rgb(102, 102, 102); text-decoration: none;"> 60</a> <a target=_blank id="L61" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L61" rel="#L61" style="color: rgb(102, 102, 102); text-decoration: none;"> 61</a> <a target=_blank id="L62" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L62" rel="#L62" style="color: rgb(102, 102, 102); text-decoration: none;"> 62</a> <a target=_blank id="L63" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L63" rel="#L63" style="color: rgb(102, 102, 102); text-decoration: none;"> 63</a> <a target=_blank id="L64" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L64" rel="#L64" style="color: rgb(102, 102, 102); text-decoration: none;"> 64</a> <a target=_blank id="L65" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L65" rel="#L65" style="color: rgb(102, 102, 102); text-decoration: none;"> 65</a> <a target=_blank id="L66" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L66" rel="#L66" style="color: rgb(102, 102, 102); text-decoration: none;"> 66</a> <a target=_blank id="L67" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L67" rel="#L67" style="color: rgb(102, 102, 102); text-decoration: none;"> 67</a> <a target=_blank id="L68" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L68" rel="#L68" style="color: rgb(102, 102, 102); text-decoration: none;"> 68</a> <a target=_blank id="L69" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L69" rel="#L69" style="color: rgb(102, 102, 102); text-decoration: none;"> 69</a> <a target=_blank id="L70" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L70" rel="#L70" style="color: rgb(102, 102, 102); text-decoration: none;"> 70</a> <a target=_blank id="L71" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L71" rel="#L71" style="color: rgb(102, 102, 102); text-decoration: none;"> 71</a> <a target=_blank id="L72" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L72" rel="#L72" style="color: rgb(102, 102, 102); text-decoration: none;"> 72</a> <a target=_blank id="L73" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L73" rel="#L73" style="color: rgb(102, 102, 102); text-decoration: none;"> 73</a> <a target=_blank id="L74" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L74" rel="#L74" style="color: rgb(102, 102, 102); text-decoration: none;"> 74</a> <a target=_blank id="L75" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L75" rel="#L75" style="color: rgb(102, 102, 102); text-decoration: none;"> 75</a> <a target=_blank id="L76" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L76" rel="#L76" style="color: rgb(102, 102, 102); text-decoration: none;"> 76</a> <a target=_blank id="L77" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L77" rel="#L77" style="color: rgb(102, 102, 102); text-decoration: none;"> 77</a> <a target=_blank id="L78" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L78" rel="#L78" style="color: rgb(102, 102, 102); text-decoration: none;"> 78</a> <a target=_blank id="L79" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L79" rel="#L79" style="color: rgb(102, 102, 102); text-decoration: none;"> 79</a> <a target=_blank id="L80" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L80" rel="#L80" style="color: rgb(102, 102, 102); text-decoration: none;"> 80</a> <a target=_blank id="L81" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L81" rel="#L81" style="color: rgb(102, 102, 102); text-decoration: none;"> 81</a> <a target=_blank id="L82" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L82" rel="#L82" style="color: rgb(102, 102, 102); text-decoration: none;"> 82</a> <a target=_blank id="L83" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L83" rel="#L83" style="color: rgb(102, 102, 102); text-decoration: none;"> 83</a> <a target=_blank id="L84" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L84" rel="#L84" style="color: rgb(102, 102, 102); text-decoration: none;"> 84</a> <a target=_blank id="L85" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L85" rel="#L85" style="color: rgb(102, 102, 102); text-decoration: none;"> 85</a> <a target=_blank id="L86" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L86" rel="#L86" style="color: rgb(102, 102, 102); text-decoration: none;"> 86</a> <a target=_blank id="L87" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L87" rel="#L87" style="color: rgb(102, 102, 102); text-decoration: none;"> 87</a> <a target=_blank id="L88" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L88" rel="#L88" style="color: rgb(102, 102, 102); text-decoration: none;"> 88</a>

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv= "content-type" content= "text/html; charset=UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" > <link href= "css/bootstrap.min.css" rel= "stylesheet" media= "screen" > <link href= "css/bootstrap-responsive.min.css" rel= "stylesheet" type= "text/css" > <script src= "js/jquery-2.1.1.js" type= "text/javascript" ></script> <script src= "js/bootstrap.min.js" type= "text/javascript" ></script> <style type= "text/css" > body , table , iframe , #myCarousel { padding : 0 ; margin : 0 ; } table { width : 100 % ; } .left { float : left ; width : 30px ; height : 30px ; } .right { float : right ; width : 30px ; height : 30px ; } .top { width : 100 % ; background-color : #f4f4f4 ; padding : 0 ; margin : 0 ; } </style> <script type= "text/javascript" > $ ( function () { var w = $ ( "iframe" ). width (); var h = w * 500 / 1080 ; $ ( "iframe" ). height ( h ); }); </script> </head> <body> <table class= "table" > <tr> <td class= "top" id= "11" > <img class= "left" src= "img/home.png" > <img class= "right" src= "img/cart.png" > </td> </tr> <tr> <td class= "top" > <img class= "left" src= "img/user.png" > <img class= "right" src= "img/code.png" > </td> </tr> </table> <iframe src= "1.html" width= "100%" height= "160px" frameborder= "0" ></iframe> <table class= "table table-bordered" style= "margin: 0;padding: 0;" > <tr> <td rowspan= "2" style= "line-height: 56px;" ><a href= "http://www.baidu.com/" > 旗舰产品 </a> </td> <td><a href= "http://www.baidu.com/" > 金牛 </a> </td> </tr> <tr> <td><a href= "http://www.baidu.com/" > 爆软 </a> </td> </tr> <tr> <td colspan= "2" ><a href= "http://www.baidu.com/" > 第三方 </a> </td> </tr> <tr> <td colspan= "2" ><a href= "http://www.baidu.com/" > 充值 </a> </td> </tr> </table> </body> </html>

 来自CODE的代码片

index.html

     下面为轮播页面的框架和手势触摸控制，也是整个index.html中的iframe：

<a target=_blank id="L1" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L1" rel="#L1" style="color: rgb(102, 102, 102); text-decoration: none;"> 1</a> <a target=_blank id="L2" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L2" rel="#L2" style="color: rgb(102, 102, 102); text-decoration: none;"> 2</a> <a target=_blank id="L3" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L3" rel="#L3" style="color: rgb(102, 102, 102); text-decoration: none;"> 3</a> <a target=_blank id="L4" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L4" rel="#L4" style="color: rgb(102, 102, 102); text-decoration: none;"> 4</a> <a target=_blank id="L5" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L5" rel="#L5" style="color: rgb(102, 102, 102); text-decoration: none;"> 5</a> <a target=_blank id="L6" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L6" rel="#L6" style="color: rgb(102, 102, 102); text-decoration: none;"> 6</a> <a target=_blank id="L7" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L7" rel="#L7" style="color: rgb(102, 102, 102); text-decoration: none;"> 7</a> <a target=_blank id="L8" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L8" rel="#L8" style="color: rgb(102, 102, 102); text-decoration: none;"> 8</a> <a target=_blank id="L9" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L9" rel="#L9" style="color: rgb(102, 102, 102); text-decoration: none;"> 9</a> <a target=_blank id="L10" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L10" rel="#L10" style="color: rgb(102, 102, 102); text-decoration: none;"> 10</a> <a target=_blank id="L11" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L11" rel="#L11" style="color: rgb(102, 102, 102); text-decoration: none;"> 11</a> <a target=_blank id="L12" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L12" rel="#L12" style="color: rgb(102, 102, 102); text-decoration: none;"> 12</a> <a target=_blank id="L13" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L13" rel="#L13" style="color: rgb(102, 102, 102); text-decoration: none;"> 13</a> <a target=_blank id="L14" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L14" rel="#L14" style="color: rgb(102, 102, 102); text-decoration: none;"> 14</a> <a target=_blank id="L15" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L15" rel="#L15" style="color: rgb(102, 102, 102); text-decoration: none;"> 15</a> <a target=_blank id="L16" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L16" rel="#L16" style="color: rgb(102, 102, 102); text-decoration: none;"> 16</a> <a target=_blank id="L17" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L17" rel="#L17" style="color: rgb(102, 102, 102); text-decoration: none;"> 17</a> <a target=_blank id="L18" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L18" rel="#L18" style="color: rgb(102, 102, 102); text-decoration: none;"> 18</a> <a target=_blank id="L19" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L19" rel="#L19" style="color: rgb(102, 102, 102); text-decoration: none;"> 19</a> <a target=_blank id="L20" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L20" rel="#L20" style="color: rgb(102, 102, 102); text-decoration: none;"> 20</a> <a target=_blank id="L21" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L21" rel="#L21" style="color: rgb(102, 102, 102); text-decoration: none;"> 21</a> <a target=_blank id="L22" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L22" rel="#L22" style="color: rgb(102, 102, 102); text-decoration: none;"> 22</a> <a target=_blank id="L23" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L23" rel="#L23" style="color: rgb(102, 102, 102); text-decoration: none;"> 23</a> <a target=_blank id="L24" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L24" rel="#L24" style="color: rgb(102, 102, 102); text-decoration: none;"> 24</a> <a target=_blank id="L25" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L25" rel="#L25" style="color: rgb(102, 102, 102); text-decoration: none;"> 25</a> <a target=_blank id="L26" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L26" rel="#L26" style="color: rgb(102, 102, 102); text-decoration: none;"> 26</a> <a target=_blank id="L27" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L27" rel="#L27" style="color: rgb(102, 102, 102); text-decoration: none;"> 27</a> <a target=_blank id="L28" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L28" rel="#L28" style="color: rgb(102, 102, 102); text-decoration: none;"> 28</a> <a target=_blank id="L29" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L29" rel="#L29" style="color: rgb(102, 102, 102); text-decoration: none;"> 29</a> <a target=_blank id="L30" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L30" rel="#L30" style="color: rgb(102, 102, 102); text-decoration: none;"> 30</a> <a target=_blank id="L31" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L31" rel="#L31" style="color: rgb(102, 102, 102); text-decoration: none;"> 31</a> <a target=_blank id="L32" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L32" rel="#L32" style="color: rgb(102, 102, 102); text-decoration: none;"> 32</a> <a target=_blank id="L33" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L33" rel="#L33" style="color: rgb(102, 102, 102); text-decoration: none;"> 33</a> <a target=_blank id="L34" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L34" rel="#L34" style="color: rgb(102, 102, 102); text-decoration: none;"> 34</a> <a target=_blank id="L35" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L35" rel="#L35" style="color: rgb(102, 102, 102); text-decoration: none;"> 35</a> <a target=_blank id="L36" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L36" rel="#L36" style="color: rgb(102, 102, 102); text-decoration: none;"> 36</a> <a target=_blank id="L37" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L37" rel="#L37" style="color: rgb(102, 102, 102); text-decoration: none;"> 37</a> <a target=_blank id="L38" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L38" rel="#L38" style="color: rgb(102, 102, 102); text-decoration: none;"> 38</a> <a target=_blank id="L39" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L39" rel="#L39" style="color: rgb(102, 102, 102); text-decoration: none;"> 39</a> <a target=_blank id="L40" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L40" rel="#L40" style="color: rgb(102, 102, 102); text-decoration: none;"> 40</a> <a target=_blank id="L41" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L41" rel="#L41" style="color: rgb(102, 102, 102); text-decoration: none;"> 41</a> <a target=_blank id="L42" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L42" rel="#L42" style="color: rgb(102, 102, 102); text-decoration: none;"> 42</a> <a target=_blank id="L43" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L43" rel="#L43" style="color: rgb(102, 102, 102); text-decoration: none;"> 43</a> <a target=_blank id="L44" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L44" rel="#L44" style="color: rgb(102, 102, 102); text-decoration: none;"> 44</a> <a target=_blank id="L45" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L45" rel="#L45" style="color: rgb(102, 102, 102); text-decoration: none;"> 45</a> <a target=_blank id="L46" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L46" rel="#L46" style="color: rgb(102, 102, 102); text-decoration: none;"> 46</a> <a target=_blank id="L47" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L47" rel="#L47" style="color: rgb(102, 102, 102); text-decoration: none;"> 47</a> <a target=_blank id="L48" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L48" rel="#L48" style="color: rgb(102, 102, 102); text-decoration: none;"> 48</a> <a target=_blank id="L49" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L49" rel="#L49" style="color: rgb(102, 102, 102); text-decoration: none;"> 49</a> <a target=_blank id="L50" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L50" rel="#L50" style="color: rgb(102, 102, 102); text-decoration: none;"> 50</a> <a target=_blank id="L51" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L51" rel="#L51" style="color: rgb(102, 102, 102); text-decoration: none;"> 51</a> <a target=_blank id="L52" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L52" rel="#L52" style="color: rgb(102, 102, 102); text-decoration: none;"> 52</a> <a target=_blank id="L53" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L53" rel="#L53" style="color: rgb(102, 102, 102); text-decoration: none;"> 53</a> <a target=_blank id="L54" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L54" rel="#L54" style="color: rgb(102, 102, 102); text-decoration: none;"> 54</a> <a target=_blank id="L55" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L55" rel="#L55" style="color: rgb(102, 102, 102); text-decoration: none;"> 55</a> <a target=_blank id="L56" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L56" rel="#L56" style="color: rgb(102, 102, 102); text-decoration: none;"> 56</a> <a target=_blank id="L57" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L57" rel="#L57" style="color: rgb(102, 102, 102); text-decoration: none;"> 57</a> <a target=_blank id="L58" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L58" rel="#L58" style="color: rgb(102, 102, 102); text-decoration: none;"> 58</a> <a target=_blank id="L59" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L59" rel="#L59" style="color: rgb(102, 102, 102); text-decoration: none;"> 59</a> <a target=_blank id="L60" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L60" rel="#L60" style="color: rgb(102, 102, 102); text-decoration: none;"> 60</a> <a target=_blank id="L61" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L61" rel="#L61" style="color: rgb(102, 102, 102); text-decoration: none;"> 61</a> <a target=_blank id="L62" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L62" rel="#L62" style="color: rgb(102, 102, 102); text-decoration: none;"> 62</a> <a target=_blank id="L63" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L63" rel="#L63" style="color: rgb(102, 102, 102); text-decoration: none;"> 63</a> <a target=_blank id="L64" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L64" rel="#L64" style="color: rgb(102, 102, 102); text-decoration: none;"> 64</a> <a target=_blank id="L65" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L65" rel="#L65" style="color: rgb(102, 102, 102); text-decoration: none;"> 65</a> <a target=_blank id="L66" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L66" rel="#L66" style="color: rgb(102, 102, 102); text-decoration: none;"> 66</a> <a target=_blank id="L67" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L67" rel="#L67" style="color: rgb(102, 102, 102); text-decoration: none;"> 67</a> <a target=_blank id="L68" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L68" rel="#L68" style="color: rgb(102, 102, 102); text-decoration: none;"> 68</a> <a target=_blank id="L69" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L69" rel="#L69" style="color: rgb(102, 102, 102); text-decoration: none;"> 69</a> <a target=_blank id="L70" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L70" rel="#L70" style="color: rgb(102, 102, 102); text-decoration: none;"> 70</a> <a target=_blank id="L71" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L71" rel="#L71" style="color: rgb(102, 102, 102); text-decoration: none;"> 71</a> <a target=_blank id="L72" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L72" rel="#L72" style="color: rgb(102, 102, 102); text-decoration: none;"> 72</a> <a target=_blank id="L73" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L73" rel="#L73" style="color: rgb(102, 102, 102); text-decoration: none;"> 73</a> <a target=_blank id="L74" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L74" rel="#L74" style="color: rgb(102, 102, 102); text-decoration: none;"> 74</a> <a target=_blank id="L75" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L75" rel="#L75" style="color: rgb(102, 102, 102); text-decoration: none;"> 75</a> <a target=_blank id="L76" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L76" rel="#L76" style="color: rgb(102, 102, 102); text-decoration: none;"> 76</a> <a target=_blank id="L77" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L77" rel="#L77" style="color: rgb(102, 102, 102); text-decoration: none;"> 77</a> <a target=_blank id="L78" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L78" rel="#L78" style="color: rgb(102, 102, 102); text-decoration: none;"> 78</a> <a target=_blank id="L79" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L79" rel="#L79" style="color: rgb(102, 102, 102); text-decoration: none;"> 79</a> <a target=_blank id="L80" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L80" rel="#L80" style="color: rgb(102, 102, 102); text-decoration: none;"> 80</a> <a target=_blank id="L81" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L81" rel="#L81" style="color: rgb(102, 102, 102); text-decoration: none;"> 81</a> <a target=_blank id="L82" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L82" rel="#L82" style="color: rgb(102, 102, 102); text-decoration: none;"> 82</a> <a target=_blank id="L83" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L83" rel="#L83" style="color: rgb(102, 102, 102); text-decoration: none;"> 83</a> <a target=_blank id="L84" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L84" rel="#L84" style="color: rgb(102, 102, 102); text-decoration: none;"> 84</a> <a target=_blank id="L85" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L85" rel="#L85" style="color: rgb(102, 102, 102); text-decoration: none;"> 85</a> <a target=_blank id="L86" href="http://blog.csdn.net/sinat_22657459/article/details/44174659#L86" rel="#L86" style="color: rgb(102, 102, 102); text-decoration: none;"> 86</a>

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv= "content-type" content= "text/html; charset=UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" > <link href= "css/bootstrap.min.css" rel= "stylesheet" media= "screen" > <link href= "css/bootstrap-responsive.min.css" rel= "stylesheet" type= "text/css" > <script src= "js/jquery-2.1.1.js" type= "text/javascript" ></script> <script src= "js/bootstrap.min.js" type= "text/javascript" ></script> <style type= "text/css" > body { padding : 0 ; margin : 0 ; } </style> </head> <script type= "text/javascript" > $ ( function () { $ ( '.carousel' ). carousel ({ interval : 2000 }); isTouchDevice (); }); //全局变量，触摸开始位置 var startX = 0 ; function touchSatrtFunc ( evt ) { try { evt . preventDefault (); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt . touches [ 0 ]; //获取第一个触点 var x = Number ( touch . pageX ); //页面触点X坐标 //记录触点初始位置 startX = x ; } catch ( e ) {} } function touchMoveFunc ( evt ) { try { evt . preventDefault (); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt . touches [ 0 ]; //获取第一个触点 var x = Number ( touch . pageX ); //页面触点X坐标 //判断滑动方向 if ( x - startX < 0 ) { $ ( '.carousel' ). carousel ( 'next' ); } if ( x - startX > 0 ) { $ ( '.carousel' ). carousel ( 'prev' ); } } catch ( e ) {} } function bindEvent () { document . addEventListener ( 'touchstart' , touchSatrtFunc , false ); document . addEventListener ( 'touchmove' , touchMoveFunc , false ); } function isTouchDevice () { try { document . createEvent ( "TouchEvent" ); bindEvent (); //绑定事件 } catch ( e ) {} } </script> <body> <div id= "myCarousel" class= "carousel slide" > <ol class= "carousel-indicators" > <li data-target= "#myCarousel" data-slide-to= "0" class= "active" ></li> <li data-target= "#myCarousel" data-slide-to= "1" ></li> </ol> <!-- Carousel items --> <div class= "carousel-inner" align= "center" > <div class= "active item" > <img src= "img/1-1-0.png" /> </div> <div class= "item" > <img src= "img/1-1-1.png" /> </div> </div> </div> </body> </html>

 来自CODE的代码片

banner.html