标签：
不久前写了一个简单的图片效果，没想到那么快就要用到项目中，所以功能方面要丰富一下；
主要改进：
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=‘‘;
}
}
标签：
原文地址：http://www.cnblogs.com/kevinCoder/p/4522976.html
