首页
所有分类
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 相关文章推荐
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
小程序实现列表点赞功能
Nov 02 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
缓存(3) 锁(1) 逻辑架构(1) 事务(5) offset(1) Mysql报错(1) 性能优化(3) limit(1) mysql.user(1) 策略(1)
You might like
php目录遍历函数opendir用法实例
2014/11/20 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
Javascript之String对象详解
2016/06/08 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
swiper实现异形轮播效果
2019/11/28 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python3使用requests发闪存的方法
2016/05/11 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
bonprix匈牙利：女士、男士和儿童服装
2019/07/19 全球购物
幼儿教育感言
2014/02/05 职场文书
晚会主持词开场白
2014/03/17 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
中学教师个人总结
2015/02/10 职场文书
装修安全责任协议书
2016/03/22 职场文书