jq轮播图功能

html

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <title>焦点轮播图</title>
  7   <style type="text/css">
  8     /*去除内边距,没有链接下划线*/
  9     * {
 10       margin: 0;
 11       padding: 0;
 12       text-decoration: none;
 13     }
 14 
 15     /*让<body有20px的内边距*/
 16     body {
 17       padding: 20px;
 18     }
 19 
 20     /*最外围的div*/
 21     #container {
 22       width: 600px;
 23       height: 400px;
 24       overflow: hidden;
 25       position: relative; /*相对定位*/
 26       margin: 0 auto;
 27     }
 28 
 29     /*包含所有图片的<div>*/
 30 
 31     #list {
 32       width: 4200px; /*7张图片的宽: 7*600 */
 33       height: 400px;
 34       position: absolute; /*绝对定位*/
 35       z-index: 1;
 36     }
 37 
 38     /*所有的图片<img>*/
 39     #list img {
 40       float: left; /*浮在左侧*/
 41     }
 42 
 43     /*包含所有圆点按钮的<div>*/
 44     #pointsDiv {
 45       position: absolute;
 46       height: 10px;
 47       width: 100px;
 48       z-index: 2;
 49       bottom: 20px;
 50       left: 250px;
 51     }
 52 
 53     /*所有的圆点<span>*/
 54 
 55     #pointsDiv span {
 56       cursor: pointer;
 57       float: left;
 58       border: 1px solid #fff;
 59       width: 10px;
 60       height: 10px;
 61       border-radius: 50%;
 62       background: #333;
 63       margin-right: 5px;
 64     }
 65 
 66     /*第一个<span>*/
 67 
 68     #pointsDiv .on {
 69       background: orangered;
 70     }
 71  
 72     /*切换图标<a>*/
 73 
 74     .arrow {
 75       cursor: pointer;
 76       display: none;
 77       line-height: 39px;
 78       text-align: center;
 79       font-size: 36px;
 80       font-weight: bold;
 81       width: 40px;
 82       height: 40px;
 83       position: absolute;
 84       z-index: 2;
 85       top: 180px;
 86       background-color: RGBA(0, 0, 0, 0.3);
 87       color: #fff;
 88     }
 89 
 90     /*鼠标移到切换图标上时*/
 91     .arrow:hover {
 92       background-color: RGBA(0, 0, 0, 0.7);
 93     }
 94 
 95     /*鼠标移到整个div区域时*/
 96     #container:hover .arrow {
 97       display: block; /*显示*/
 98     }
 99 
100     /*上一个切换图标的左外边距*/
101     #prev {
102       left: 20px;
103     }
104 
105     /*下一个切换图标的右外边距*/
106     #next {
107       right: 20px;
108     }
109   </style>
110 </head>
111 
112 <body>
113 
114 <div id="container">
115   <div id="list" style="left: -600px;">
116     <img src="img/5.jpg" alt="5"/>
117     <img src="img/1.jpg" alt="1"/>
118     <img src="img/2.jpg" alt="2"/>
119     <img src="img/3.jpg" alt="3"/>
120     <img src="img/4.jpg" alt="4"/>
121     <img src="img/5.jpg" alt="5"/>
122     <img src="img/1.jpg" alt="1"/>
123   </div>
124   <div id="pointsDiv">
125     <span index="1" class="on"></span>
126     <span index="2"></span>
127     <span index="3"></span>
128     <span index="4"></span>
129     <span index="5"></span>
130   </div>
131   <a href="javascript:;" id="prev" class="arrow">&lt;</a>
132   <a href="javascript:;" id="next" class="arrow">&gt;</a>
133 </div>
134 
135 <script type="text/javascript" src="jquery-1.10.1.js"></script>
136 <script type="text/javascript" src="app.js"></script>
137 
138 
139 </body>
140 
141 </html>

 

