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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
vue+django实现下载文件的示例
Mar 24 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(6) 面向对象
2010/02/16 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
javascript 函数式编程
2007/08/16 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
python和bash统计CPU利用率的方法
2015/07/10 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
解决python报错MemoryError的问题
2018/06/26 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python绘制雪景图
2019/12/16 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
python集合能干吗
2020/07/19 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
学习2014年全国两会心得体会
2014/03/12 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
初中教师个人工作总结
2015/02/10 职场文书
中秋节慰问信
2015/02/15 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
MySQL之DML语言
2021/04/05 MySQL
Python使用scapy模块发包收包
2021/05/07 Python