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

主要改进：

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. Linux实现密钥登陆

    公司为了安全,一直都采用密钥登陆远程SSH,现在有了自己的服务器,自己又学者配了一把,下面就是配置笔记. 1.登陆未设置密钥的Linux服务器 2.工具新建用户密钥生成向导 3.选择生成密钥的加密方式 ...

  2. 网页JavaScript

    用法. JavaScript一般用于 head , body , </html> 之后. 格式<script language="javascript"> ...

  3. asp.net 5.0微信支付

    (原文出自:http://lib.csdn.net/article/wechat/46329) 微信支付官方坑太多,我们来精简 我把官方的代码,打包成了 an.wxapi.dll. 里面主要替换了下注 ...

  4. CSS 特殊样式设置集合

    1. 父窗口宽度不定,要求内部两个子块, 第一个子块宽度固定,第二个子块宽度自适应. 第一个子块宽度固定,定位为绝对定位 position:absolute;  第二个子块设置margin-left即 ...

  5. RecycleView 瀑布流滑动移位

    RecycleView StaggeredLayoutManager(瀑布流)滑动的时候,默认会出现item移动的问题,需以下来个步骤来解决: 附上StaggeredLayoutManager中的一段 ...

  6. UI基础视图----UIView总结

    UIView是UIKit框架里面最基础的视图类,是UIResponder的子类,是UIApplication和UIViewController的兄弟类,是UIWindow,UILabel,UIImag ...

  7. Spring 学习笔记02

    用spring实现一个论坛基本功能 1 运行环境 Linux:Ubun 14.04 64bit IDE:IntelliJ IDEA 14.03 JDK:1.7.40 MySQL:5.5.44 Tomc ...

  8. jQuery中对未来的元素绑定事件

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  9. JDK + Tomcat 安装配置

    学习Java 开发的第一步就是配置环境,今天第一次配置,把过程记录下以备后用. 一.下载JDK.Tomcat JDK:http://www.oracle.com/technetwork/java/ja ...

  10. 几个个实用的PHP代码片段【自己备份】

    检查服务器是否是 HTTPS 这个PHP代码片段能够读取关于你服务器 SSL 启用(HTTPS)信息. if ($_SERVER['HTTPS'] != "on") { echo ...