基于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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
javascript验证身份证号
Mar 03 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
微信小程序如何使用云开发
May 17 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
详解如何在Javascript中使用Object.freeze()
Oct 18 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
php简单生成随机数的方法
2015/07/30 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
jQuery中 delegate使用的问题
2015/07/03 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
前台接待岗位职责
2013/12/03 职场文书
自我评价如何写好?
2014/01/05 职场文书
黄河的主人教学反思
2014/02/07 职场文书
投标保密承诺书
2014/05/19 职场文书
2019秋季运动会口号
2019/06/25 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL