javascript实现的有缩略图功能的幻灯片切换效果
不久前写了一个简单的图片效果，没想到那么快就要用到项目中，所以功能方面要丰富一下；
主要改进：
1# 用圆点代替之前简单的页数显示，并且点击圆点可以显示对应图片；
2# 点击圆点，显示对应图片的缩略图。
今天完善了一下，当然动画效果，以及其他小细节还没来得及优化：
效果图如下：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imgSwitch stronger</title>
</head>
<body> <div id="img_container">
<div class="title_common" id="img_title">正在加载...</div>
<div class="switch_title" id="img_left"></div>
<div class="switch_title" id="img_right"></div> <img src="" id="img"> <div class="title_common" id="img_page"> <ul id="circles">
</ul> </div>
</div> </body>
</html>
CSS部分：
*{margin:0;padding: 0;}
#img_container{
position: relative;
margin:15px auto;
width: 800px;
height: 400px;
background-color: #333;
display: -webkit-flex;
display: flex;
border-radius:3px;
}
.title_common{
position: absolute;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
}
#img_title{
top: 0;
background-color: rgba(86,171,228,.5);
}
#img_page{
bottom: 0;
}
.switch_title{
position: absolute;
top:50%;
margin-top: -20px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size:24px;
color:#fff;
cursor: pointer;
background-color:rgba(0,0,0,.4);
}
#img_left{
left: 0;
background: url('http://www.iconfont.cn/uploads/fonts/font-134729-.png?color=ecf0f1&size=32') no-repeat center center;
}
#img_right{
right: 0;
background: url('http://www.iconfont.cn/uploads/fonts/font-134735-.png?color=ecf0f1&size=32') no-repeat center center;
}
#img_container img{
max-width:100%;
border-radius:3px;
}
#circles {
display: inline-block;
margin: 13px 3px;
}
#circles li{
list-style: none;
float: left;
width: 14px;
height: 14px;
margin: 0 3px;
border-radius: 7px;
cursor: pointer;
background-color: white;
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
#circles li:hover {
box-shadow: 0 0 10px orange;
}
#circles li.active{
background-color: orange;
}
.sContent {
display: none;
width: 120px;
height: 80px;
padding: 3px;
background-color: #fff;
position: absolute;
right: 0;
bottom: 40px;
left: 307px;
/*307的来源:
800/2=400(大盒子的一半)；
80/2=40(包含圆点的小盒子一半);
400-40=360(小盒子左边距离大盒子左边的距离)；
360+3(margin-left: 3px)+7(圆点宽度/2)=370;(圆点中心距离大盒子左边的距离);
120/2=60(缩略图div宽度一半);
综上：
370-60-3(padding-left: 3px)=307px;
*/
margin: auto;
border-radius: 3px;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
z-index: 2;
}
.sContent img{
width: 120px;
height: 80px;
}
.sContent:after {
content: '';
border-style: solid;
border-width: 12px 6px 0 6px;
border-color: #fff transparent transparent transparent;
position: absolute;
bottom: -9px;
left:50% ;
margin-left: -6px;
z-index: 1;
}
javascript部分：
var oImg=document.getElementById('img');
var oImg_title=document.getElementById('img_title');//上标
var oImg_page=document.getElementById('img_page');//下标
var oImg_left=document.getElementById('img_left');//左标
var oImg_right=document.getElementById('img_right');//右标
var oCircles=document.getElementById('circles');//圆点包含器
var aLi=oCircles.getElementsByTagName('li');//圆点数组
var arrImg=['http://www.quanjing.com/image/psdefault/slide/20150511.jpg','http://www.quanjing.com/image/psdefault/slide/20150513.jpg','http://www.quanjing.com/image/psdefault/slide/20150519.jpg','http://www.quanjing.com/image/psdefault/slide/20150518.jpg'];//图片数据
var arrImgDes=['上帝之城','用力一击','桌面足球','夏日时光'];//图片对应描述数据
var num=-1;
//根据图片数据，动态添加dom元素
for(var i=0;i<arrImg.length;i++){
oCircles.innerHTML +="<li><div class='sContent' id='div"+i+"'><img src=''></div></li>";
}
//圆点动态添加类的函数
function circleChangeColor(){
for(var i=0;i<aLi.length;i++){
if (aLi[i] !==aLi[num]) {
aLi[i].className='';
}
}
aLi[num].classList.add('active');
}
//显示图片，描述，以及圆点颜色变化的函数
function changeAll(){
oImg.src=arrImg[num];
oImg_title.innerHTML=arrImgDes[num];
circleChangeColor();
}
/*下一张*/
oImg_right.onclick=function(){
num++;
if (num>arrImg.length-1) {
num=0;
}
changeAll()
}
/*上一张*/
oImg_left.onclick=function(){
num--;
if (num<0) {
num=arrImg.length -1;
}
changeAll()
}
/*circle onclick事件:点击圆点,显示相应图片*/
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;//添加索引值
aLi[i].onclick=function(){
oImg.src=arrImg[this.index];
oImg_title.innerHTML=arrImgDes[this.index];
/*将没有被选中的圆点初始化*/
for(var i=0;i<aLi.length;i++){
if (aLi[i] !==aLi[this.index]) {
aLi[i].className='';
}
}
aLi[this.index].classList.add('active');//选中的圆点添加类active
}
/* circle hover事件*/
aLi[i].onmouseover=function(){
var position_index=this.index;
aLi[this.index].childNodes[0].style.cssText="display:block;margin-left:"+position_index*20+"px"+"";
aLi[this.index].childNodes[0].childNodes[0].src=arrImg[this.index];
}
aLi[i].onmouseout=function(){
aLi[this.index].childNodes[0].style.cssText="display:none;";
aLi[this.index].childNodes[0].childNodes[0].src='';
}
}
javascript实现的有缩略图功能的幻灯片切换效果的更多相关文章
- Elastic Image Slider 带缩略图功能的幻灯片
今天我们要为您展示如何创建一个简单的弹性幻灯片,带有缩略图预览功能.Elastic Image Slider 这款幻灯片能够自动调整以适应到其父容器,我们可以通过幻灯片使用缩略图预览或幻灯片的自动播放 ...
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- 旋转木马幻灯片切换效果JS源码详解
首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...
- 移动web中的幻灯片切换效果
百度或者谷歌下类似的插件有很多,原理都差不多,关键适合自己的项目,如果移动端要引入jquery这么大的插件,只能呵呵了.... 下面是工作中针对webkit内核的浏览器写的,html很简单: < ...
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880
- JavaScript confirm 自定义风格及功能实现
在网上找了一些弹窗插件,例如bootbox, 功能和动画效果都做的很好,但是很难自定义样式. 项目需要,Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能 ...
- wordpress 缩略图功能函数 the_post_thumbnail
很多 WordPress 主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起.但是目前位置没有一个标准的方法去实现日志缩略图,很多主题 ...
- PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能
PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...
- wordpress教程之自带缩略图功能
首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图: 如果没有说明你还没有激活这功能.我们需要在你 ...
随机推荐
- 谈谈Ext JS的组件——布局的用法
概述 在Ext JS中.包括两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就须要组件类布局来处理组件内自己特有的布 ...
- 学习手机游戏开发的两个方向 Cocos2d-x 和 Unity 3D/2D，哪个前景更好？
如题! 首先说一说学习手机游戏(移动游戏)这件事. 眼下移动互联网行业的在以井喷状态发展.全球几十亿人都持有智能终端设备(ios android),造就了非常多移动互联网创业机会: 一.移动社交 微信 ...
- 最小公约数（欧几里得算法&&stein算法）
求最小公约数,最easy想到的是欧几里得算法,这个算法也是比較easy理解的,效率也是非常不错的. 也叫做辗转相除法. 对随意两个数a.b(a>b).d=gcd(a.b),假设b不为零.那么gc ...
- CAsyncSocket
本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 它是一个异步非阻塞Socket封装类,CAsyncSocket::Create()有一个参数指明了你想要处理哪些Socket事 ...
- ubuntu server 14.04.4 无线网卡没有启用，找不到wlan0端口
Ubuntu Server默认的情况下是不会启用无线网卡的,想想实际服务器上怎么可能有无线网卡呢,呵呵.所以我们需要手动来启用无线网卡,难点就在这里了. 使用ifconfig命令,发现没有wlan口, ...
- sql练习总结（一）
最近在学sql,遇到了这么一道题: 写出一条Sql语句:取出表A中第31到第40记录(SQLServer,以自动增长的ID作为主键,注意:ID可能不是连续的. 把所能想到的实现方法都做了一遍: 1.用 ...
- 初学Java ssh之Spring 第三篇
在这篇中,我学习了依赖注入的两种方式:设值注入和构造注入. 在我们以前的思维中,如果调用一个类时,我们都需要将其手动实例化,当我们创建被调用的工作不需要我们完成时,这就是控制反转,当这个将被调用的实例 ...
- ZOJ 1633
迭代 每个数对应前面的一个数 #include<stdio.h> #include<iostream> using namespace std; #define max 88 ...
- CentOS（Linux） - SVN使用笔记（一） - 安装SVN过程及开启和关闭svn服务指令
1.安装: yum install httpd httpd-devel subversion mod_dav_svn mod_auth_mysql yum remove subversion 删除旧版 ...
- php测试题整理(0519)
1.B/S架构和C/S架构: B/S架构是依托于浏览器的网络系统,C/S架构是基于客户端的. B/S架构: 随着Internet和WWW的流行,以往的主机/终端和C/S都无法满足当前的全球网络开放.互 ...