使用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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
JS实现留言板功能
Jun 17 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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采集速度探究总结(原创)
2008/04/18 PHP
php 图片上添加透明度渐变的效果
2009/06/29 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
jquery 插件开发备注
2010/08/27 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python实现按长宽比缩放图片
2018/06/07 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
《游戏公平》教学反思
2016/02/20 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
Linux中各个目录的作用与内容
2022/06/28 Servers