JavaScript实现轮播图特效


Posted in Javascript onApril 10, 2020

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

功能:

1、图片会自动播放,鼠标放上面会暂停播放

2、点击左右出现的箭头可以切换到上一张/下一张图片

3、点击序号会跳转到对应图片 

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>当当网首页轮播图-By小黑</title>
 <style>
  *{
  padding: 0;
  margin: 0;
  list-style: none;
  }
  #wrap{
  margin: 50px auto;
  width: 800px;
  height: 330px;
  overflow: hidden;
  position: relative;
  }
  #list{
  position: absolute;
  bottom: 15px;
  right: 250px;
  }
  #list li{
  float: left;
  margin-right: 15px;
  cursor: pointer;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  background: #ADA79D;
  color: #FFF ;
  border-radius: 50%;
  }
  #list .on{
  background: red;
  }
  #bar_left,#bar_right{
  width: 33px;
  height: 80px;
  line-height: 80px;
  position: absolute;
  top: 130px;
  background: rgba(0, 0, 0, 0.3);
  }
  #bar_left{
  left: -33px;
  }
  #bar_right{
  right: -35px;
  }
  /*下面利用伪元素实现左侧和右侧的小箭头*/
  #bar_left:after,#bar_left:before,#bar_right:before,#bar_right:after{
  content: "";
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  position: absolute;
  top: 25px;
  }
  /*左边箭头*/
  #bar_left:before{
  border-left: 15px solid transparent;
  border-right: 15px solid #FFF;
  right: 10px;
  }
  #bar_left:after{
  border-left: 15px solid transparent;
  border-right: 15px solid rgba(0, 0, 0, 0.3);
  right: 7px;
  }
  /*右边箭头*/
  #bar_right:before{
  border-right: 15px solid transparent;
  border-left: 15px solid #FFF;
  left: 10px;
  }
  #bar_right:after{
  border-right: 15px solid transparent;
  border-left: 15px solid rgba(0, 0, 0, 0.3);
  left: 7px;
  }
  #wrap:hover #bar_left{
  left: 0;
  cursor: pointer;
  transition: left 0.5s;
  }
  #wrap:hover #bar_right{
  /* display: block; */
  right: 5px;
  cursor: pointer;
  transition: right 0.5s;
  }
  .tex{
  margin: 20px auto;
  width: 400px;
  }
  .tex ul li{
  list-style-type:circle;
  color: red;
  font-weight: bold;
  margin-bottom: 5px;
  }
 </style>
</head>
 
<body>
 <div id="wrap">
 <ul id="pic">
  <li><img src="images/dang1.jpg" alt=""></li>
  <li><img src="images/dang2.jpg" alt=""></li>
  <li><img src="images/dang3.jpg" alt=""></li>
  <li><img src="images/dang4.jpg" alt=""></li>
  <li><img src="images/dang5.jpg" alt=""></li>
  <li><img src="images/dang6.jpg" alt=""></li>
  <li><img src="images/dang7.jpg" alt=""></li>
  <li><img src="images/dang8.jpg" alt=""></li>
 </ul>
 <div id="bar_left"></div>
 <div id="bar_right"></div>
 <ol id="list">
  <li class="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
 </ol>
 </div>
 <div class="tex">
 <ul>
  <li>功能如下:</li>
  <li>图片会自动播放,鼠标放上面会暂停播放</li>
  <li>点击左右出现的箭头可以切换到上一张/下一张图片</li>
  <li>点击序号会跳转到对应图片</li>
 </ul>
 </div>
 <script>
 var wrap=document.getElementById('wrap');
 var pics=document.getElementById('pic');
 var lists=document.getElementById('list').getElementsByTagName('li');
 var point_l=document.getElementById('bar_left');
 var point_r=document.getElementById('bar_right');
 var index=0;
 var counter=null;
 function change(){//计时器
  counter=setInterval(function(){
  index++;
  if(index===lists.length){
   index=0;
  }
  img(index);
  },2000)
 }
 change();
 function img(curIndex){//切换图片
  for (var i=0;i<lists.length;i++){
  if(curIndex===i){
   lists[i].className='on';
  }
  else{
   lists[i].className='';
  }
  }
  index=curIndex;
  pics.style.marginTop=-330*curIndex+'px';//图片上移
  wrap.οnmοuseοver=function(){//鼠标放到图片上时图片停止播放
  pics.style.cursor="pointer";
  clearInterval(counter);//清除计时器
  }
  pics.οnmοuseοut=change;
 }
 //鼠标放到指定序号切换到指定图片
 for (var i=0;i<lists.length;i++){
  lists[i].id=i;
  lists[i].οnmοuseοver=function(){
  img(this.id);
  this.className='on';
  }
 }
 //当鼠标放在箭头上时,点击箭头切换到下一张图片
 point_l.οnmοusedοwn=function(){//点击左边箭头
  if(index<=0){
   index=lists.length;
  }
  img(index-1);
 }
 point_r.οnmοusedοwn=function(){//点击右边箭头
  if (index>=lists.length-1){
  index=-1;
  }
  img(index+1);
 }
 </script>
</body>
 
</html>

效果图

JavaScript实现轮播图特效

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
JavaScript实现图片伪异步上传过程解析
Apr 10 #Javascript
Vue实现Layui的集成方法步骤
Apr 10 #Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 #Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 #Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 #Javascript
JS实现省市县三级下拉联动
Apr 10 #Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 #Javascript
You might like
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
帝国cms常用标签汇总
2015/07/06 PHP
提高网站信任度的技巧
2008/10/17 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
快速入门Vue
2016/12/19 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
python实现电子词典
2020/04/23 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
python 实现aes256加密
2020/11/27 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
大学生毕业自我评价范文分享
2013/11/07 职场文书
计算机应用专业推荐信
2013/11/13 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL