jQuery焦点轮播图

来源：互联网发布：弹力牛仔裤男知乎编辑：程序博客网时间：2024/06/03 10:22

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>        <title></title>        <script type="text/javascript">            $(document).ready(function() {                var imgsrollLength = $("#imgsroll li").length;//3                   var index = 0;                var t;//定时器                var srollTime = 3000;//图片轮播时间                //图片隐藏消失                function animate(index){                    $("#imgsroll li").animate({                        opacity:0                    });                    $("#imgsroll li").eq(index).animate({                        opacity:1                    });                }                //圆点显示                function showButtons(index){                    $("#point li").removeClass("on")                    $("#point li").eq(index).addClass("on");                }                //圆点点击显示                $("#point li").each(function(){                    $(this).click(function(){                        //点击当前的按钮时不运行下面的代码                        if(this.className=="on"){                            return false;                        }                        showButtons($(this).index());                        animate($(this).index());                    })                })                //自动运行                function srollAuto(){                    t = setTimeout(function(){                        $("#next").click();                        srollAuto()                    },srollTime)                }                srollAuto();                //停止自动                function srollStop(){                    clearTimeout(t)                }                //鼠标移入移出事件                $("#banner").mouseover(function(){                    srollStop();                    $("button").show();                })                $("#banner").mouseout(function(){                    $("button").hide();                    srollAuto()                })                //方向按钮点击事件                $("#next").click(function(){                    index++;                    if(index==imgsrollLength){                        index = 0;                    }                    animate(index)                    showButtons(index);                })                $("#prev").click(function(){                    index--;                    if(index<0){                        index = imgsrollLength-1;                    }                    animate(index);                    showButtons(index);                })            })        </script>    </head>    <style>        * {list-style: none;padding: 0;margin: 0}        #banner{width:640px;overflow: hidden;height:350px;position: relative;cursor: pointer;}        #imgsroll{width:3000px;height:350px;position: absolute;}        #imgsroll li{float:left;position: absolute;opacity: 0;}        #imgsroll li.on{opacity: 1;}        #point{position: absolute;bottom:20px;left:50px;}        #point li{width:20px;height:20px;border-radius: 50%;background: #333;float:left;margin-right: 10px;}        #point li.on{background: red;}        button{position: absolute;bottom:180px;z-index:99;font-size: 40px;color:#ebebeb;background: transparent;border:none;cursor: pointer;display: none;}        #prev{left:0}        #next{right:0}    </style>    <body>        <div id="banner">            <ul id="imgsroll">                <li class="on"><img src="001.jpg" /></li>                <li><img src="002.jpg" alt="" /></li>                <li><img src="003.jpg" alt="" /></li>            </ul>            <ul id="point">                <li class="on"></li>                <li></li>                <li></li>            </ul>            <button id="prev">＜</button>            <button id="next">＞</button>        </div>    </body></html>

一、方向按钮点击，根据改变index参数的值，把参数传入到animate函数中，实现图片的变化，并且控制index的范围，实现图片无限滚动

二、添加圆点显示隐藏的事件showButtons函数，并且绑定到方向点击事件上，将方向点击的函数中的index参数传入showButtons函数中

三、给圆点遍历，添加点击事件，点击当前某一个圆点时，可以通过$(this).index()获取当前点击的这个圆点的顺序值，然后将这个顺序值作为参数，分别传入animate函数和showButtons函数中。

四、添加自动轮播事件，停止轮播事件，鼠标移入移出事件。

阅读全文

0 0