使用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 相关文章推荐
深入了解javascript中的prototype与继承
Apr 14 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 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读取目录所有文件信息dir示例
2014/03/18 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
python实现将文本转换成语音的方法
2015/05/28 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
python与idea的集成的实现
2020/11/20 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
质量主管工作职责
2014/09/26 职场文书
优秀高中学生评语
2014/12/30 职场文书
春节晚会开场白
2015/05/29 职场文书
教师节感想
2015/08/11 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript