不久前写了一个简单的图片效果,没想到那么快就要用到项目中,所以功能方面要丰富一下;

主要改进:

1# 用圆点代替之前简单的页数显示,并且点击圆点可以显示对应图片;

2# 点击圆点,显示对应图片的缩略图。

今天完善了一下,当然动画效果,以及其他小细节还没来得及优化:

演示地址:http://codepen.io/anon/pen/rVMKdz

效果图如下:

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实现的有缩略图功能的幻灯片切换效果的更多相关文章

  1. Elastic Image Slider 带缩略图功能的幻灯片

    今天我们要为您展示如何创建一个简单的弹性幻灯片,带有缩略图预览功能.Elastic Image Slider 这款幻灯片能够自动调整以适应到其父容器,我们可以通过幻灯片使用缩略图预览或幻灯片的自动播放 ...

  2. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  3. 旋转木马幻灯片切换效果JS源码详解

    首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...

  4. 移动web中的幻灯片切换效果

    百度或者谷歌下类似的插件有很多,原理都差不多,关键适合自己的项目,如果移动端要引入jquery这么大的插件,只能呵呵了.... 下面是工作中针对webkit内核的浏览器写的,html很简单: < ...

  5. jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果

    http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880

  6. JavaScript confirm 自定义风格及功能实现

    在网上找了一些弹窗插件,例如bootbox, 功能和动画效果都做的很好,但是很难自定义样式. 项目需要,Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能 ...

  7. wordpress 缩略图功能函数 the_post_thumbnail

    很多 WordPress 主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起.但是目前位置没有一个标准的方法去实现日志缩略图,很多主题 ...

  8. PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能

    PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...

  9. wordpress教程之自带缩略图功能

    首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图: 如果没有说明你还没有激活这功能.我们需要在你 ...

随机推荐

  1. [Angular 2] Simple intro Http

    To use http, we need to import the HTTP_PROVIDER, so that we can inject http to other component: imp ...

  2. [RxJS] Refactoring CombineLatest to WithLatestFrom

    This lesson shows why it’s preferable to using withLatestFrom instead of combineLatest in certain sc ...

  3. ORACLE查询数据库的锁表情况

      查询数据库的锁表情况语句如下: SELECT p.spid,a.serial#, c.object_name,b.session_id,b.oracle_username,b.os_user_na ...

  4. Apache Tomcat 7.0 Manager APP

    解决Tomcat 7.0 进入项目管理页面时的密码问题 根据红框中的提示得知缺少manager管理角色,所以我们到Tomcat的conf文件夹下找到tomcat-users.xml文件,添加管理角色, ...

  5. 127.0.0.1与localhost与ip的区别

    127.0.0.1与localhost与ip的区别 May 18, 2014 localhost 不联网不使用网卡,不受防火墙和网卡限制本机访问 一般使用 本地套接字文件AF_UNIX 应用程序一般约 ...

  6. java学习笔记(4):内存管理

    在内存的方面,Java自身带有垃圾运行机制,表面上好像我们可以忽略不计,但是如果我们对其加以理解的话,说不定有时会达到事半功倍的效果. 所以自己花些时间整理一些此类的资料. 一.基本概念 1.栈 对于 ...

  7. explicit 只对构造函数起作用,用来抑制隐式转换。

    class A { private: int a; public: A(int x) :a(x){} void display(){ cout << a << endl; } ...

  8. jQuery异步加载数据添加事件

    几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了. 当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作 ...

  9. PHP限制网页只能在微信内置浏览器中查看并显示

    微信现在算是火了,围绕微信开发的应用也越来越多了,前段时间,自己公司需要,用PHP写了一个微信应用,为了防止自己辛苦写成的PHP应用被盗用,于是 通过PHP做了限制,只能在微信自带的浏览器中才能打开本 ...

  10. Python入门-----介绍

    摘要:Python语言的特点 ----->优雅.明确.简单 一.Python适合的领域 web网站和各种网络服务 系统工具和脚本 作为“胶水”语言,把其他语言开发的模块包装起来方便使用 二.Py ...