iOS与JS交互02

一、使用H5实现布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片轮播</title>
    <style type="text/css">
     body {
      width: 100%;
      height: 495px;
      background-color: gray;
      text-align: center;
     }
     #imge {
       width: 680px;
       height: 495px;      
     }
   </style>
</head>
<body>
   <div id="main">
      <!-- <h1>使用数组实现图片自动轮播</h1> -->
      <img id = "imge" src = "1.jpg" alt="picture" /> 
  </div>
</body>
</html>

二、使用JS实现轮播

<script type="text/javascript"> 
    var curIndex = 0; 
    var timeInterval = 2000; 
    var arr = new Array(); 
    arr[0] = "image/1.jpeg"; 
    arr[1] = "image/2.jpeg"; 
    arr[2] = "image/3.jpeg"; 
    arr[3] = "image/4.jpeg"; 
    arr[4] = "image/5.jpeg"; 
    arr[5] = "image/6.jpeg";
    setInterval(changeImg,timeInterval); 
    function changeImg() { 
       var obj = document.getElementById("imge"); 
       if (curIndex == arr.length-1) { 
         curIndex = 0; 
       } else { 
         curIndex += 1; 
       } 
       obj.src = arr[curIndex]; 
    } 
  </script>

三、将完成的文件封装在iOS中

- (void)viewDidLoad {
    [super viewDidLoad];
   
//    NSString *document = NSHomeDirectory();
//    NSLog(@"%@",document);
    
    //添加webView
    UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height)];
    webView.delegate = self;
    [self.view addSubview:webView];
   
    //找到html文件
    NSString *string = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)lastObject];
    string = [string stringByAppendingPathComponent:@"/JS轮播图/轮播图.html"];
    
    //如果URL里面存在汉字,将汉字转化为字符串
    string = [string stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet characterSetWithCharactersInString:string]];
    
    //创建URL(URL有两套协议:http协议、本地协议),此时需要加载本地URL
    NSURL *url = [NSURL URLWithString:string];
    
    //加载webView
    [webView loadRequest:[NSURLRequest requestWithURL:url]];
    
    //适配屏幕
    webView.scalesPageToFit = YES;
}
//webView代理方法  - 修改js
- (void)webViewDidFinishLoad:(UIWebView *)webView{

}


你可能感兴趣的:(iOS与html交互)