简易轮播图实现——乞丐版
前几天刚学到了一种最简单的轮播图实现方法，现在写在博客里就当是练习了。。。这种方法的核心原理是通过给图片元素附加display属性来实现轮播效果，即显示带有active类的图片而隐藏其他的图片。具体代码如下：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易轮播图</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);/* 清除定时器，用于鼠标停留时保持图片以及防止因多次移动鼠标导致的多个定时器分别计时的问题 */
}
}
main.onmouseout =function () {
timer =setInterval(function () {
index++;
changeImg();
},3000);
}
/* 鼠标离开时触发事件 */
main.onmouseout();
/* 绑定点击圆点时切换图片的事件 */
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 ="";/* 遍历所有圆点并将active类全部清除 */
}
pics[index].style.display ='block';/* 将所选图片设为显示 */
dots[index].className ="active";/* 赋予所选圆点active类 */
}
slideImg();
这种轮播图堪称是乞丐版中的乞丐版，无法实现滚动效果。。。滚动效果在我参（chao）考（xi）了大佬@Gsdxiaohei的代码后终于是完成了罒ω罒 罒ω罒 罒ω罒具体请见“简易轮播图实现——乞丐加强版”。。。小白萌新，还请大佬们多多指点
