jQuery轮播图练习

毛毛淘气

已于 2023-06-30 00:09:42 修改

阅读量265

点赞数

文章标签： jquery javascript

于 2022-08-31 20:35:49 首次发布

本文链接：https://blog.csdn.net/weixin_59357486/article/details/126631585

版权

学习jQuery轮播图，主要还是学习他的思路，对比于原生的js轮播图的差异，方便以后的学习。以供参考

轮播图的html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
/*去除内边距,没有链接下划线*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}

/*让<body有20px的内边距*/
body {
padding: 20px;
}

/*最外围的div*/
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative; /*相对定位*/
margin: 0 auto;
}

/*包含所有图片的<div>*/

#list {
width: 4200px; /*7张图片的宽: 7*600 */
height: 400px;
position: absolute; /*绝对定位*/
z-index: 1;
}

/*所有的图片<img>*/
#list img {
float: left; /*浮在左侧*/
}

/*包含所有圆点按钮的<div>*/
#pointsDiv {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}

/*所有的圆点<span>*/

#pointsDiv span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}

/*第一个<span>*/

#pointsDiv .on {
background: orangered;
}

/*切换图标<a>*/

.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0, 0, 0, 0.3);
color: #fff;
}

/*鼠标移到切换图标上时*/
.arrow:hover {
background-color: RGBA(0, 0, 0, 0.7);
}

/*鼠标移到整个div区域时*/
#container:hover .arrow {
display: block; /*显示*/
}

/*上一个切换图标的左外边距*/
#prev {
left: 20px;
}

/*下一个切换图标的右外边距*/
#next {
right: 20px;
}
</style>
</head>

<body>

</body>

</html>

调用到的app.js文件

/*
功能说明:
1. 点击向右(左)的图标, 平滑切换到下(上)一页
2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
3. 每隔3s自动滑动到下一页
4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
5. 切换页面时, 下面的圆点也同步更新
6. 点击圆点图标切换到对应的页

bug: 快速点击下一页时, 有问题
*/
$(function() {

   var $container = $('#container');
   var $list = $('#list');
   var $points = $('#pointsDiv>span');
   var $prev = $('#prev');
   var $next = $('#next');
   var PAGE_WIDTH = 600;
   var TIME = 400;
   var TIME_TIME = 20;
   var imgCount = $points.length;
   var index = 0
   var moving = false //是否正在翻页中

   // 1. 点击向右(左)的图标, 平滑切换到下(上)一页
   $next.click(function() {
       //下一页
       nextPage(true)

   })
   $prev.click(function() {
       //上一页
       nextPage(false)
   })
   // 3. 每隔3s自动滑动到下一页
   var intervalId = setInterval(function() {
       nextPage(true)
   }, 3000)
   //4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
   $container.hover(function() {
       //消除定时器
       clearInterval(intervalId)
   }, function() {
       intervalId = setInterval(function() {
           nextPage(true)
       }, 3000)
   })
   //6. 点击圆点图标切换到对应的页
   $points.click(function() {
       var targetIndex = $(this).index()
       if (targetIndex != index) {
           nextPage(targetIndex)
       }
   })

   //平滑翻页
   function nextPage(next) {
       //总偏移量 offset
       //总时间 TIME = 400
       //单元偏移时间 TIME_TIME = 20
       //单元偏移量 itemOffset = offset/(TIME/TIME_TIME)
       if (moving) {
           return
       }
       moving = true // 标识正在翻页中

var offset = 0

       // 计算offset
       if (typeof next === 'boolean') {
           offset = next ? -PAGE_WIDTH : PAGE_WIDTH
       } else {
           offset = -PAGE_WIDTH * (next - index)
       }

       var itemOffset = offset / (TIME / TIME_TIME)
       //得到当前的left的值
       var currLeft = $list.position().left

var targetLeft = currLeft + offset

var intervalid = setInterval(function() {

currLeft += itemOffset

if (currLeft === targetLeft) {

               clearInterval(intervalid)
               //标识翻页完成
               moving = false

               //如果到达极限图片，跳到相对的位置
               if (currLeft === -(imgCount + 1) * PAGE_WIDTH) {
                   currLeft = -PAGE_WIDTH
               } else if (currLeft === 0) {
                   currLeft = -PAGE_WIDTH * imgCount
               }

}

$list.css('left', currLeft)

       }, TIME_TIME)
       updatePoints(next)
   }
   //更新原点
   function updatePoints(next) {
       var targetIndex = 0
       // 计算目标下标
       if (typeof next === 'boolean') {
           if (next) {
               targetIndex = index + 1
               if (targetIndex === imgCount) {
                   targetIndex = 0
               }
           } else {
               targetIndex = index - 1
               if (targetIndex === -1) {
                   targetIndex = imgCount - 1
               }
           }
       } else {
           targetIndex = next
       }

       //将当前的index的<span>的class移除
       $points.eq(index).removeClass('on')
       //给目标原点添加class=‘on’
       $points.eq(targetIndex).addClass('on')
       //将index更新成targetIndex
       index = targetIndex
   }

})