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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
js中小数转换整数的方法
Jan 26 Javascript
javascript 回调函数详解
Nov 11 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
vue实现分页加载效果
Dec 24 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 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
discuz安全提问算法
2007/06/06 PHP
PHP高级OOP技术演示
2009/08/27 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
迟到检讨书1000字
2014/01/15 职场文书
学生宿舍管理制度
2014/01/30 职场文书
护士毕业实习感言
2014/03/05 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
解除施工合同协议书
2014/10/17 职场文书
施工安全保证书
2015/05/09 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
美元符号 $
2022/02/17 杂记