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

主要改进：

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. android repo库的创建及代码管理

  2. [小工具] Command-line CPU Killer（附源码及下载链接）

    博主有次在拆卸自己的笔记本电脑后,发现电脑如果静置时间长了有时会重启,但奇怪的是当我自己在电脑前工作的时候从来没有重启过.据此推测可能 CPU 完全空闲的时候风扇完全停转了,虽然 CPU 温度不高,但 ...

  3. 判断是否是IP地址

    static bool IsIP(QString IP) { QRegExp RegExp("((2[0-4]\\d|25[0-5]|[01]?\\d\\d?)\\.){3}(2[0-4]\ ...

  4. 作业三 ATM

    模拟实现一个ATM+购物商场程序 1.额度15000自定义 商城和银行两个帐户 2.实现购物商城,买东西加入购物车,调用信用卡接口结账 3.可以提现,手续费5%,提现额度不能超过50% 4.每月22日 ...

  5. Dev系列控件的AJAX (转)

    介绍Dev系列控件在前台也就是客户端的一些常用方法介绍以及前后台异步通信的方法. 一.Dev Data Edit控件通用属性以及方法: 属性 1.GetEnabled():返回控件是否为可操作状态 2 ...

  6. F# 既能解释执行，也能编译执行

    F# 除了是函数式语言和面向对象语言之外,还有个突出的特点是:既能解释执行,也能编译执行.   一般说来,一种语言只能选择其一种.比如说C++.C#是编译执行,不能解释执行,象Matlab.R是解释执 ...

  7. Android-操作栏之图标导航

    想实现图标向上导航功能,步子分两步走: 1.样式上要改变-->图标要变成可点击的按钮,并有一个向左的箭头. 2.功能上要实现-->实现向上导航 首先谈第一步: 对于拥有fragment的a ...

  8. map的使用方法

    package cn.stat.p8.map.demo; import java.util.Collection; import java.util.HashMap; import java.util ...

  9. Js判断来访问者的系统

    var ua = navigator.userAgent; ) { alert('您使用的是win32 XP系统!'); } else { alert('您使用的是Win7系统!'); }

  10. 解决div里面img的缝隙问题~

    解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...