美文网首页
制作轮播图

制作轮播图

作者: Grt婷 | 来源:发表于2016-11-24 08:42 被阅读0次

1.创建滚动视图(UIScrollView)

  • 声明为全局变量

    var scr :UIScrollView! = nil
    
  • 初始化及其属性设置

    scr = UIScrollView(frame: CGRect(x: 0, y: 100,  width: self.view.frame.size.width, height: 300))
    //设置内容区域大小
    scr.contentSize = CGSize(width:self.view.frame.size.width * 5,height:300)
    //是否整页翻动
    scr.isPagingEnabled=true
    //触壁反弹
    scr.bounces=false
    //添加到主视图
    self.view.addSubview(scr)
    
  • 将图片添加到滚动视图上
    1.百度下载图片,命名为1,2,3,4,5,格式为jpg,拖到工程中
    2.代码实现

        for index in 1...5    {
            //获取图片名字
            let name = "\(index).jpg"
            let image = UIImage(named:name)
            let x = CGFloat(index - 1) *  self.view.frame.size.width
            //初始化UIImageView
            let imageV = UIImageView(frame: CGRect(x:x, y:0, width: self.view.frame.size.width, height: 300.0))
            //为image添加图片
            imageV.image = image
            //添加到滚动视图上
            scr.addSubview(imageV)
            scr.delegate = self // 设置代理
        }
    

2.创建UIPageControl

  • 声明为全局变量

    var page : UIPageControl! = nil
    
  • 初始化及其属性设置

    //初始化UIPageControl
    page = UIPageControl(frame: CGRect(x: 100, y: 350, width: self.view.frame.size.width-200, height: 30))
       //总共有多少页
       page.numberOfPages = 4
       //当前是多少页
       page.currentPage = 0
       //添加方法
       page.addTarget(self, action: #selector(pageAction(page:)), for: .valueChanged)
       //未选中的滑块颜色
       page.pageIndicatorTintColor=UIColor.white
       //选中的滑块颜色
       page.currentPageIndicatorTintColor=UIColor.black
       //添加到主视图
       self.view.addSubview(page)
    
  • 添加方法

    func pageAction(page:UIPageControl){
         let index = page.currentPage
         let point = CGPoint(x: CGFloat(index) * self.view.frame.size.width, y: 0)
       //修改偏移量
         scr.setContentOffset(point, animated: true)
    }
    

3.创建Timer

  • 声明为全局变量

    var timer : Timer! = nil
    
  • 初始化

    //每个属性的含义
         //1.间隔时间
         //2.方法的执行对象
         //3.执行的方法
         //4.配置信息,类似备注
         //5.true 循环执行 false 执行一次
    self.timer=Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
    //开启定时器    
    self.timer.fire()
    
  • 添加方法

    func timerAction(){
         //获取到当前的offset
         let offset = self.scr.contentOffset
         let width = self.view.frame.size.width
         //让scrollerView进行滑动
         scr.setContentOffset(CGPoint(x:offset.x + width,y:offset.y) , animated: true)
       //if 到第四个了,跳动到第一个
         if scr.contentOffset.x >= width * 4 {
             let point = CGPoint(x: 0, y: 0)//第一个是0,0
             scr.contentOffset = point
         }
     }
    
    

4.添加滑动会执行的方法

func scrollViewDidScroll(_ scrollView: UIScrollView) {
     //获取偏移量
     let x = scr.contentOffset.x
     let width = self.view.frame.size.width
     //根据偏移量定位到第几个点
     if (x >= width * 4){
         self.page.currentPage = 0
     }else{
      page.currentPage = Int(x / width)
     }
}

5.添加开始拖拽、结束拖拽方法

//开始拖拽
 func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
     self.timer.invalidate()
     self.timer = nil
 }
 //结束拖拽
 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
      self.timer=Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
     // 一秒之后再执行
     let time =  DispatchTime.now() + 1.0
     DispatchQueue.main.asyncAfter(deadline:time){
         if let _ = self.timer {
          self.timer.fire()
         }
     }
    
 }

6.效果图

四张图会自动播放


相关文章

  • 简单使用CollectionView制作轮播视图

    俺之前都是用UIScrollView制作轮播图,后面看了组长的项目之后发现CollectionView制作轮播图更...

  • 呼吸轮播图的制作

    网页排版中,轮播图可以说很常见,轮播图种类有好几种,今天分享一下呼吸轮播图的制作过程。 效果展示 转到动画 制作过...

  • 制作轮播图

    1.创建滚动视图(UIScrollView) 声明为全局变量var scr :UIScrollView! = ni...

  • Axure案例——轮播图例制作

    Axure案例——轮播图例制作 制作流程: 1、添加轮播图的动态面板,注意,设置状态时,通过复制状态来设置; 2、...

  • Axure原型设计——轮播图

    轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或移动端的原型都非常实用...

  • iOS 使用collectionView的无限轮播图

    ScrollBanner 使用collectionView制作的无限轮播图,GitHub:https://gith...

  • Jquery 轮播图制作

    轮播图制作主要思路:实现轮播图滚动的效果,主要是使用animate()函数来实现这个过渡的动画效果。当向左点击时,...

  • 原生js制作轮播图

    原生js 制作的轮播图 今天学习了一个原生js轮播图的方法。效果图如下 通过点击上下页和中间的点进行翻页,通过改变...

  • JS轮播图制作

    先给大家介绍几种JS属性: 1.onclick:当点击的时刻 2.ondbclick:当双击的时刻 3.onmou...

  • Axure制作轮播图

    效果说明: (1)页面载入后定时4s自动循环轮播; (2)图片向左滑动,原点指示随图片滑动变化; (3)鼠标移入原...

网友评论

      本文标题:制作轮播图

      本文链接:https://www.haomeiwen.com/subject/ibkbpttx.html