javascript实现的有缩略图功能的幻灯片切换效果

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

主要改进：

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

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

 

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

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

 

效果图如下：

 

HTML部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
    *{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部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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='';
    }
     
 
}

　　

posted @   Me-Kevin  阅读(435)  评论(0)  编辑  收藏  举报
编辑推荐：
· 大模型 Token 究竟是啥：图解大模型Token
· 35岁程序员的中年求职记：四次碰壁后的深度反思
· 继承的思维：从思维模式到架构设计的深度解析
· 如何在 .NET 中 使用 ANTLR4
· 后端思维之高并发处理方案
阅读排行：
· BotSharp + MCP 三步实现智能体开发
· BotSharp 5.0 MCP：迈向更开放的AI Agent框架
· 5. RabbitMQ 消息队列中 Exchanges(交换机) 的详细说明
· 【ESP32】两种模拟 USB 鼠标的方法
· 设计模式脉络
点击右上角即可分享
微信分享提示