使用JS实现图片轮播的实例(前后首尾相接)


Posted in Javascript onSeptember 21, 2017

最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码

代码参考了一位已经写好了图片轮播功能的(再次表示感谢),但是没有首尾相接的功能,本人在此基础上增加了首尾相接功能。

效果如下:

使用JS实现图片轮播的实例(前后首尾相接)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>图片轮播</title>
 <style type="text/css">
 body,div,ul,li,a,img{margin: 0;padding: 0;}
 ul,li{list-style: none;}
 a{text-decoration: none;}
 #wrapper{
  position: relative;
  margin: 30px auto; /* 上下边距30px,水平居中 */
  width: 400px;
  height: 200px;
 }
 #banner{
  position:relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
 }
 .imgList{
  position:relative;
  width:2000px;
  height:200px;
  z-index: 10;
  overflow: hidden;
 }
 .imgList li{float:left;display: inline;}
 #prev,
 #next{
  position: absolute;
  top:80px;
  z-index: 20;
  cursor: pointer;
  opacity: 0.2;
  filter:alpha(opacity=20);
 }
 #prev{left: 10px;}
 #next{right: 10px;}
 #prev:hover,
 #next:hover{opacity: 0.5;filter:alpha(opacity=50);}

</style>
</head>
<body>
 <div id="wrapper"><!-- 最外层部分 -->
 <div id="banner"><!-- 轮播部分 -->
  <ul class="imgList"><!-- 图片部分 -->
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/1.jpg" width="400px" height="200px" alt="1"></a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/2.jpg" width="400px" height="200px" alt="2"></a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/3.jpg" width="400px" height="200px" alt="3"></a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/4.jpg" width="400px" height="200px" alt="4"></a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/5.jpg" width="400px" height="200px" alt="5"></a></li>
 </ul>
 <img src="./img/prev.png" width="40px" height="40px" id="prev">
 <img src="./img/next.png" width="40px" height="40px" id="next">
</div>
</div>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var curIndex = 0, //当前index
 imgLen = $(".imgList li").length; //图片总数
$(".imgList").css("width", (imgLen+1)*400+"px");
// 定时器自动变换3秒每次
var autoChange = setInterval(function(){
 if(curIndex < imgLen-1){
  curIndex ++;
 }else{
  curIndex = 0;
 }
 //调用变换处理函数
 changeTo(curIndex);
},3000);

//左箭头滑入滑出事件处理
$("#prev").hover(function(){
 //滑入清除定时器
 clearInterval(autoChange);
}, function(){
 //滑出则重置定时器
 autoChangeAgain();
});

//左箭头点击处理
$("#prev").click(function(){
 //根据curIndex进行上一个图片处理
 // curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
 if (curIndex == 0) {
  var element = document.createElement("li");
  element.innerHTML = $(".imgList li")[imgLen - 1].innerHTML;
  // $(".imgList li")[imgLen - 1].remove();
  $(".imgList").prepend(element);
  $(".imgList").css("left", -1*400+"px");
  changeTo(curIndex);
  curIndex = -1;
 } else if (curIndex == -1) {
  $(".imgList").css("left", -(imgLen-1)*400+"px");
  curIndex = imgLen-2;
  $(".imgList li")[0].remove();
  changeTo(curIndex);
 } else {
  --curIndex;
  changeTo(curIndex);
 }

});

//右箭头滑入滑出事件处理
$("#next").hover(function(){
 //滑入清除定时器
 clearInterval(autoChange);
}, function(){
 //滑出则重置定时器
 autoChangeAgain();
});
//右箭头点击处理
$("#next").click(function(){
 // curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
 console.log(imgLen);
 if (curIndex == imgLen-1) {
  var element = document.createElement("li");
  element.innerHTML = $(".imgList li")[0].innerHTML;
  // $(".imgList li")[0].remove();
  $(".imgList").append(element);
  ++curIndex;
 } else if (curIndex == imgLen) {
  curIndex = 0;
  $(".imgList").css("left", "0px");
  $(".imgList li")[imgLen].remove();
  curIndex++;
 } else {
  ++curIndex;
 }
 changeTo(curIndex);
});

//清除定时器时候的重置定时器--封装
function autoChangeAgain(){
 autoChange = setInterval(function(){
  if(curIndex < imgLen-1){
   curIndex ++;
  }else{
   curIndex = 0;
  }
 //调用变换处理函数
 changeTo(curIndex);
 },3000);
}


function changeTo(num){
 var goLeft = num * 400;
 $(".imgList").animate({left: "-" + goLeft + "px"},500);
}
</script>
</body>
</html>

以上这篇使用JS实现图片轮播的实例(前后首尾相接)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
Node调用Java的示例代码
Sep 20 #Javascript
浅谈react前后端同构渲染
Sep 20 #Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 #Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 #Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 #Javascript
Angularjs使用过滤器完成排序功能
Sep 20 #Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
Javascript模板技术
2007/04/27 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
python hook监听事件详解
2018/10/25 Python
python多线程下信号处理程序示例
2019/05/31 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
生产车间标语
2014/06/11 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
工作失职检讨书500字
2014/10/17 职场文书
贷款担保书
2015/01/20 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
庭外和解协议书
2016/03/23 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android