图片轮播

作者: 小小员 | 来源:发表于2017-11-02 19:39 被阅读0次

个人博客—轮播器
沉浸式渐变图片轮播器
JQ实现左右轮播效果
常用三方 SDCycleScrollView轮播图
用动画做图片轮播
第三方库之 banner
27.jquery 实战-轮播
无限图片轮播器 --- Objective-C
轮播
iOS高效图片轮播 - 两个imageView实现

四张图片轮播效果

静态图片效果

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