基于jquery实现轮播焦点图插件_jquery

来源：福奇养生网

直接上代码，可能不是最好的，欢迎吐槽。

Html

CSS

 .slider {
 height: 440px;
 overflow: hidden;
 position: relative;
 }
 .slider .btn li{
 position: absolute;
 width: 30px;
 height: 50px;
 cursor: pointer;
 color: #fff;
 text-align: center;
 font-size: 40px;
 top:45%;
 }
 .slider .btn li:first-child {
 
 left:0;
 
 }
 
 .slider .btn li:last-child {
 
 right:0;
 
 }
 
 .slider img {
 width: 100%;
 height: 100%;
 }
 
 .slider .window {
 width: 40000px;
 height: 400px;
 overflow: hidden;
 }
 
 .slider .window li {
 float: left;
 overflow: hidden;
 width: 1200px;
 }
 
 .slider .tab {
 position: absolute;
 z-index: 5;
 width: 880px;
 margin: -40px auto;
 left: 13%;
 }
 
 .slider .tab li {
 float: left;
 width: 200px;
 height: 80px;
 margin-left: 18px;
 cursor: pointer;
 }

Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。

Run 起来：
$('.slider').slider({auto: true, interval: 2000});

改进js结构：