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 相关文章推荐
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
如何提高javascript加载速度
Dec 26 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
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实现小偷程序实例
2016/10/31 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
js实现图片拖动改变顺序附图
2014/05/13 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
对python中return和print的一些理解
2017/08/18 Python
python多进程实现进程间通信实例
2017/11/24 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python next()和iter()函数原理解析
2020/02/07 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
python中的错误如何查看
2020/07/08 Python
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
自我评价的正确写法
2013/09/19 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
个人自荐信
2013/12/05 职场文书
工作岗位说明书模板
2014/05/09 职场文书
积极向上的团队口号
2014/06/06 职场文书
师德师风剖析材料
2014/09/30 职场文书