本文共 1104 字，大约阅读时间需要 3 分钟。

    
           
           
   
    轮播图片演示
   
   
    
    
    
    
    
    
   
   
    1
   
   

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

/** * 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()
   

转载地址：http://ewumf.baihongyu.com/