图片轮播

四张图片轮播效果

静态图片效果

582d21aa0001d9a911040535.jpg

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

这是完成后的效果图，代码中的图片地址需要你自己改。

此段代码仅供参考