<!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 */
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;
border-radius: 50%;
background: #333;
margin-right: 5px;
/*第一個<span>*/
#pointsDiv .on {
background: orangered;
/*切換圖示<a>*/
.arrow {
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
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>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="5" />
<img src="img/1.jpg" alt="1" />
<img src="img/2.jpg" alt="2" />
<img src="img/3.jpg" alt="3" />
<img src="img/4.jpg" alt="4" />
</div>
<div id="pointsDiv">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script src="./js/jquery.1.10.2.js"></script>
<script type="text/javascript">
/*
功能說明:
1. 點選向右(左)的圖示, 平滑切換到下(上)一頁
2. 無限循環切換
3. 每隔3s自動滑動到下一頁
4. 滑鼠進入停止自動翻頁, 移出開啟自動翻頁
5. 切換頁面時, 下面的圓點也同步更新
6. 點選圓點圖示切換到對應的頁
*/
// 顯示區域容器
var $container = $('#container');
// 圖檔容器
var $list = $('#list')
// 小圓點
var $point = $('#pointsDiv span')
// 左右按鈕
var $prev = $('#prev');
var $next = $('#next');
// 動畫總時長
var time = 3000
// 每一幀的動畫時長
var itemTime = 30
// 圖檔寬度
const PAGE_WIDTH = 600;
// 擷取小圓點個數
var img_num = $point.length;
// 定義辨別變量 用于記錄index
var oldIndex = 0;
// 定義辨別變量 用于記錄動畫是否還在執行中
var isMove = false;
// 上一頁
$prev.click(function(){
nextPage(false);
});
// 下一頁
$next.click(function(){
nextPage(true);
// 點選小圓點翻頁
$point.click(function(){
nextPage($(this).index())
})
// 自動翻頁輪播
var autoTimer = setInterval(function(){
nextPage(true);
},3000);
// 移入 取消自動輪播 移除繼續輪播
$container.hover(function(){
clearInterval(autoTimer);
},function(){
autoTimer=setInterval(() => {
}, 3000);
// 切換的方法
function nextPage(next){
if(isMove){
return
}
isMove = true;
var offset;
// 判斷形參的類型
if(typeof next == 'boolean'){
// 總偏移量
offset = next ? - PAGE_WIDTH : PAGE_WIDTH;
}else{
offset = -(next - oldIndex) * PAGE_WIDTH
// 動畫總時長 / 每幀時長 = 總幀數 總偏移量/總幀數 = 每幀偏移量
// 每幀偏移量
var itemOffset = offset / (time/itemTime)
// 擷取目前list 的left 值
var left = $list.position().left;
// 目的地left值
var targetLeft = left + offset;
var timer = setInterval(function(){
left += itemOffset;
// 判斷是否翻完了一頁
if(left == targetLeft){
clearInterval(timer);
// 無限滾動 原理
// 在每一次圖檔動畫執行完成時 判斷是否需要修正位置
if(left == 0){
left = -(img_num * PAGE_WIDTH);
}else if (left == -(img_num) * PAGE_WIDTH){
left = - PAGE_WIDTH;
}
isMove = false;
$list.css('left',left);
}, itemTime);
upDate(next);
}
// 更新小圓點
function upDate(next){
var index;
// 計算目前應該顯示的小圓點的下标
index = next ? oldIndex+ 1 : oldIndex-1;
index = next;
// 小圓點邊界值判斷
if(index > img_num -1 ){
index = 0;
}else if( index < 0){
index = img_num - 1;
$point[oldIndex].className='';
$point[index].className = 'on';
// 更新下标
oldIndex = index;
</script>
</body>
</html>
我是Eric,手機号是13522679763