jQuery实现轮播图效果

通过改变背景色来达到效果，有下角标和左右箭头，都已经实现。

html部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>淡入淡出</title>
        <link rel="stylesheet" type="text/css" href="css/5---.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/5---.js"></script>
    </head>
    <body>
        <div id="box">
            <ul id="imgs">
                <li class="li1"></li>
                <li class="li2"></li>
                <li class="li3"></li>
            </ul>
            <ul id="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <a class="_left" href="#">左</a>
            <a class="_right" href="#">右</a>
        </div>
    </body>
</html>

jq代码：

var index = 0;
var timer;
$(function(){
    $('#list li').eq(0).css('background','gold')
    
    //点击页码换图
    $('#list li').click(function(){
        clearInterval(timer)
        index = $(this).index()
        $('#imgs li').eq(index).fadeIn().siblings().fadeOut()
        $(this).css('background','gold').siblings().css('background','')
        timer = setInterval(change,1000)
    })
    //鼠标滑过停止
    $('#imgs li').hover(
        function(){
            clearInterval(timer)
        },
        function(){
            timer = setInterval(change,1000)
        }
    )
    //左右切换
    $('._left').click(function(){    
        clearInterval(timer)
        index -= 2;
        change();
        timer = setInterval(change,1000)
    })
    $('._right').click(function(){    
        clearInterval(timer)
        change();
        timer = setInterval(change,1000)
    })
    timer = setInterval(change,1000)
})
function change(){
    if(index >= 3){
        index = 0;
    }
    if(index == -1){
        index = 2
    }
    $('#imgs li').eq(index).fadeIn().siblings().fadeOut()
    $('#list li').eq(index).css('background','gold').siblings().css('background','')
    index++;
}

思路千千种！

posted @ 2016-12-03 08:51  Q_zhangsan  阅读(524)  评论(0)    收藏  举报