<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>幻灯片</title> </head> <style type="text/css"> *{margin:0px;padding:0px;} li{list-style: none;} .container{ width:980px; height:600px; margin:0px auto; } .nav_btn{ width:100%; height:100px; margin-bottom:20px; position: relative; } .btn_left{ cursor:pointer; position: absolute; left:-30px; top:30px; width:0; height:0; border:30px solid transparent; border-right-color:#f00; overflow: hidden; } .btn_right{ cursor:pointer; position: absolute; right:-30px; top:30px; width:0; height: 0; border:30px solid transparent; border-left-color:#f00; overflow: hidden; } .small_slide{ width:900px; margin:0px auto; overflow-x: hidden; position:relative; height:130px; } .small_slide ul{ position:absolute; width:10000px; left:0px; top:0px; } .small_slide ul li{ width:124px; margin-right:20px; height:94px; text-align: center; display: block; color:#fff; float:left; background:#000; line-height: 100px; border:3px solid transparent; cursor: pointer; } .small_slide ul .active{ border:3px solid #f00; position: relative; } .small_slide ul .active:before{ content: ''; width:0px; height:0px; border:7px solid transparent; border-top-color: #f00; position: absolute; left:50%; margin-left:-3px; bottom:-15px; z-index: 9; display: block; } .content_div{ width:100%; height:490px; position: relative; } .big_btn_left{ position: absolute; display:block; left:-20px; top:160px; width:0; height:0; border:50px solid transparent; border-right-color:red; overflow: hidden; cursor: pointer; } .big_btn_right{ position: absolute; display: block; right:-20px; top:160px; width:0; height:0; border:50px solid transparent; border-left-color:red; overflow: hidden; cursor: pointer; } .content_cover{ width:800px; height:480px; margin:0px auto; } .content_cover ul{ width:100%; height:100%; display: block; position:relative; } .content_cover ul li{ width:100%; height:100%; display: none; background:#000; color:#fff; line-height:10em; text-align: center; font-size:50px; } </style> <body> <div class="container"> <div class="nav_btn"> <span class="btn_left">向左</span> <span class="btn_right">向右</span> <div class="small_slide"> <ul> <li class="active">1</li> <li >2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> </ul> </div> </div> <div class="content_div"> <span class="big_btn_left">向左</span> <span class="big_btn_right">向右</span> <div class="content_cover"> <ul> <li style="display:block;">1</li> <li >2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> </ul> </div> </div> </div> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ slideView({ btn_left:'.btn_left',//小图按钮 左 btn_right:'.btn_right',//小图按钮 右 big_btn_left:'.big_btn_left',//大图按钮 左 big_btn_right:'.big_btn_right',//大图按钮 右 small_slide:'.small_slide',//小图外层 content_cover:'.content_cover',//内容外层 show:6,//显示的个数 distance:150,//小图运动间隔（px） }); function slideView(options){ var btn_left=$(options.btn_left); var btn_right=$(options.btn_right); var big_btn_left=$(options.big_btn_left); var big_btn_right=$(options.big_btn_right); var smallLi=$(options.small_slide+'>ul>li'); var smallUl=$(options.small_slide+'>ul'); var contentLi=$(options.content_cover+'>ul>li'); var oLength=$(options.content_cover+'>ul>li').length; var count=0; var show=options.show; var distance=options.distance; big_btn_left.on('click',function(){ doPrev(); }); big_btn_right.on('click',function(){ doNext(); }); btn_left.on('click',function(){ doPrev(); }) btn_right.on('click',function(){ doNext(); }); smallLi.on('click',function(){ var index=$(this).index(); count=index; dosome(index); }); function doPrev(){ if(count!==0){ count--; } //console.log(count); if((count+1)%show==0){ var disAn=-count%(show-1)*show*distance; smallUl.stop().animate({'left':disAn}); } dosome(count); } function doNext(){ if(count!==oLength-1){ count++; } //console.log(count); if(count%show==0){ var disAn=-count*distance; smallUl.stop().animate({'left':disAn}); } dosome(count); } function dosome(count){ smallLi.eq(count).siblings().removeClass('active'); smallLi.eq(count).addClass('active'); contentLi.eq(count).siblings().css('display','none'); contentLi.eq(count).css('display','block'); } }; }); </script> </body> </html>