基于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 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
基于Vue中的父子传值问题解决
Jul 27 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利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
javascript数字时钟示例分享
2014/04/23 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python pass 语句使用示例
2014/03/11 Python
python的迭代器与生成器实例详解
2014/07/16 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
求职信模板标准格式范文
2014/02/23 职场文书
高考寄语大全
2014/04/08 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
实习感想范文
2015/08/10 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书