<!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>
