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基础第一章 JavaScript与用户端
Jul 22 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
React key值的作用和使用详解
2018/08/23 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python如何将多个PDF进行合并
2019/08/13 Python
python中判断文件结束符的具体方法
2020/08/04 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
非常详细的C#面试题集
2016/07/13 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
会计专业的自荐信
2013/12/12 职场文书
吨的认识教学反思
2014/04/27 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
教师个人年度总结
2015/02/11 职场文书
工资证明格式模板
2015/06/12 职场文书
正规欠条模板
2015/07/03 职场文书
部门主管竞聘书
2015/09/15 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL