javascript实现自动左滑的轮播图(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于javascript实现自动左滑的轮播图(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

最近做项目总是只会调用别人做好的各种插件效果,想起很久没来自己写点小插件,久了会忘记的,就赶紧来补一下,前端程序员必备,实现一个js轮播图。

html代码:

<!DOCTYPE HTML> <head>     <meta charset="utf-8">     <link rel="stylesheet" type="text/css" href="./demo.css"> </head>   <body>     <div class="slide">         <div class="img">             <ul id="slide_img">                 <li><img src="./img/timgZQQ905MD.jpg"></li>  <!--处理无缝衔接的图片-->                 <li><img src="./img/1486293868523.jpg"></li>                 <li><img src="./img/timg1.jpg"></li>                 <li><img src="./img/timg2.jpg"></li>                 <li><img src="./img/timgZQQ905MD.jpg"></li>             </ul>         </div>         <ul id="num">             <li></li>             <li></li>             <li></li>             <li></li>         </ul>         <div class="btn">             <span id="left"><</span>             <span id="right">></span>         </div>     </div>     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>     <!--通过百度CDN地址引用jQuery库-->     <script type="text/javascript" src="./demo.js"></script> </body>

此次的小demo样例用了4张图片,由于要实现无缝衔接,即最后一张顺畅地跳转到第一张,故在写html的时候,再重复了最后一张图片,然后通过直接定位,在轮播到最后一张图片的时候,将整个ul定位到第一张,由于第一张和最后一张是一样的,故效果看起来则顺畅自然的轮播。

css代码:

*{  margin: 0;  padding: 0; } .slide{  position: relative;  width: 1000px;  height: 500px;  margin: 40px auto;  overflow: hidden; } .img ul{  position: absolute;  left: -1000px;  width: 5000px; } .img li{  list-style-type: none;  float: left; } img{  width: 1000px;  height: 500px; } #num li{  list-style-type: none;  background-color: white;  border: 1px solid red;  border-radius: 100px;  float: left;  width: 10px;  height: 10px;  margin: 10px;  cursor: pointer; } #num {  position: absolute;  top: 450px;  left: 800px; } .btn{  font-size: 30px;  color: gray; } #left{  position: absolute;  top: 230px;  left: 40px;  cursor: pointer; } #right{  position: absolute;  top: 230px;  right: 40px;  cursor: pointer; }

css中需要注意的是定位的时候,整个外部的p是相对定位,而里面的内容ul则相对于外部p进行绝对定位,通过left,top等来设置位置

js代码:

$(document).ready(function () {  initRadius(); });  var number = 1;  //设置为全局变量  //轮播图图片主体 function startSlide() {  dealRadius(number);  if(number == 4) {   number = 0;   $('#slide_img').css({left: '0px'});  //处理无缝衔接图    dealRadius(0); // 处理无缝衔接小圆点的跳转  }  number++;  var imageLeft = -1000 * number;  $('#slide_img').animate({left: imageLeft}); }  var timer = setInterval(startSlide,3000);    //小圆点的轮播实现 function dealRadius(num) {  var lis = $('#num li');  lis.eq(num).css('background-color', 'red');  for(var i = 0; i < num; i++) {   lis.eq(i).css('background-color','white');  }  for(var i = num + 1; i < 4; i++) {   lis.eq(i).css('background-color','white');  } }  //初始化小圆点 function initRadius() {  var lis = $('#num li');  lis.eq(0).css('background-color', 'red'); }   //左右按钮的实现 $('#left').mousedown (function() {  clearInterval(timer);  if(number == 0) {   $('#slide_img').css({left: '-4000px'});    number = 4;  }  var imageLeft = -1000 * (number-1);  $('#slide_img').animate({left: imageLeft});  number--;  if(number == 0) {   dealRadius(3);  } else {    dealRadius(number-1);  } }); $('#left').mouseup(function() {  timer = setInterval(startSlide,3000); });  $('#right').mousedown (function() {  clearInterval(timer);  if(number == 4) {   number = 0;   $('#slide_img').css({left: '0px'});  //处理无缝衔接图  }  var imageLeft = -1000 * (number+1);  $('#slide_img').animate({left: imageLeft});  dealRadius(number);  number++;  }); $('#right').mouseup(function() {  timer = setInterval(startSlide,3000); });   //小圆点的点击实现 $('#num').on('click','li',function(){  clearInterval(timer);  var _number = $(this).index() + 1;  number = _number  dealRadius(number-1);  var imageLeft = -1000 * number;  $('#slide_img').animate({left: imageLeft});  timer = setInterval(startSlide,3000); });

js代码中,首先要知道关于定时器的使用,其中,关于dom的使用,好久没用啊,感觉很不熟悉。。自己得多来加强。。

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » javascript实现自动左滑的轮播图(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情