前幾天剛學(xué)到了一種最簡(jiǎn)單的輪播圖實(shí)現(xiàn)方法薪缆，現(xiàn)在寫(xiě)在博客里就當(dāng)是練習(xí)了稽莉。灰殴。。這種方法的核心原理是通過(guò)給圖片元素附加display屬性來(lái)實(shí)現(xiàn)輪播效果他挎，即顯示帶有active類(lèi)的圖片而隱藏其他的圖片。具體代碼如下：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)易輪播圖</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
? ? ? ? <div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
</div>
? ? ? ? <a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
? ? ? ? <div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
css:
*
{
padding:0;
margin:0;
}
.fl
{
float:left;
}
ul
{
list-style:none;
}
body
{
font-family:"Microsoft YaHei";
color:#14191e;
}
.main
{
width:1200px;
height:460px;
margin:30px auto;
overflow:hidden;
position:relative;
}
.banner
{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-slide
{
width:1200px;
height:460px;
background-repeat:no-repeat;
position:absolute;
display:none;
}
.slide-active
{
display:block;
}
.slide1
{
background-image:url("../img/bg1.jpg");
}
.slide2
{
background-image:url("../img/bg2.jpg");
}
.slide3
{
background-image:url("../img/bg3.jpg");
}
.button
{
position:absolute;
width:40px;
height:80px;
left:244px;
top:50%;
margin-top: -40px;
background:url("../img/arrow.png")no-repeat center center;
}
.button:hover
{
background-color:#333333;
opacity:0.8;
filter:alpha(opacity=80);
}
.prev
{
transform:rotate(180deg);
}
.next
{
left:auto;
right:0;
}
.dots
{
position:absolute;
right:20px;
bottom:24px;
text-align:right;
}
.dots span
{
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
background:rgba(7,17,27,0.4);
margin-left:8px;
line-height:12px;
box-shadow:0 0 0 2px rgba(255,255,255,0.8)inset;
cursor:pointer;
}
.dots span.active
{
box-shadow:0 0 0 2px rgba(7,17,27,0.4)inset;
background-color:#ffffff;
}
js:
function byId(id) {
return typeof (id) ==="string"?document.getElementById(id):id;
}
var index =0,
timer =null,
pics =byId("banner").getElementsByTagName("div"),
dots =byId("dots").getElementsByTagName("span"),
prev =byId("prev"),
next =byId("next"),
len =pics.length;
function slideImg() {
var main =byId("main");
main.onmouseover =function () {
if (timer) {
clearInterval(timer);/* 清除定時(shí)器捡需，用于鼠標(biāo)停留時(shí)保持圖片以及防止因多次移動(dòng)鼠標(biāo)導(dǎo)致的多個(gè)定時(shí)器分別計(jì)時(shí)的問(wèn)題 */
? ? ? ? }
}
main.onmouseout =function () {
timer =setInterval(function () {
index++;
changeImg();
},3000);
}
/* 鼠標(biāo)離開(kāi)時(shí)觸發(fā)事件 */
? ? main.onmouseout();
/* 綁定點(diǎn)擊圓點(diǎn)時(shí)切換圖片的事件 */
? ? for (var j=0;j
{
dots[j].id ="D"+j;
dots[j].onclick =function () {
var str =this.id;
str =str.substr(1);
index =str;
changeImg();
}
}
next.onclick =function () {
index++;
changeImg();
}
prev.onclick =function () {
index--;
changeImg();
}
}
function changeImg()
{
if (index >=len)
{
index =0;
}
else if (index <0)
{
index =len -1;
}
for(var i=0;i
{
pics[i].style.display ='none';/* 遍歷所有圖片display屬性為隱藏 */
? ? ? ? dots[i].className ="";/* 遍歷所有圓點(diǎn)并將active類(lèi)全部清除 */
? ? }
pics[index].style.display ='block';/* 將所選圖片設(shè)為顯示 */
? ? dots[index].className ="active";/* 賦予所選圓點(diǎn)active類(lèi) */
}
slideImg();
這種輪播圖堪稱(chēng)是乞丐版中的乞丐版办桨，無(wú)法實(shí)現(xiàn)滾動(dòng)效果。站辉。呢撞。滾動(dòng)效果在我參（chao）考（xi）了大佬@Gsdxiaohei的代碼后終于是完成了罒ω罒 罒ω罒 罒ω罒具體請(qǐng)見(jiàn)“簡(jiǎn)易輪播圖實(shí)現(xiàn)——乞丐加強(qiáng)版”损姜。。殊霞。小白萌新摧阅，還請(qǐng)大佬們多多指點(diǎn)
