...由于我的圖片畫(huà)質(zhì)太高,效果圖傳不上來(lái), 大家自己試一試吧, 在同一個(gè)文件夾保存下面的代碼和分別為1,2,3,4,5.jpg的五張圖片
我在這里用的圖片全部都是1920*1080的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#box{
width: 1920px;
height: 1080px;
margin: 1px auto;
position: relative;
border: 1px soild block;
overflow: hidden;
}
#box #list{
position: absolute;
width: 13440px;//為了讓五張圖片全部在一行表示出來(lái)
height: 1080px;
z-index: 1;
}
#box #list li{
float: left;
height: 1080px;
width: 1920px;
}
#buttons {
position: absolute;
left: 910px;
bottom: 50px;
z-index: 2;//保證小圓點(diǎn)在圖片上層
height: 30px;
width: 300px;
}
#buttons li {
float: left;
margin-right: 20px;
width: 20px;
height: 20px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
list-style: none;
}
#buttons .on {
background: orangered;
}
.arrow {
position: absolute;
top: 520px;
z-index: 2;
display: none;
width: 200px;
height: 200px;
font-size: 100px;
font-weight: bold;
line-height: 200px;//使方塊中的">"水平垂直居中
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.arrow:hover {
background-color: rgba(0, 0, 0, 0.7);
}
#box:hover .arrow {//鼠標(biāo)移入圖片時(shí), 無(wú)
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
</style>
</head>
<body>
<div id="box">
<ul id="list" style="left: -1920px">
這里又為什么要有7張圖片呢, 主要是為了無(wú)縫的優(yōu)化胜蛉，無(wú)縫滾動(dòng)。
當(dāng)你從最后一張圖切換回第一張圖時(shí)步鉴，有很大空白，利用兩張輔助圖來(lái)填補(bǔ)這個(gè)空白。
這里補(bǔ)充下無(wú)縫滾動(dòng)呢岗，直接看代碼限府，復(fù)制最后一張圖片放置第一張圖片前，同時(shí)復(fù)制第一張圖片放置最后一張圖片的后面供汛。并且枪汪，將第一張圖片輔助圖（實(shí)際上是實(shí)際顯示的第5張圖片隱藏起來(lái)，故設(shè)置style="left: -600px;"）
<li><a href="#"><img src="5.jpg"></a></li>
<li><a href="#"><img src="1.jpg"></a></li>
<li><a href="#"><img src="2.jpg"></a></li>
<li><a href="#"><img src="3.jpg"></a></li>
<li><a href="#"><img src="4.jpg"></a></li>
<li><a href="#"><img src="5.jpg"></a></li>
<li><a href="#"><img src="1.jpg"></a></li>
</ul>
<ul id="buttons">//小圓點(diǎn)
<li index="1" class="on"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
<li index="5"></li>
</ul>
<a href="javascript:" id="prev" class="arrow"><</a>
<a href="javascript:" id="next" class="arrow">></a>
</div>
<script>
window.onload = function() {
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var box = document.getElementById('box');
function animate(offset) {
//獲取的是style.left怔昨，是相對(duì)左邊獲取距離雀久，所以第一張圖后style.left都為負(fù)值，
//且style.left獲取的是字符串趁舀，需要用parseInt()取整轉(zhuǎn)化為數(shù)字赖捌。
var newLeft = parseInt(list.style.left) + offset;
if(newLeft < -11520){
newLeft = -3840;
}//當(dāng)?shù)竭吔鐣r(shí), 返回圖片的當(dāng)前位置
if(newLeft > 0){
newLeft = -7680;
}
list.style.left = newLeft + 'px';
}
// prev.onclick = function() {
// animate(1920);
// }
// next.onclick = function() {
// animate(-1920);
// }
var timer;
function play() {//設(shè)置定時(shí)器
timer = setInterval(function () {
next.onclick()
}, 1500)
}
play();
function stop() {
clearInterval(timer);
}
box.onmouseover = stop;
box.onmouseout = play;
var buttons = document.getElementById('buttons').getElementsByTagName('li');
var index = 1;
function buttonsShow() {
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == 'on') {
buttons[i].className = '';
}
}//遍歷找到有class為on的li, 并清除掉
buttons[index-1].className = 'on';
}
prev.onclick = function() {
index--;
if (index < 1) {
index = 5;
}
buttonsShow();
animate(1920);
}
next.onclick = function() {
index++;
if (index > 5) {
index = 1;
}
buttonsShow();
animate(-1920);
}
for (var i = 0; i < buttons.length; i++) {//下面由于產(chǎn)生了一個(gè)典型的閉包, 因此要采用立即執(zhí)行函數(shù)的方法
(function(j){
buttons[j].onclick = function () {
console.log(j);
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 1920 * (index - clickIndex);
animate(offset); //存放鼠標(biāo)點(diǎn)擊后的位置，用于小圓點(diǎn)的正常顯示
index = clickIndex;
buttonsShow();
}
})(i)
}
}
</script>
</body>
</html>
