2018-10-30
轮播图2.0
QQ图片20181030233504.jpg
添加了滚动效果
让所有图片排成一排进行滚动，当滚到最后一张或者最开始一张跳转到首页或尾页
html代码
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="head"></div>
<div id="container">
<div id="banner" class="banner">
<img src="img/04.jpg">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg">
<img src="img/04.jpg">
<img src="img/01.jpg">
</div>
<div class="btn" id="btn">
<span id="next"></span>
<span id="prve"></span>
</div>
<div class="dog" id="dog">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
css代码
*{
padding: 0;
margin: 0;
}
.head{
height: 300px;
}
container{
height: 313px;
width: 500px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.banner{
height: 313px;
width: 3000px;
position: absolute;
left: -500px;
z-index: 1;
}
banner img{
float: left;
}
btn{
position: absolute;
top: 40%;
z-index: 2;
width: 500px;
height: 313px;
opacity: 0;
}
btn:hover{
opacity: 0.7;
}
btn #next{
background-image: url(img/button.jpg);
background-size: 50px 50px;
width: 50px;
height: 50px;
z-index: 2;
position: absolute;
left: 450px;
cursor: pointer;
}
btn #prve{
background-image: url(img/button.jpg);
background-size: 50px 50px;
width: 50px;
height: 50px;
z-index: 2;
position: absolute;
transform: rotate(180deg);
cursor: pointer;
}
dog{
position: absolute;
z-index: 2;
top: 85%;
left: 40%;
}
.active{
background-color: orange;
}
span{
background: black;
}
.dog span{
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50%;
color: #e0e0e0;
z-index: 2;
float: left;
text-align: center;
cursor: pointer;
}
js代码
function byId(id) {
return typeof(id) === "string"?document.getElementById(id):id; //判断id是否为字符串
}//封装一个代替getElementById()的方法
var container = byId("container");
var next = byId("next");
var prve = byId("prve");
var banner = byId("banner");
var dog = byId("dog").getElementsByTagName("span");
var len = dog.length;
var index = 0;
var timer = null;
next.onclick=function(){
var newLeft = banner.offsetLeft-500;
var time=300; //位移时间;
var interval=10; //位移次数
var speed = 500/(time/interval);
index++;
if(index>len-1){
index = 0;
}
function go(){
if (newLeft<banner.offsetLeft) {
banner.style.left=banner.offsetLeft-speed+'px';
setTimeout(go,interval);
}
else{
banner.style.left=newLeft+'px';
if (parseInt(banner.style.left)<-2000) {
banner.style.left=-500+'px';
}
}
}
showbtn();
go();
}
prve.onclick=function(){
index--;
var newPrve=banner.offsetLeft+500;
var time=300; //位移时间;
var interval=10; //位移次数
var speed = 500/(time/interval);
if(index<0){
index = len-1;
}
function go(){
if (newPrve>banner.offsetLeft) {
banner.style.left=banner.offsetLeft+speed+'px';
setTimeout(go,interval);
}
else{
banner.style.left=newPrve+'px';
if (parseInt(banner.style.left)>-500) {
banner.style.left=-2000+'px';
}
}
}
showbtn();
go();
}
function slideImg(){
container.onmouseover = function(){
if (timer) {
clearInterval(timer);
}
}
container.onmouseout=function(){
timer = setInterval(function(){
next.onclick();
showbtn();
},3000);
}
container.onmouseout(); //自动播放
}
function showbtn(){
for(var i =0;i<len;i++){
if(dog[i].className="active"){
dog[i].className="";
}
dog[index].className="active";
}
}
for(var i =0;i<len;i++){
dog[i].id = i;
}
for(var i =0;i<len;i++){
dog[i].onclick = function(){
var myindex = parseInt(this.id);
var re = -500*(myindex-index);
var newNext = banner.offsetLeft+re;//小圆点距离
var time=300; //位移时间;
var interval=10; //位移次数
var speed = re/(time/interval);
index = myindex;
function go(){
if ((newNext>banner.offsetLeft&&speed>0) ||(newNext<banner.offsetLeft&&speed<0)){
banner.style.left=banner.offsetLeft+speed+'px';
setTimeout(go,interval);
}
else{
banner.style.left=newNext+'px';
if (parseInt(banner.style.left)<-2000) {
banner.style.left=-500+'px';
}
if (parseInt(banner.style.left)>-500) {
banner.style.left=-2000+'px';
}
}
}
go();
showbtn();
}
}
slideImg();
