基于JavaScript实现带缩略图的轮播效果


Posted in Javascript onJanuary 12, 2017

先瞄一眼js轮播效果图

基于JavaScript实现带缩略图的轮播效果

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{padding:0;margin:0;}
#content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;}
#title, #bottom{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;font-size:20px;background:#f1f1f1;}
#bottom{bottom:0;cursor:pointer;}
#bottom span{display:inline-block;width:15px;height:15px;border-radius:15px;background:#000;text-align:center;line-height:15px;position:relative;}
#bottom span.active{background: #FFFF33;}
#bottom span div {position:absolute;width:110px;height:110px;top:-125px;left:-46px;display:none;}
#bottom span div:after{content:'';position:absolute;left:49px;bottom:-12px;border-top:7px solid #fff;border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;}
#bottom span img {width:100px;height:100px;border:5px solid #fff;}
#left, #right{position:absolute;width:60px;height:60px;border-radius:60px;line-height:60px;font-size:60px;background:#FFFF66;font-weight:bold;text-align:center;top:50%;margin-top:-25px;color:#fff;cursor:pointer;filter(opacity:70);opacity:0.7;}
#left:hover,#right:hover{filter(opacity:100);opacity:1;}
#left{left:0px;}
#right{right:0px;} 
#img{width:400px;height:500px;}
</style>
<script>
window.onload = function () {
 var bottom = $('bottom'),title = $('title'),
 img = $('img'),left = $('left'),right = $('right');
 var aSpan = bottom.getElementsByTagName('span');
 var aDiv = bottom.getElementsByTagName('div');
 var arr = ['图片一','图片二','图片三', '图片四'];
 var num = 0;
 // 初始化
 picTab();

 // 点击下一张
 right.onclick = function () {
 if (num === aDiv.length - 1) num = -1;
 num++;
 picTab();
 }

 // 点击上一张
 left.onclick = function () {
 if (num === 0) num = aDiv.length;
 num--;
 picTab();
 }

 function picTab() {
 title.innerHTML = arr[num];
 img.src = 'img/' + (num + 1) + '.png';
 for ( var i = 0; i < aSpan.length; i++ ) {
  aSpan[i].className = '';
 }
 aSpan[num].className = 'active';
 }
 // 鼠标移入移出显示缩略图
 for ( var i = 0; i < aSpan.length; i++ ) {
 aSpan[i].index = i;
 aSpan[i].onmouseover = function () {
  aDiv[this.index].style.display = 'block';
 }
 aSpan[i].onmouseout = function () {
  aDiv[this.index].style.display = 'none';
 }
 aSpan[i].onclick = function () {
  num = this.index;
  picTab();
 }
 }
 function $(id) { return document.getElementById(id);}
}
</script>
</head>
<body>
<div id="content">
 <div id="title">带缩略图的轮播</div>
 <div id="left"><</div>
 <div id="right">></div>
 <div id="bottom">
 <span><div><img src="img/1.png"/></div></span>
 <span><div><img src="img/2.png"/></div></span>
 <span><div><img src="img/3.png"/></div></span>
 <span><div><img src="img/4.png"/></div></span>
 </div>
 <img src="" id="img"/>
</div>
</body>
</html>

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
Vue实现验证码功能
Dec 03 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 #Javascript
js仿搜狐视频记录片列表展示效果
May 30 #Javascript
原生js实现商品放大镜效果
Jan 12 #Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 #Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 #Javascript
原生js实现淘宝购物车功能
Jun 23 #Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 #Javascript
You might like
一段实用的php验证码函数
2016/05/19 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
JavaScript函数详解
2015/02/27 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
python如何通过protobuf实现rpc
2016/03/06 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python web基础之加载静态文件实例
2018/03/20 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python中scikit-learn机器代码实例
2018/08/05 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
文职个人求职信范文
2013/09/23 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
中学生自我鉴定
2014/02/04 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
2014年优秀党员材料
2014/12/18 职场文书
学生保证书格式
2015/02/27 职场文书
单位计划生育责任书
2015/05/09 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
任命书格式模板
2015/09/22 职场文书
Python基本知识点总结
2022/04/07 Python