<!DOCTYPE html>

<html>

<head>

 <title></title>

 <meta charset="utf-8">

 <script type="text/jscript" src="js/jquery-1.11.3.js"></script>

 <style type="text/css">

 *{margin: 0;padding: 0}

 .fl{float: left;}

 .fr{float: right;}

 .cb{clear: both;}

 ul{list-style: none;}

 .lunbo{width: 730px;height: 458px;overflow: hidden;position: relative;margin: 0 auto;left: -30px;top: 188px;}

 .lunbo img{float: left;}

 .box{width: 5110px}

 .btn{width: 100%;height: 100px;position: absolute;top: 40%;display: none;}

 .lunbo .btn-l,.lunbo .btn-r{background-color: rgba(249,38,114,0.5);width: 50px;height: 100px;font-size: 82px;color: #ccc;border-radius: 10px;}

.list-li{position: absolute;bottom: 10px;left: 20%}

 .list-li li{float: left;width: 50px;height: 50px;background-color: #F9263E;line-height: 50px;text-align: center;border-radius: 50%;margin-left: 10px;color: #fff;font-size: 22px;}

/* 点缀 */

 .dianzui{width: 100%;height: 4px;background-color: #ccc;position: absolute;bottom: 0px}

 .dian{width: 1px;height:4px;background-color: red }

/* 遮罩层 */

 .fugai{position: absolute;left: 0;top: 0;height: 100%;width: 730px;

 }

 .fugai1,.fugai2,.fugai3{width: 243px;height: 730px;float: left;z-index: 999;overflow: hidden;}

 .btn-con-l,.btn-con-r{width: 150px;height: 100px;}

 .btn-con-l img,.btn-con-r img{width: 100%;height: 100%}



 </style>

</head>

<body>



 <div class="lunbo">

 <div class="fugai">

 <div class="fugai1"></div>

 <div class="fugai2"></div>

 <div class="fugai3"></div>

 <div class="cb"></div>

 </div>



 <div class="dianzui">

 <div class="dian"></div>

 </div>

 <div class="box">

 <img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo1.jpg">

 <img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo2.jpg">

 <img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo3.jpg">

 <img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo4.jpg">

 <img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo5.jpg">

 <img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo6.jpg">

 <img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo1.jpg">

</div>

 <div class="btn">

 <div class="btn-l fl"><</div>

 <div class="btn-con-l fl"></div>



 <div class="btn-r fr">></div>

 <div class="btn-con-r fr">r</div>





 </div>



 <ul class="list-li">

 <li>1</li>

 <li>2</li>

 <li>3</li>

 <li>4</li>

 <li>5</li>

 <li>6</li>

 </ul>

 </div>



 <script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript">

 var i=0;

 var stop;

/* 每隔2秒运行一次轮播*/

 stop=setInterval(function(){

 i++;

 if(i>6){

 i=1;

 }

 xiaoguo2(i);

 xiaoguo(i);

 },4000)

/* 动作函数*/

function xiaoguo2(n){

/* 块一*/

 $('.fugai1')

 .css({"background-p_w_picpath":"url(http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'})

 .animate({"backgroundPosition-x":-730+'px'},3000)

 .css({'display':'none'})

 //块二

 $('.fugai2')

 .css({"background-p_w_picpath":"url(http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":-200+'px'})

 .animate({"backgroundPosition-x":-730*2+'px'},3000)

 .animate({'display':'none'})

 //块三

 $('.fugai3')

 .css({"background-p_w_picpath":"url(http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'})

 .animate({"backgroundPosition-x":-730*3+'px'},3000)

 .animate({'display':'none'})

/* $('.fugai')

 .css({"background-p_w_picpath":"url(p_w_picpath/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'})

 .deplay(3000).animate({"backgroundPosition-x":-730*3+'px'},3000)

 .animate({'display':'none'},10) */

}

 $('.list-li>li').eq(0).css({'background-color':'orange'})

 function xiaoguo(n){

 var b=n-1;

$('.list-li>li').css({'background-color':'#F9263E'})

$('.list-li>li').eq(b).css({'background-color':'orange'})

 $('.dian').animate({'width':730+'px'},2000)

 $('.dian').animate({'width':0+'px'},100)

 $('.box').animate({'margin-left':-n*730+'px'},2000,function(){

 if(n==6){

 $('.box').css({'margin-left':0+'px'})

 }

 })

 }

/* 左右按钮*/

 function huan(n){

 var j=i;

 i=i+n;



 if(i>6){

 i=1;

 }

 if(i<0){

 i=5;

 }

 xiaoguo(i);

 }

 //左箭头

 $('.btn-l').click(function(){

 clearInterval(stop);

 stop=null;

huan(-1);

if(i==0){

 $('.btn-con-l').html('<img src="p_w_picpath/lunbo'+parseInt(6)+'.jpg">')

 }else{

 $('.btn-con-l').html('<img src="p_w_picpath/lunbo'+parseInt(i)+'.jpg">')

 }

 $('.box').stop(true,true);

 $('.dian').stop(true,true);



 });

 //右箭头

 $('.btn-r').click(function(){

 clearInterval(stop);

 stop=null;

 huan(1);

if(i==5){

 $('.btn-con-r').html('<img src="p_w_picpath/lunbo'+parseInt(1)+'.jpg">')

 }else if (i==6) {

 $('.btn-con-r').html('<img src="p_w_picpath/lunbo'+parseInt(2)+'.jpg">')

 }else{

 $('.btn-con-r').html('<img src="p_w_picpath/lunbo'+parseInt(i+2)+'.jpg">')

 }

 $('.box').stop(true,true);

 $('.dian').stop(true,true);

 });

 //$('.btn-l').click(function(){huan(-1);});

 //$('.btn-r').click(function(){huan(1);});



/* 鼠标放上大块*/

 $('.lunbo').mouseover(function(){

 clearInterval(stop);

 stop=null;

 $('.btn').show();



 })

/* 鼠标离开大块*/

 $('.lunbo').mouseout(function(){

 if(stop==null){

 stop=setInterval(function(){

 i++;

 if(i>6){

 i=1;

 }

 xiaoguo(i);

 xiaoguo2(i);

 },4000)

}

 $('.btn').hide();

 $('.btn-con-l').text('');

 $('.btn-con-r').text('');

 })

/*按钮小标题*/

 $('.list-li>li').mouseover(function(){

clearInterval(stop);

 stop=null;

 i= Number($(this).text());

 xiaoguo($(this).text())

 $('.box').stop(true,true);

 $('.dian').stop(true,true);

 })



 </script>

</body>

</html>