码迷,mamicode.com
首页 > 其他好文 > 详细

自己写的简单的轮播图

时间:2014-09-28 20:43:05      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   java   sp   

代码部分:

<!DOCTYPE html>
<html>
    <head>
        
<style type="text/css">
    *{margin:0px; padding:0px;}
    .flash{width:100%; height:400px;  overflow:hidden;
            position:relative;color:#fff;}
    .flash ul.con li{list-style-type:none;width:100%; height:400px; 
                    position:absolute; left:0px; top:0px;}
                    
    .flash ul.but{ width:200px; position:absolute;top:350px; left:45%; z-index:222;}
    
    .flash ul.but li{width:13px; height:13px; display:inline-block;float:left;background:url("images/dot.png") -13px 0px; margin:0 5px;}
    
    .flash ul.but li.current{background:url("images/dot.png") 0px 0px;}

</style>

    </head>
<body>
<div class="flash">
    <ul class="con">
        <li style="background:url(‘images/img1.jpg‘) center;">0</li>
        <li style="background:url(‘images/img2.jpg‘) center">1</li>
        <li style="background:url(‘images/img3.jpg‘) center">2</li>
        <li style="background:url(‘images/img4.jpg‘) center">3</li>
    </ul>

<!--     <ul class=but>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul> -->
    <!-- 小图标 -->
    

</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>





<script>
    //没有图标版
    $(function(){
        
        index=-1;
        Time = setInterval(function(){
            index++;
            if(index==3){
                index=-1;
            }
            $(.con li).eq(index).fadeIn(1000).siblings().fadeOut(1000);
            
        },3000);
                
    })

</script>



<!--
小图标版
<script type="text/javascript">
    var index = 0;
    var times;
    var nowIndex=0;
    time=setInterval(function times(){
        index++;
        if(index>3){index=0}
        $(".con li").eq(index).fadeIn().siblings().fadeOut();
        $(".but li").eq(index).addClass(current).siblings().removeClass(current);
    },3000);
    

    $(.but li).mouseover(function(){
        clearInterval(time);
        $(this).addClass(current).siblings().removeClass(current);
    
        $(".con li").eq($(".but li").index($(this))).fadeIn().siblings().fadeOut();
        
        
    })
    


    $(.but li).mouseout(function(){
        index=-1;
        time=setInterval(function times(){
        index++;
        if(index>3){
        index=0}
        $(".con li").eq(index).fadeIn().siblings().fadeOut();
        $(".but li").eq(index).addClass(current).siblings().removeClass(current);
        },3000);
    })

    

    
</script>
-->




</body>
</html>

 

自己写的简单的轮播图

标签:style   blog   http   color   io   os   ar   java   sp   

原文地址:http://www.cnblogs.com/xinlinux/p/3998627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!