一个jquery轮播图

2020-05-22 18:07:16 阅读：216 来源： 互联网

标签：jquery opacity 轮播一个 bannerScroll adsettimeIndex eq css imgbg

<!DOCTYPE html> <html lang="en">
<head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style>     .clearfix:before,     .clearfix:after {       content: ' ';       display: table;     }
    .clearfix:after {       clear: both;     }
    body {       margin: 0;       padding: 0;       background-color: #fff;       box-sizing: border-box;       -moz-box-sizing: border-box;       /* Firefox */       -webkit-box-sizing: border-box;       /* Safari */     }
    body,     button,     input,     select,     textarea {       font: 14px/1.5 'Microsoft YaHei', tahoma, arial, \5b8b\4f53;       color: #333;     }
    ul,     li {       margin: 0;       padding: 0;       list-style: none;     }
    #bannerWrap {       height: 452px;       position: relative;       background: #ccc;     }
    #bannerWrap .bannerScroll {       height: 100%;     }
    #bannerWrap .bannerScroll .imgbg {       height: 452px;       position: absolute;       right: 0px;       left: 0px;       opacity: 0;       visibility: hidden;       transition: opacity 0.8s linear;       -moz-transition: opacity 0.8s linear;       /* Firefox 4 */       -webkit-transition: opacity 0.8s linear;       /* Safari 和 Chrome */       -o-transition: opacity 0.8s linear;       /* Opera ease*/     }
    #bannerWrap .dotcontrol {       position: absolute;       width: 100%;       bottom: 20px;       text-align: center;     }
    #bannerWrap .dotcontrol ul {       height: 10px;     }
    #bannerWrap .dotcontrol .dotli {       width: 10px;       height: 10px;       background: #fff;       border-radius: 10px;       display: inline-block;       margin-right: 20px;       vertical-align: top;     }
    #bannerWrap .dotcontrol .dotli:last-child {       margin-right: 0;     }
    #bannerWrap .dotcontrol .dotli.on {       background-color: orange;     }   </style>   <script>     $(document).ready(function () {       var adclickIndex = 0;       var $clickdottabad = $(".dotcontrol .dotli").eq(0);       $(".bannerScroll .imgbg").eq(0).css({ "opacity": 1 });       $(".bannerScroll .imgbg").eq(0).css({ "visibility": "visible" });
      var setImgeNumad = $(".bannerScroll .imgbg").length;       var adsettimeIndex = 0;       var intervalAdOk = function () {         $('.bannerScroll .imgbg').eq(adsettimeIndex).css({ 'opacity': 0 })         $('.bannerScroll .imgbg').eq(adsettimeIndex).css({ 'visibility': 'hidden' });         adsettimeIndex++;         if (adsettimeIndex >= setImgeNumad) {           adsettimeIndex = 0;         }         console.log(adsettimeIndex)         $(".dotcontrol .dotli").removeClass("on");         $(".dotcontrol .dotli").eq(adsettimeIndex).addClass("on");         $(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "visibility": "visible" });         $(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "opacity": 1 });         $clickdottabad = $(".dotcontrol .dotli").eq(adsettimeIndex);         adclickIndex = adsettimeIndex;       }       var setbannerintervalad = setInterval(intervalAdOk, 3000);       $(".dotcontrol .dotli").hover(function () {         clearInterval(setbannerintervalad);         var index = $(this).index();         var $currenttab = $(this);         // console.log(index, $currenttab)         if ($currenttab != $clickdottabad) {           $clickdottabad.removeClass("on");         }         $currenttab.addClass("on");         $clickdottabad = $currenttab;         if (index != adclickIndex) {           $(".bannerScroll .imgbg").eq(adclickIndex).css({ "opacity": 0 });           $(".bannerScroll .imgbg").eq(adclickIndex).css({ "visibility": "hidden" });           $(".bannerScroll .imgbg").eq(index).css({ "opacity": 1 });           $(".bannerScroll .imgbg").eq(index).css({ "visibility": "visible" });           adclickIndex = index;         }       }, function () {         setbannerintervalad = setInterval(intervalAdOk,3000);       })     });   </script> </head>
<body>   <div id="bannerWrap">     <div class="bannerScroll">       <div class="imgbg" style="background: url('images/b1.jpg') no-repeat center center;"></div>       <div class="imgbg" style="background: url('images/b2.jpg') no-repeat center center;"></div>       <div class="imgbg" style="background: url('images/b3.jpg') no-repeat center center;"></div>       <div class="imgbg" style="background: url('images/b4.jpg') no-repeat center center;"></div>     </div>     <div class="dotcontrol">       <ul class="clearfix">         <li class="dotli on"></li>         <li class="dotli"></li>         <li class="dotli"></li>         <li class="dotli"></li>       </ul>     </div>   </div> </body>
</html>

标签：jquery,opacity,轮播,一个,bannerScroll,adsettimeIndex,eq,css,imgbg
来源： https://www.cnblogs.com/gengxinnihaoma/p/12938670.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一个jquery轮播图