史上最简单jquery轮播图

﹏ヽ暗。殇╰゛Y 2022-07-16 13:11 197阅读 0赞

直接上代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>序号</title>
    <style type="text/css">
    body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}
    p,from,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;}
    ul,ol,li{margin:0px;padding:0px;list-style:none;}
    img{border:none;}
    a{color:#333333;text-decoration:none;}
    a:hover{color:#666666;text-decoration:none;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-table}
    
    #box{width:320px;height:480px;position:relative;overflow:hidden;}
    #box li{width:320px;height:480px; background:#ccc; text-align:center; line-height:480px;}
    
    #box ol{position:absolute;width:320px;z-index:99;left:0;bottom:10px; text-align:center;}
    #box ol li{display:inline-block; text-align:center; width:24px; height:24px; line-height:24px; border:solid 1px #3F8AE3; cursor:pointer;}
    #box ol li.current{background:#3F8AE3; color:#fff;}
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    	 var index =0;
    	var timer = setInterval(function(){ //自动
    		index = (index == 0) ? 0 : index + 1;          
    		$("#box ul li").hide().eq(index).show();
    		$('#box ol li').eq(index).addClass('current').siblings().removeClass('current');
    	}, 3000);
    	$("#box ol li").mouseover(function(){
    		var index = $(this).index();
    		$("#box ul li").eq(index).show().siblings().hide();
    		$(this).addClass('current').siblings().removeClass('current');
    	})	
    	
    })
    </script>
    </head>
    
    <body>
    
    <div id="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    </body>
    </html>