jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马

html代码：

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <meta http-equiv="content-type" content="text/html;charset=utf-8">

   5:     <title>JQ图片轮播</title>

   6:     <!-- css -->

   7:     <link rel="stylesheet" type="text/css" href="style.css">

   8:     <!-- js -->

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

1:

   2:     <script type="text/javascript" src="style.js">

</script>

  10: </head>

  11: <body>

  12:     <div id="ad">

  13:         <ul>

  14:             <li>

  15:                 <a href="#" title="位置1"><img src="ad.png"></a>

  16:             </li>

  17:                <li>

  18:                 <a href="#" title="位置2"><img src="1.jpg"></a>

  19:             </li>

  20:             <li>

  21:                 <a href="#" title="位置3"><img src="2.jpg"></a>

  22:             </li>

  23:             <li>

  24:                 <a href="#" title="位置4"><img src="3.jpg"></a>

  25:             </li>

  26:          </ul>

  27:     </div>

  28:     <div class="slideshortcut">

  29:         <a id="SlidePrev" class="prev">&lt;</a>

  30:         <a id="SlideNext" class="next">&gt;</a>

  31:     </div>

  32:     <div class="jiaodiandiv">

  33:         <ul>

  34:             <li id="selectli"><span>1</span></li>

  35:             <li><span>2</span></li>

  36:             <li><span>3</span></li>

  37:             <li><span>4</span></li>

  38:         </ul>

  39:     </div>

  40: </body>

  41: </html>

css代码

   1: #ad

   2: {

   3:     width: 1350px;

   4:     height: 370px;

   5:     overflow: hidden;

   6:     margin-left:-5px;

   7:     position: relative;

   8: }

   9: #ad ul

  10: {

  11:     list-style: none;

  12:     position: absolute;

  13:     margin-left: -40px;

  14: }

  15: #ad ul li

  16: {

  17:     float: left;

  18:     width: 1350px;

  19:     height: 370px;

  20:     position: relative;

  21: }

  22: .slideshortcut a

  23: {

  24:     color: #000000;

  25:     text-decoration: none;

  26:     background-color: #fff;

  27:     display: block;

  28:     position: absolute;

  29:     z-index: 500;

  30:     top: 150px;

  31:     width: 50px;

  32:     height: 50px;

  33:     border: 1px solid red;

  34:     font-size: 40px;

  35:     line-height: 40px;

  36:     text-align: center;

  37:     opacity: 0;

  38: }

  39: .slideshortcut a:hover

  40: {

  41:     color: #000000;

  42:     text-decoration: none;

  43: }

  44: .prev

  45: {

  46:     left: 150px;

  47: }

  48: .next

  49: {

  50:     left: 1200px;

  51: }

  52: .jiaodiandiv

  53: {

  54:     position: absolute;

  55:     z-index: 200;

  56:     top: 320px;

  57:     left: 42%

  58: }

  59: .jiaodiandiv ul

  60: {

  61:     list-style: none;

  62: }

  63: .jiaodiandiv ul li

  64: {

  65:     width: 30px;

  66:     height: 30px;

  67:     margin-left: 10px;

  68:     float: left;

  69:     border: 1px solid #B7B7B7;

  70:     background-color: #B7B7B7;

  71:     border-radius:15px;

  72:     text-align: center;

  73: }

  74: #selectli

  75: {

  76:     background-color: #FF4400;

  77: }

  78: .jiaodiandiv li:hover

  79: {

  80:     cursor: pointer;

  81: }

  82: .jiaodiandiv span

  83: {

  84:     font-size: 20px;

  85:     line-height: 30px;

  86: }

js代码：

   1: $(document).ready(function()

   2:   {

   3:      /*轮播*/

   4:     var index = 0;

   5:     var jdlis = $('.jiaodiandiv li'); /*焦点li元素集合*/

   6:     var timer;

   7:     var liWidth = $('#ad').width();

   8:     var len = $("#ad ul li").length;

   9:     //左右滚动，即全部li元素都是在同一排向左浮动，所以这里须要计算出外围ul元素的宽度

  10:     $("#ad ul").css("width",liWidth * (len));

11:

  12:     //上一张button

  13:     $("#SlidePrev").click(function() {

  14:     clearInterval(timer);

  15:     index -= 1;

  16:     if(index == -1) {index = len - 1;}

  17:     showPic(index);

  18:     });

19:

  20:     //下一张button

  21:     $("#SlideNext").click(function() {

  22:     clearInterval(timer);

  23:     index += 1;

  24:     if(index == len) {index = 0;}

  25:     showPic(index);

  26:     });

  27:     //轮播

  28:     $('#ad').hover(

  29:     function()

  30:     {

  31:       clearInterval(timer); /*停止动画*/

  32:       $('.slideshortcut a').show().css('opacity','0.4');

  33:     },

  34:     function()

  35:     {

  36:         $('.slideshortcut a').hide();

  37:         timer=setInterval(function() {

  38:         showPic(index);

  39:         index++;

  40:         if(index == len) {index = 0;}

  41:       },2000);

  42:     }).trigger("mouseleave");

  43:     /*显示index图片*/

  44:     function showPic(index){

  45:      var nowLeft = -index*liWidth;

  46:      jdlis.eq(index).css('backgroundColor','#FF4400');

  47:      jdlis.not(jdlis.eq(index)).css('backgroundColor','#B7B7B7');

  48:      $("#ad ul").stop(true,false).animate({"left":nowLeft},300);

  49:      /*$('#loginimg').hide().fadeIn(1000);*/

  50:     }

  51:     $('.slideshortcut a').mouseover(function()

  52:     {

  53:       $('.slideshortcut a').show();

  54:     });

  55:     $('.prev').mouseover(

  56:     function()

  57:     {

  58:       $(this).css({opacity:'0.95',cursor:'pointer'});

  59:     });

  60:     $('.next').mouseover(

  61:     function()

  62:     {

  63:       $(this).css({opacity:'0.95',cursor:'pointer'});

  64:     });

  65:     /*点击焦点区的div显示相应图*/

  66:     jdlis.click(

  67:     function(){

  68:       clearInterval(timer);

  69:       index = jdlis.index(this);

  70:       showPic(index);

  71:     });

  72:   });