使用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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
理解javascript async的用法
Aug 22 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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 正则表达式常用函数
2014/08/17 PHP
浅谈php的优缺点
2015/07/14 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
javascript实现下雨效果
2017/03/27 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python基于socket函数实现端口扫描
2020/05/28 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
.NET remoting中对象激活的两种方式
2015/06/08 面试题
医学类个人求职信范文
2014/02/05 职场文书
《胡杨》教学反思
2014/02/16 职场文书
英文自荐信常用句子
2014/03/26 职场文书
小学生安全演讲稿
2014/04/25 职场文书
组织生活会发言材料
2014/12/15 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
公司慰问信范文
2015/03/23 职场文书
小学工作总结2015
2015/05/04 职场文书
小学班长竞选稿
2015/11/20 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python