首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现轮播图特效

Posted in Javascript onMay 28, 2020

本文实例为大家分享了js实现轮播图特效的具体代码，供大家参考，具体内容如下

只需要修改图片的src即可

html:

<body>
 <div id="rollImgBox">
 <div class="photos clearfix">
  <!--轮播图里面首位多放最后一张与第一张图片，以便顺畅平滑切换-->
  <div class="move"><img src="img/timg%20(7).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(4).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(5).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(6).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(7).jpg" alt=""></div>
  <div class="move"><img src="img/timg%20(4).jpg" alt=""></div>
 </div>
 <!--points圆点导航,js动态生成-->
 <div class="points"></div>
 <!--如果需要向左与向右的按键，引入方向图片-->
 <span class="leftPoint"> < </span>
 <span class="rightPoint"> > </span>
 </div>
</body>

style:

*{
 margin: 0;
 padding: 0;
}
.clearfix{
 zoom: 1;
}
.clearfix:after{
 content: "";
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
}
#rollImgBox{
 /*这里让盒子居中，应用到具体页面删除即可*/
 margin: 20px auto;

 /*如果该轮播图不是独占一行，需要将其改为行内块元素*/
 display: block;
 position: relative;
 /*在这里设置装载图片的框框的宽高*/
 width: 947px;
 height: 585px;

 /*在这里设置边框的样式用outline，这样就不会影响到后面的js了
 /*加边框，用outline即可，不会影响实际的距离*/
 outline: 5px solid blue;
 overflow: hidden;
}
#rollImgBox .photos .move img{
 /*在这里设置图片的宽高，与边框的宽高相同*/
 width: 947px;
 height: 585px;
}
#rollImgBox .photos{
 position: relative;
 /*移动的是图片的宽度,左移947px*/
 left: -947px;
}
#rollImgBox:hover{
 cursor: pointer;
}
#rollImgBox .photos div{
 float: left;
}
#rollImgBox .points{
 position: absolute;
 /*在这里修改圆点导航的位置*/
 bottom: 30px;
 right: 170px;/*右下方*/
 text-align: center;
}
#rollImgBox .points span{
 display: inline-block;
 /*在这里可以更改圆点的大小*/
 text-align: center;
 line-height: 66px;
 font-size: 24px;
 font-family: 微软雅黑;
 width: 66px;
 height: 66px;
 background: rgba(112,117,112,.6);
 border-radius: 50%;
 margin-left: 15px;
}
#rollImgBox .points .pointsNow{
 background: rgba(62,255,49,.6);
}

/*左右按钮*/
#rollImgBox .leftPoint{
 width: 60px;
 height: 60px;
 background: rgba(0,0,0,.5);
 text-align: center;
 line-height: 60px;
 position: absolute;
 font-size: 30px;
 color: white;
 top: 290px;
 left: 0;
}
#rollImgBox .rightPoint{
 width: 60px;
 height: 60px;
 background: rgba(0,0,0,.5);
 text-align: center;
 line-height: 60px;
 position: absolute;
 font-size: 30px;
 color: white;
 top: 290px;
 right: 0;
}
#rollImgBox .leftPoint:hover{
 background: rgba(255,0,0,.5);
}
#rollImgBox .rightPoint:hover{
 background: rgba(255,0,0,.5);
}

script:

