图片轮播
2017-11-02 本文已影响0人
小小员
四张图片轮播效果
静态图片效果
582d21aa0001d9a911040535.jpg
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index2.css">
<title>Document</title>
</head>
<body>
<div class="main" id="main">
<div class="title" id="title">
<div class="side active">首页</div>
<div class="side">点击看看</div>
<div class="side">会自动的</div>
<div class="side">我的网站</div>
</div>
<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>
<a href="#">
<div class="banner-slide slide4"></div>
</a>
</div>
<script src="./index2.js"></script>
</div>
</body>
</html>
css部分
*{
margin: 0px;
padding: 0px;
}
.main{
position: relative;
width: 1000px;
height: 460px;
margin: 0 auto;
margin-top: 50px;
}
.title{
position: relative;
width: 1000px;
height: 60px;
font-family: "Microsoft YaHei";
font-size: 22px;
border: 1px solid;
border-color: rgba(235, 235, 235,0.9);
border-radius: 10px;
}
.title>div{
width: 250px;
height: 60px;
line-height: 60px;
float: left;
text-align: center;
cursor: pointer;
}
.active{
background-color: #ffcc00;
border-radius: 10px;
}
.banner{
width: 1000px;
height: 400px;
overflow: hidden;
}
.banner-slide {
width: 1000px;
height: 400px;
background-repeat: no-repeat;
display: none;
}
.slide-active {
display: block;
}
.slide1{
background-image: url(./img/1.jpg);
}
.slide2{
background-image: url(./img/3.jpg);
}
.slide3{
background-image: url(./img/4.jpg);
}
.slide4{
background-image: url(./img/5.jpg);
}
js部分
var timer = null;
var index = null;
var banner = byId("banner").getElementsByTagName("div");
var title = byId("title").getElementsByTagName("div");
var size = banner.length;
function byId(id) {
return typeof (id) === "string" ? document.getElementById(id):id;
}
function stopAutoPlay() {
if (timer) {
clearInterval(timer);
}
}
function startAutoPlay() {
timer = setInterval(function () {
index++;
if (index >= size) {
index = 0;
}
changeImg();
}, 1000);
}
function changeImg() {
for (var i = 0; i < size; i++) {
banner[i].style.display = "none";
title[i].className = "side";
}
banner[index].style.display = "block";
title[index].className = "side active";
}
function slideImg() {
var banner = byId("banner");
banner.onmouseover = function () {
stopAutoPlay();
}
banner.onmouseout = function () {
startAutoPlay();
}
banner.onmouseout();
for (var i = 0; i < title.length; i++) {
title[i].id = i;
title[i].onclick = function () { //0 1 2
index = this.id;
changeImg();
}
title[i].onmouseout=function(){
stopAutoPlay();
}
}
}
slideImg();
http://climg.mukewang.com/5833c50300010f1700010001.jpg
