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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
vue-router 学习快速入门
Mar 01 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
微信小程序支付前端源码
Aug 29 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
详解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 传值赋值与引用赋值的区别
2010/12/29 PHP
探讨如何把session存入数据库
2013/06/07 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
js查错流程归纳
2012/05/04 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
vue实现日历备忘录功能
2020/09/24 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
浅谈python字符串方法的简单使用
2016/07/18 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
详解python eval函数的妙用
2017/11/16 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
详解python中*号的用法
2019/10/21 Python
keras之权重初始化方式
2020/05/21 Python
django创建css文件夹的具体方法
2020/07/31 Python
python logging模块的使用
2020/09/07 Python
详解python中的闭包
2020/09/07 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
执行总经理岗位职责
2014/02/03 职场文书
《自然之道》教学反思
2014/02/11 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android