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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
Session的工作方式
2006/10/09 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
python查看模块安装位置的方法
2018/10/16 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
简单了解Python生成器是什么
2019/07/02 Python
PyTorch中permute的用法详解
2019/12/30 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
flask框架中的cookie和session使用
2021/01/31 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
灵泰克Java笔试题
2016/01/09 面试题
体育教师个人的自我评价
2014/02/16 职场文书
旅游市场营销方案
2014/03/09 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
简单介绍Python的第三方库yaml
2021/06/18 Python