Q-zhangsan

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

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++;
}

思路千千种!

分类:

技术点:

相关文章: