轮播图（2）

2024-07-14 10:12| 来源: 网络整理| 查看: 265

上回书我们说到原生js淡入淡出效果的轮播图，这回我们说说左右滑动轮播图，由于需要缓动动画效果，原生js需要封装缓动函数，个人觉得不如JQ来的实在，所以本渣渣直接引入JQ，用JQ相对简单，重要的是思想。

1、思路

老规矩先来个大致思路，有个好的战略计划才能获取战斗的成功

1.1 css样式布局

有好的布局才能进行js的操控，css大致布局如下图

由上图简单的介绍一下布局红色的是最外层容器，固定宽高，老规矩相对定位，还有就是一定要有溢出隐藏（overflow:hidden）；ul根据图片的多少宽度相对倍数改变，，同样ul是绝对定位，js就是改变ul的绝对定位的left值控制显示第几张的图片；焦点图的布局和轮播图（1）一样的方法，不知道的去瞅瞅；左右按钮就的容器也是绝对定位，用margin-top或者top值控制距离上部的距离，宽度也是100%；然后各自向左右浮动，margin值控制按钮相距最外层左右的距离；

1.2 js的大致思路

js同样要实现动态创建和图片相同个数的焦点图，计时器控制ul的left值，从而动态显示最外层里所显示的图片，加上溢出隐藏，就成了动态轮播图

2、开搞 2.1 html代码 [站外图片上传中……(2)] [站外图片上传中……(3)] [站外图片上传中……(4)] [站外图片上传中……(5)] [站外图片上传中……(6)] [站外图片上传中……(7)] [站外图片上传中……(8)] 2.2 css代码 *{padding:0;margin:0;list-style: none;} .banner{ width:500px; height:312px; overflow: hidden; margin:0 auto; position:relative; } .banner>ul{ height:312px; width:3500px; position: absolute; left:0; top:0; } .banner>ul li{ float:left; width:500px; } .order{ display: block; height:30px; width:100%; position: absolute; top:90%; left:0; text-align: center; } .order i{ display:inline-block; width:16px; height:16px; border-radius: 50%; background:chocolate; border:2px solid chocolate; margin-right:10px; cursor:pointer; } .order i:last-child{ margin-right: 0; } .order .on{ background:white; } .ctrl{ width:100%; height:60px; position: absolute; top:120px; left:0; } .ctrl button{ width:40px; height:60px; background: #ccc; color:#FFF; border:0; outline:none; opacity: 0.5; font-size: 30px; cursor:pointer; } .ctrl .prev{ float:left; margin-left:10px; } .ctrl .next{ float:right; margin-right:10px; } 2.3 js代码 $(function(){ //创建控制小圆点 var imgLis = $('#banner>ul li'); console.log(imgLis.length); for(i=0;i imgLis.length){ num = 1; $('#banner>ul').css({left:'0'}); } var left = num*500; $('#banner>ul').animate({left:-left+'px'},function(){ state = true; }); //焦点 $('.order i').removeClass('on'); $('.order i').eq(num).addClass('on'); if(num >= imgLis.length){ $('.order i').first().addClass('on'); } } //自动播放 function autoPlay(){ timer = setInterval(function(){ num++; play(); },1000); } //添加鼠标移入暂停，移出继续事件 $('#banner').mouseover( function(){ clearInterval(timer); timer = null; } ).mouseout( function(){ autoPlay(); } ); //给左右按钮添加点击事件 $('.prev').click(function(){ if(state == true){ state = false; num--; console.log(num); play(); } }); $('.next').click(function(){ if(state == true){ state = false; num++; play(); } }); //给焦点添加点击事件 $('.order i').click(function(){ num = $(this).index() play(); }); autoPlay(); }); 3、注意

记得要引入jq，否则无法运行这个轮播图虽然可用，但是有个很大的弊病，就是点击焦点时，所点击的焦点的索引与此时所显示图片的索引相差的有1或者大于1时会跳跃式快速滑动到相对应所点击的焦点索引的图片，对于用户来说体验不太好，所以这个轮播图适合没有焦点图，需要使用此轮播图的童鞋，为了体验，最好删除掉焦点图部分相关代码。下一篇会有一个专门应对焦点图点击有良好体验的轮播图类型，敬请期待！

4、在线演示

在线演示

【本文地址】

轮播图（2）

轮播图（2）

今日新闻

推荐新闻