js

  1 /*
  2  功能说明:
  3  1. 点击向右(左)的图标, 平滑切换到下(上)一页
  4  2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
  5  3. 每隔3s自动滑动到下一页
  6  4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
  7  5. 切换页面时, 下面的圆点也同步更新
  8  6. 点击圆点图标切换到对应的页
  9 
 10  bug: 快速点击时, 翻页不正常
 11  */
 12 $(function () {
 13 
 14   var $container = $('#container')
 15   var $list = $('#list')
 16   var $points = $('#pointsDiv>span')
 17   var $prev = $('#prev')
 18   var $next = $('#next')
 19   var PAGE_WIDTH = 600 //一页的宽度
 20   var TIME = 400 // 翻页的持续时间
 21   var ITEM_TIME = 20 // 单元移动的间隔时间
 22   var imgCount = $points.length
 23   var index = 0 //当前下标
 24   var moving = false // 标识是否正在翻页(默认没有)
 25 
 26 
 27   // 1. 点击向右(左)的图标, 平滑切换到下(上)一页
 28   $next.click(function () {
 29     // 平滑翻到下一页
 30     nextPage(true)
 31   })
 32   $prev.click(function () {
 33     // 平滑翻到上一页
 34     nextPage(false)
 35   })
 36 
 37   // 3. 每隔3s自动滑动到下一页
 38   var intervalId = setInterval(function () {
 39     nextPage(true)
 40   }, 1000)
 41 
 42   // 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
 43   //        移入显示容器 停止自动轮播  移出再次启动
 44 //        第一个参数代表移入的回调函数
 45 //        第二个参数代表移出的回调函数
 46 //        如果只传递一个参数   移入移出都是用这一个回调
 47   $container.hover(function () {
 48     // 清除定时器
 49     clearInterval(intervalId)
 50   }, function () {
 51     intervalId = setInterval(function () {
 52       nextPage(true)
 53     }, 1000)
 54   })
 55 
 56   // 6. 点击圆点图标切换到对应的页
 57   $points.click(function () {
 58     // 目标页的下标
 59     var targetIndex = $(this).index()
 60     // 只有当点击的不是当前页的圆点时才翻页
 61     if(targetIndex!=index) {
 62       //小圆点的索引和图片动画关联
 63       nextPage(targetIndex)
 64     }
 65   })
 66 
 67   /**
 68    * 平滑翻页
 69    * @param next
 70    * true: 下一页
 71    * false: 上一页
 72    * 数值: 指定下标页
 73    */
 74   function nextPage (next) {
 75     /*
 76       总的时间: TIME=400
 77       单元移动的间隔时间: ITEM_TIME = 20
 78       总的偏移量: offset
 79       单元移动的偏移量: itemOffset = offset/(TIME/ITEM_TIME)
 80 
 81       启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
 82      */
 83 
 84     //如果正在翻页, 直接结束
 85     if(moving) { //已经正在翻页中,该操作用的多  多次点击翻页时,上一次翻页在进行中时,终止下一次的翻页
 86       return    
 87     }
 88     moving = true // 标识正在翻页
 89 
 90     // 总的偏移量: offset
 91     var offset = 0
 92     // 计算offset
 93     // 判断next的类型
 94     if(typeof next==='boolean') {
 95       offset = next ? -PAGE_WIDTH : PAGE_WIDTH
 96     } else {
 97       offset = -(next-index)* PAGE_WIDTH
 98     }
 99 
100     // 计算单元移动的偏移量: itemOffset
101     var itemOffset = offset/(TIME/ITEM_TIME)
102     // 得到当前的left值
103     var currLeft = $list.position().left
104     // 计算出目标处的left值
105     var targetLeft = currLeft + offset
106 
107     // 启动循环定时器不断更新$list的left, 到达目标处停止停止定时器
108     var intervalId = setInterval(function () {
109       // 计算出最新的currLeft
110       currLeft += itemOffset
111       if(currLeft===targetLeft) { // 到达目标位置
112         // 清除定时器
113         clearInterval(intervalId)
114 
115         // 标识翻页停止
116         moving = false
117 
118         // 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg)
119         if(currLeft===-(imgCount+1) * PAGE_WIDTH) {
120           currLeft = -PAGE_WIDTH
121          
122         } else if(currLeft===0){
123           // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg)
124           currLeft = -imgCount * PAGE_WIDTH
125         }
126 
127       }
128       // 设置left
129       $list.css('left', currLeft)
130     }, ITEM_TIME)
131 
132     // 更新圆点
133     updatePoints(next)
134   }
135 
136   /**
137    * 更新圆点
138    * @param next
139    */
140   function updatePoints (next) {
141 
142     // 计算出目标圆点的下标targetIndex
143     var targetIndex = 0
144     // 判断next的类型
145     if(typeof next === 'boolean') {
146       if(next) {
147         targetIndex = index + 1   // [0, imgCount-1]
148         if(targetIndex===imgCount) {// 此时看到的是1.jpg-->第1个圆点
149           targetIndex = 0
150         }
151       } else {
152         targetIndex = index - 1
153         if(targetIndex===-1) { // 此时看到的是5.jpg-->第5个圆点
154           targetIndex = imgCount-1
155         }
156       }
157     } else {
158       targetIndex = next
159     }
160 
161 
162     // 将当前index的<span>的class移除
163     // $points.eq(index).removeClass('on')
164     $points[index].className = ''
165     // 给目标圆点添加class='on'
166     // $points.eq(targetIndex).addClass('on')
167     $points[targetIndex].className = 'on'
168 
169     // 将index更新为targetIndex
170     index = targetIndex
171   }
172 })

 

图片边界值判断

 

posted @ 2020-05-23 00:47  全情海洋  阅读(150)  评论(0编辑  收藏  举报