js轮播图无缝滚动效果


Posted in Javascript onJune 17, 2017

在做轮播图时如果首尾不能连起来的话,效果会有点丑,下面介绍一种我常用的方法:

先文字说明一下:

如果要展示5张图,分别为1,2,3,4,5  那么在代码的引入中是这样的:1,2,3,4,5,1

按顺序的轮播在此就不多说,重点说的是5>1和1>5的轮播

i  表示当前图片的索引

pre 表示上一张图片的按钮

next 表示下一张图片的按钮

ul 表示图片列表

(1)  5>1>2...   当“next”按钮从5到1时按顺序正常轮播,当前图片为第二个“1”时,下一张图片应该是“2”,那么再“next”时是ul的left的值为0,i==1;

(2) 1>5>4....  当“pre”按钮从当前图片“1”(第一个1)轮播到图片5时,i==4,ul的left值变为img宽的-5倍,也就是让第一个1悄悄的变为最后一个1;

用语言表述有点乱,下面放代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 *{padding: 0;margin: 0;}
 .container{
 width: 273px;height: 163px;overflow: hidden;
 position: relative;margin: 0 auto;
 }
 .list{
 position: absolute;width: 1638px;top: 0;left: 0px;
 }
 .list li{
 float: left;list-style: none;
 }
 .btn{
 position: absolute;display: block;width: 40px;height: 50px;font-size: 40px;
 text-align: center;font-weight: bold;top: 50%;margin-top: -25px;background-color: rgba(255,255,255,0.5);cursor:pointer;
 }
 .btn:hover{
 background-color: rgba(0,0,0,0.3);color: #fff;
 }
 .pre{
 left: 0;
 }
 .next{
 right: 0;
 }
 .nav{
 position: absolute;bottom: 5px;display: flex;justify-content: center;width: 100%;
 }
 .nav span{
 width: 10px;height: 10px;border-radius: 10px;background-color: #fff;z-index: 2;display: inline-block;margin-right: 10px;cursor: pointer;
 }
 span.on{
 background-color: orange;
 }
 </style>
</head>
<body>
 <div class="container">
 <ul class="list" style="left: 0px">
 <li><img src="./images/1.png" alt=""></li>
 <li><img src="./images/2.png" alt=""></li>
 <li><img src="./images/3.png" alt=""></li>
 <li><img src="./images/4.png" alt=""></li>
 <li><img src="./images/5.png" alt=""></li>
 <li><img src="./images/1.png" alt=""></li>
 </ul>
 <div class="nav">
 <span class="on"></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 <em class="next btn">></em>
 <em class="pre btn"><</em>
 </div>
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript">
 $(function(){
 var i=0;
 $('.next').click(function(){
 i++;
 console.log(i);
 
 moveImg(i);
 
 });
 $('.pre').click(function(){
 i--;
 moveImg(i);
 
 });
 $('.nav span').click(function(){
 var _index=$(this).index();
 i=_index;
 moveImg(i);
 
 
 });
 // i的作用:决定下一张图片是谁————也就是说ul的left是多少。
 // $('.list').css({left)的值是从图a过度是此时的ul的left。
 function moveImg(){
 if (i==6) {
 i=1;
 $('.list').css({'left':'0'});
 }
 // 是第一张
 if(i==-1){
 i=4;
 $('ul').css({left:(5*-273)});
 }
 $('.list').stop().animate({'left':-273*i+'px'},1000);
 if (i==5) {
 $('.nav span').eq(0).addClass('on').siblings().removeClass('on');
 
 }
 $('.nav span').eq(i).addClass('on').siblings().removeClass('on');
 
 }
 })
 </script>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 #Javascript
vue-router单页面路由
Jun 17 #Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 #Javascript
JavaScript输入框字数实时统计更新
Jun 17 #Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 #Javascript
bootstrap paginator分页前后台用法示例
Jun 17 #Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 #Javascript
You might like
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
Node中使用ES6语法的基础教程
2018/01/05 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
JS访问对象两种方式区别解析
2020/08/29 Javascript
python实现简易版计算器
2020/06/22 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Python中的流程控制详解
2021/02/18 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
党校自我鉴定范文
2013/10/02 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
会计专业自我评价
2014/02/12 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
新闻发布会主持词
2014/03/28 职场文书
美丽心灵观后感
2015/06/01 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
python中的3种定义类方法
2021/11/27 Python