window.onload = function(){
 let rollImgBox = document.querySelector("#rollImgBox");
 let photos = document.querySelector("#rollImgBox .photos");
 let allimg = document.querySelectorAll("#rollImgBox .move img");
 let index = 2;
 //动态设计移动图片的框框宽高
 //(rollImgBox.offsetWidth)是要剪去边框的宽度
 photos.style.width = (allimg.length)*(rollImgBox.offsetWidth) + "px";
 photos.style.height = rollImgBox.offsetHeight + "px";
 //动态创建小圆点
 let point = new Array();
 let points = document.querySelector("#rollImgBox .points");
 for (let i=0;i<(allimg.length-2);i++){
 point[i] = document.createElement("span");
 point[i].innerHTML = (i+1);
 points.appendChild(point[i]);
 }
 point[0].className = "pointsNow";

 let rollImgIterval = setInterval(function () {
 //图片的轮播
 if (index === allimg.length){
  photos.style.left = 0;
  index = 1;
  photos.style.transition = "0s";
  point[0].className = "pointsNow";
 } else {
  photos.style.transition = "1.5s";
 }
 photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
 index++;
 //小圆点的变换
 for (let j=0;j<(allimg.length-2);j++){
  if (j === index-2){
  point[j].className = "pointsNow";
  } else {
  point[j].className = "";
  }
 }
 //这里是最后一张图片（与展现的第一张一样的图）设置小圆点样式
 if (index === allimg.length){
  point[0].className = "pointsNow";
 }
 },2000);

 //当用户把鼠标放到rollImgBox盒子中，需要查看图片，自动轮播停止
 rollImgBox.onmouseover = function () {
 clearInterval(rollImgIterval);
 };
 rollImgBox.onmouseout = function () {
 rollImgIterval = setInterval(function () {
  //图片的轮播
  if (index === allimg.length){
  photos.style.left = 0;
  index = 1;
  photos.style.transition = "0s";
  point[0].className = "pointsNow";
  } else {
  photos.style.transition = "1.5s";
  }
  photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
  index++;
  //小圆点的变换
  for (let j=0;j<(allimg.length-2);j++){
  if (j === index-2){
   point[j].className = "pointsNow";
  } else {
   point[j].className = "";
  }
  }
  //这里是最后一张图片（与展现的第一张一样的图）设置小圆点样式
  if (index === allimg.length){
  point[0].className = "pointsNow";
  }
 },2000);
 };

 //点击小圆点，跳转到对应的图片位置
 for (let k=0;k<(allimg.length-2);k++){
 point[k].onmousedown = function () {
  photos.style.left = -(rollImgBox.offsetWidth)*(k+1) + "px";
  //小圆点的变换
  for (let j=0;j<(allimg.length-2);j++){
  if (j === k){
   point[j].className = "pointsNow";
  } else {
   point[j].className = "";
  }
  }
  //点击小圆点之后更改index的值
  index = k+2;
 }
 }

 //点击左右方向键，对图片进行滑动
 let leftPoint = document.querySelector('#rollImgBox .leftPoint');
 let rightPoint = document.querySelector('#rollImgBox .rightPoint');
 leftPoint.onclick = function () {
 photos.style.transition = "1s";
 //向左滑动一张图片，并修改index的值（index--）
 let dis = index-2;
 //当dis为1时，圆点到达第一个位置，如果再往左移动一个，圆点应该到达最后一个位置
 if (dis < 1){
  dis = allimg.length-2;
  photos.style.left = 0;
  point[dis-1].className = "pointsNow";
  point[0].className = "";
  index = allimg.length;
 } else {
  photos.style.left = -(rollImgBox.offsetWidth)*dis + "px";
  point[dis-1].className = "pointsNow";
  point[dis].className = "";
 }

 //从第一张顺滑切换到最后一张
 setTimeout(function () {
  if (photos.style.left === '0px'){
  photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-2) + "px";
  photos.style.transition = '0s';
  index = allimg.length-1;
  }
 },1000);
 index--;
 };
 rightPoint.onclick = function () {
 photos.style.transition = "1s";
 //向右滑动一张图片，并修改index的值（index++）
 let dis = index-1;
 //当dis为5时，圆点到达最后一个位置，如果再往右移动一个，圆点应该到达第一个位置
 if (dis >= (allimg.length-2)){
  photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-1) + "px";
  point[0].className = "pointsNow";
  point[allimg.length-3].className = "";
  index = 1;
 } else {
  photos.style.left = -(rollImgBox.offsetWidth)*index + "px";
  point[dis].className = "pointsNow";
  point[dis-1].className = "";
 }

 //从最后一张顺滑切换到第一张
 setTimeout(function () {
  if (photos.style.left === ((-(rollImgBox.offsetWidth)*(allimg.length-1))+'px')){
  photos.style.left = -(rollImgBox.offsetWidth) + "px";
  photos.style.transition = '0s';
  index = 2;
  }
 },1000);
 index++;
 };
};

更多关于轮播图效果的专题，请点击下方链接查看学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木，大家继续关注更多精彩焦点轮播图。

js实现轮播图特效

- Author -

阿布的小布

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
js中this对象用法分析
Jan 05 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
JS写滑稽笑脸运动效果
May 28 #Javascript
Python版实现微信公众号扫码登陆
May 28 #Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 #Javascript
原生js实现五子棋游戏
May 28 #Javascript
Vue微信公众号网页分享的示例代码
May 28 #Javascript
纯JS实现五子棋游戏
May 28 #Javascript
js实现简单五子棋游戏
May 28 #Javascript
csgo(1) 404(1) 403(1) Stater(1) xps(1) macos(1) svg(1) Sentry(1) CAD(1) sout(1)
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
jQuery的三种$()
2009/12/30 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
python读取并写入mat文件的方法
2019/07/12 Python
python反转列表的三种方式解析
2019/11/08 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python脚本和网页有何区别
2020/07/02 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
Kate Spade美国官网：纽约新兴时尚品牌，以包包闻名于世
2017/11/09 全球购物
什么是＂引用＂？申明和使用＂引用＂要注意哪些问题？
2016/03/03 面试题
销售员岗位职责范本
2014/02/03 职场文书
校运会入场式解说词
2014/02/10 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
关于教师节的广播稿
2015/08/19 职场文书
初中班主任心得体会
2016/01/07 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python