HTML5简单轮播的实现(使用JQuery)

来源：互联网发布：知乎电子书 kindle 编辑：程序博客网时间：2024/06/04 08:49

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>轮播图片</title>    <link href="css/index.css" rel="stylesheet">    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>    <script src="js/index.js"></script></head><body><header>轮播图片演示</header><div id="slider" class="scroll-container">    <li><img src="img/53a103bf4d556be4d50ab3c9401704e2.jpg"></li>    <li><img src="img/77e585e530b79d4bfdbb75c54fbad90d.jpg"></li>    <li><img src="img/de4f585e6ebade60b7087802c3760819.jpg"></li></div><div id="instruction" class="instruction">1</div><footer>    </footer></body></html>

CSS代码

header{    font-size: larger;}.scroll-container{    width: 900px;    height: 300px;    overflow: hidden;}li{    list-style-type: none;}.instruction{    width: 900px;    height: 30px;    background-color: darkgray;    opacity: 0.5;    margin-top: -30px;    text-align: center;    color: red;    font-size: 25px;}

JS代码

/** * Created by dxp on 2017/4/17 0017. *///                    <!-- 计数幻灯片 -->var count=1;//                    <!--获取总数-->function scroll_news(){//                        图片切换    var firstNode = $('#slider li'); //获取li对象    firstNode.eq(0).fadeOut("slow", function(){ //获取li的第一个,执行fadeOut,并且call - function.        //计数        if(count==3){            count=1;        }else {            count++;        }         $("#instruction").html(count)//                            图片切换        $(this).clone().appendTo($(this).parent()).show(); //把每次的li的第一个 克隆，然后添加到父节点 对象。        $(this).remove();//最后  把每次的li的第一个 去掉。    });//注意哦,这些都是在fadeOut里面的callback函数理执行的。}setInterval('scroll_news()',3000);//每隔0.5秒，执行scroll_news()<!--轮播脚本-->

0 0