轮播实现

最新推荐文章于 2021-06-22 16:47:11 发布

Caishunqi

最新推荐文章于 2021-06-22 16:47:11 发布

阅读量324

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weshouldhelp/article/details/82623709

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jquery-3.1.1.min.js版本，图片大小为1080px*432px

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>jQuery焦点图蓝色箭头按钮切换代码 - 站长素材</title>

</head>

<body>

           //下一张
           function nextimg() {
               cArr.push(cArr[0]);
               cArr.shift();
               $("li").each(function(i, e) {
                   $(e).removeClass().addClass(cArr[i]);
               })
               index++;
               if(index > 6) {
                   index = 0;
               }
               show();
           }

           //通过底下按钮点击切换
           $a.each(function() {
               $(this).click(function() {
                   var myindex = $(this).index();
                   var b = myindex - index;
                   if(b == 0) {
                       return;
                   } else if(b > 0) {
                       /*
                       * splice(0,b)的意思是从索引0开始,取出数量为b的数组
                       * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
                       * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
                       * 这时候原本的数组也将这部分数组进行移除了
                       * 再把移除的数组添加的原本的数组的后面
                       */
                       var newarr = cArr.splice(0, b);
                       cArr = $.merge(cArr, newarr);
                       $("li").each(function(i, e) {
                           $(e).removeClass().addClass(cArr[i]);
                       })
                       index = myindex;
                       show();
                   } else if(b < 0) {
                       /*
                       * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
                       * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
                       * 也就是从原本的照片到需要点击的照片的数组
                       * 然后将原本的数组跟取出的数组进行拼接
                       * 再次倒序,使原本的倒序变为正序
                       */
                       cArr.reverse();
                       var oldarr = cArr.splice(0, -b)
                       cArr = $.merge(cArr, oldarr);
                       cArr.reverse();
                       $("li").each(function(i, e) {
                           $(e).removeClass().addClass(cArr[i]);
                       })
                       index = myindex;
                       show();
                   }
               })
           })

           //改变底下按钮的背景色
           function show() {
               $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
           }

           //点击class为p2的元素触发上一张照片的函数
           $(document).on("click", ".p2", function() {
               previmg();
               return false; //返回一个false值，让a标签不跳转
           });

           //点击class为p4的元素触发下一张照片的函数
           $(document).on("click", ".p4", function() {
               nextimg();
               return false;
           });

           //           鼠标移入box时清除定时器
           $(".box").mouseover(function() {
               clearInterval(timer);
           })

           //           鼠标移出box时开始定时器
           $(".box").mouseleave(function() {
               timer = setInterval(nextimg, 1000);
           })

           //           进入页面自动开始定时器
           timer = setInterval(nextimg, 1000);
       </script>

</body>

</html>

此文转自https://www.html5tricks.com/15-jquery-html5-image-player.html里面有十五个比较好看的轮播

只用于学习，不做其他用途

Caishunqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播实现

jquery-3.1.1.min.js版本，图片大小为1080px*432px&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery焦点图蓝色箭头按钮切换代码 - 站长素材&lt;/title&gt;
复制链接

扫一扫