jQuery实现轮播图效果

匿名 (未验证) 提交于 2019-12-02 21:53:52

任务实现:用jQuery实现轮播图。

来自瓶子啊之小白,欢迎来访,欢迎指导。

相信大家从事前端的开发者初级就是轮播图,首先我用jquery写了一个,第二篇我会用原生JavaScript给大家展示。其原理是一样的,只不过jquery封住好了一些属性和方法。获取节点和实现效果就比较方便快捷了。

下面是展示代码和介绍:

html部分代码:

<div class="slideshow">     <div class="btn">         <span class="last-img">&lt;</span><span class="next-img">&gt;</span>     </div>     <div class="ra-show">         <i class="active">1</i>         <i>2</i>         <i>3</i>         <i>4</i>         <i>5</i>     </div>     <ul>         <li style="display: block;">             <a href="#"><img src="img/wangou1.jpg" /></a>         </li>         <li>             <a href="#"><img src="img/wangou2.jpg" /></a>         </li>         <li>             <a href="#"><img src="img/wangou3.jpg" /></a>         </li>         <li>             <a href="#"><img src="img/wangou4.jpg" /></a>         </li>         <li>             <a href="#"><img src="img/wangou5.jpg" /></a>         </li>     </ul> </div>

css部分代码:

* {     padding: 0;     margin: 0; }  .slideshow {     height: 300px;     width: 500px;     margin: 0 auto;     margin-top: 100px;     overflow: hidden;     position: relative; }  .slideshow .btn {     height: 50px;     width: 100%;     position: absolute;     top: 45%;     z-index: 2; }  .slideshow .ra-show {     height: 20px;     width: ;     position: absolute;     bottom: 20px;     left: 45%;     z-index: 2; }  .ra-show i {     width: 18px;     height: 18px;     display: inline-block;     border-radius: 50px;     background: #efefef;     font-size: 12px;     line-height: 18px;     text-align: center;     cursor: pointer; }  .slideshow .ra-show .active {     background: #ff9000;     box-shadow: 0 0 10px #FF9000; }  .btn span {     height: 50px;     width: 50px;     background-color: rgba(0, 0, 0, 0.2);     line-height: 50px;     text-align: center;     border-radius: 50%;     cursor: pointer;     font-size: 20px;     color: #ffffff; }  .btn span:hover {     background-color: rgba(0, 0, 0, 0.5); }  .btn .last-img {     float: left; }  .btn .next-img {     float: right; }  .slideshow ul {     position: relative; }  .slideshow ul li {     height: 300px;     width: 500px;     list-style: none;     position: absolute;     display: none; }  .slideshow ul li:hover {     cursor: pointer; }  .slideshow ul li img {     height: 300px;     width: 500px; }
css代码实现

js部分代码:

 1 //引入jQuery文件  2 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>  3 <script type="text/javascript">  4     //声明一个变量,下面的时候通过算术方法改变变量的值  5     var current = 0;  6     //初始化数据  7     var timer = null;  8     var pre = null;  9     var nex = null; 10     $(document).ready(function() { 11         var li_v = $('.slideshow ul li'); 12         var i_v = $('.ra-show i'); 13         //设置自动播放 14         function mover() { 15             //首先清除当前current以外的li_v的样式显示和伪圆标i_v的效果, 以下的同上 16             li_v.hide(); 17             //                i_v.eq(current).removeClass("active"); 18             i_v.removeClass("active"); 19             current = (current + 1) % (li_v.length); 20             console.log(current); 21             //当鼠标放在伪圆标时候获取当前的索引值,并把它赋给current从而实现了移出鼠标的时候跳转到下一个图片轮播 22             i_v.mouseover(function() { 23                 current = $(this).index(); 24                 //                    console.log($(this).index()); 25             }); 26             //当鼠标放在伪圆标时候获取当前的索引值,并把它赋给current从而实现下一个图片轮播 27             li_v.eq(current).fadeIn(1000); 28             i_v.eq(current).addClass("active"); 29         }; 30         //设置自动轮播 31         timer = setInterval(mover, 2000); 32         //鼠标划入的时候停止轮播 33         li_v.mouseover(function() { 34             clearInterval(timer); 35         }); 36         //鼠标移出的时候继续轮播 37         li_v.mouseout(function() { 38             timer = setInterval(mover, 2000); 39         }); 40         //实现左右按钮事件 41         //点击左按钮事件 42         $(".last-img").click(function() { 43             //    首先清除定时器 44             clearInterval(timer); 45             clearInterval(pre); 46             //实现点击按钮显示上一个图片代码 47             function last_v() { 48                 li_v.hide(); 49                 i_v.removeClass("active"); 50                 current = (current - 1 + li_v.length) % (li_v.length); 51                 //console.log(current); 52                 li_v.eq(current).fadeIn(1000); 53                 i_v.eq(current).addClass("active"); 54             }; 55             pre = setTimeout(last_v, 10); 56             timer = setInterval(mover, 2000); 57         }); 58         //点击右按钮事件 59         //只需继续轮播就可以 60         $(".next-img").click(function() { 61             //    首先清除定时器 62             clearInterval(timer); 63             clearInterval(nex); 64             //console.log(current); 65             //调用自动轮播的代码和点击上一张图片代码的setTimeout 66             nex = setTimeout(mover, 10); 67             timer = setInterval(mover, 2000); 68         }); 69         //添加伪类下标圆标动事件 70         //鼠标碰到伪圆标的时候显示所对应的图片并且停止页面。 71         i_v.mouseover(function() { 72             clearInterval(timer); 73             i_v.removeClass("active"); 74             li_v.hide(); 75             li_v.eq($(this).index()).fadeIn(1000); 76             $(this).addClass("active"); 77             //console.log($(this).index()); 78         }); 79     }); 80 </script>

完成实现,欢迎来访!!!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!