zoukankan      html  css  js  c++  java
  • jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马

    资源:http://www.ido321.com/862.html

    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:   });

     

    打包下载:http://download.csdn.net/detail/u011043843/7994017

    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    那些好的句子
    ❤️博客使用说明-飞沙
    求n以内,除5的倍数的和
    C# 枚举
    2021年bilibili程序员节日
    MT管理器使用技巧
    腾讯找人工客服
    校报白皮书
    C语言教程(下)
    svn版本控制
  • 原文地址:https://www.cnblogs.com/yxwkf/p/4644724.html
Copyright © 2011-2022 走看看