JQuery简易轮播图

 

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <div class="igs">
        <div class="ig"><img src="images/1.jpg"></div>
        <div class="ig"><img src="images/2.jpg"></div>
        <div class="ig"><img src="images/3.jpg"></div>
        <div class="ig"><img src="images/4.jpg"></div>
        <div class="ig"><img src="images/5.jpg"></div>
        <div class="ig"><img src="images/6.jpg"></div>
    </div>
    <div class="tabs">
        <div class="tab bg">1</div>
        <div class="tab">2</div>
        <div class="tab">3</div>
        <div class="tab">4</div>
        <div class="tab">5</div>
        <div class="tab">6</div>
    </div>
</body>
</html>

 

css

*{
    margin: 0px;
    padding: 0px;
    font-family:"微软雅黑";
}
.ig{
    position:absolute;
}
.tab{
    color: #fff;
    width: 30px;
    height: 30px;
    background-color: #66c;
    float: left;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    border-radius: 100%;
    cursor:pointer;
}
.tabs{
    position: absolute;
    top: 290px;
    left: 250px;
}
.bg{
    background-color: red;
}

 

js

var i = 0;
var timer;
$(function() {
    $(".ig").eq(0).show().siblings().hide();//第一张图片显示，其TA隐藏
    timer = Lb();
    $(".tab").hover(function(){        //鼠标移入
        i = $(this).index();    //获取当前索引
        Show();
        clearInterval(timer);    //清除循环
    },function(){    //鼠标移出
        timer =Lb();    //恢复循环
    });
});

function Lb(){
    setInterval(function(){//循环播出
        i++;
        if(i==6){
            i=0;
        }
        Show();
    },3000);//3s
}

function Show(){
    // $(".ig").eq(i).show().siblings().hide();
    $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);//当前淡入其TA淡出，
    $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");//当前添加样式，其TA清除样式
}

 

posted @ 2016-03-06 12:38  嘆世殘者——華帥  阅读(242)  评论(0)    收藏  举报