前几天做了一个很简单的轮播图，但是它是通过给图片加上display属性的方法去实现轮播的，所以不能滚。。。￣□￣｜｜这几天看到了大佬的代码才学会了无缝滚动。。。以下是代码
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner-slide</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<div class="banner">
<ul class="slide" id="slide">
<li class="fl"><img src="img/bg1.jpg" alt="图片1"></li>
<li class="fl"><img src="img/bg2.jpg" alt="图片2"></li>
<li class="fl"><img src="img/bg3.jpg" alt="图片3"></li>
</ul>
</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;
}
.main
{
height:460px;
width:1200px;
margin:30px auto;
overflow:hidden;
position:relative;
}
.banner
{
height:460px;
width:1200px;
overflow:hidden;
position:relative;
}
.slide
{
height:460px;
width:4800px;
position:absolute;
}
.slide li
{
height:460px;
width:1200px;
}
.slide li img
{
height:460px;
width:1200px;
}
.button
{
position:absolute;
width:40px;
height:80px;
left:0px;
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 main =byId("main"),
slide =byId("slide"),
prev =byId("prev"),
next =byId("next"),
dots =byId("dots"),
len =slide.children.length,
width =main.offsetWidth,
rate =15,
gap =3000,
timer =null,
point =0,
index =0;
function roll(distance) {/* 滚动实现函数 */
clearInterval(slide.timer);
var speed =slide.offsetLeft < distance ?rate : (0-rate);
slide.timer =setInterval(function () {
slide.style.left =slide.offsetLeft +speed +"px";
var leave = distance -slide.offsetLeft;
if (Math.abs(leave) <=Math.abs(speed))
{
clearInterval(slide.timer);
slide.style.left = distance +"px";
}
},10);
}
slide.appendChild(slide.children[0].cloneNode(true));/* 在末尾克隆第一张图片 */
function autoRun() {
if (index >len)
{
slide.style.left =0;
index =1;
}
else if(index <0)
{
slide.style.left = -len*width +"px";
index =len-1;
}
roll(-index*width);
for(var i=0;i
{
dots.children[i].className ="";
}
if (index ==3)
{
dots.children[0].className ="active";
}
else
{
dots.children[index].className ="active";
}
}
function slideImg() {
prev.onclick =function () {/* 前进---后退按钮设置 */
index--;
autoRun();
}
next.onclick =function () {
index++;
autoRun();
}
for (var j=0;j
{
dots.children[j].id ="d" +j;
dots.children[j].onclick =function () {
var str =this.id;
str =str.substr(1);
index =str;
autoRun();
}
}
main.onmouseover =function () {
clearInterval(timer);
}
main.onmouseout =function () {
timer =setInterval(function () {
index++;
autoRun();
},gap)
}
}
slideImg();
虽然做是做完了。。。但是还是有很多不理解的地方，并且还有一些奇怪的鬼畜情况。。。之后还是要陆续解决的o(╥﹏╥)o
网友评论