基于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 多浏览器 事件大全
Mar 23 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
vue路由跳转传递参数的方式总结
May 10 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 date函数参数详解
2006/11/27 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
php中数组最简单的使用方法
2020/12/27 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
浅析js封装和作用域
2013/07/09 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
用python删除java文件头上版权信息的方法
2014/07/31 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python检测IP地址变化并触发事件
2018/12/26 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
大学生先进事迹材料
2014/02/16 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
校园绿化美化方案
2014/06/08 职场文书
个人政治思想总结
2015/03/05 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android