Fork me on GitHub

Pictures play in turn

Posted on | Edited on | In | Views:

图片轮播效果

效果图：

1

说明：

  1. 三张背景图片采用的一张出现一张消失，还有上下替换或左右替换的方式，本次未采用
  2. 背景图片采用2秒一次自动循环轮播
  3. 图片两侧采用“上一页”和“下一页”的切换按钮
  4. 图片右下角采用圆点定位

HTML和CSS部分

  1. 将三张图片重叠放置，banner-slide绝对定位，banner相对定位

  2. 使用slide-active并设置display实现隐/现

    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
    <!--html-->
    <div class="banner" id="banner">
        <a href="">
            <div class="banner-slide slide1 slide-active"></div>
        </a>
        <a href="">
            <div class="banner-slide slide2"></div>
        </a>
        <a href="">
            <div class="banner-slide slide3"></div>
        </a>
    </div>


    <!--css-->
    .banner{
    	width: 1200px;
    	height:460px;
    	position: relative;
    	overflow: hidden;
    }
    .banner-slide{
    	width: 1200px;
    	height:460px;
    	position: absolute;
    	background-repeat: no-repeat;	
    	display: none;
    }
    .slide-active{
    	display: block;
    }

  1. 将箭头设置a标签，可以实现hover变色效果

  2. 圆点设计class=‘active’，实现原点定位

    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
    <!--html-->
    <!-- 箭头按钮 -->
    <a href="javascript:void(0)" class="button prev" id="prev"></a>
    <a href="javascript:void(0)" class="button next" id="next"></a>  
    <!-- 切换圆点 -->
    <div class="dots" id="dots"> 
        <span class="active"></span>
        <span></span>
        <span></span>
    </div>



    <!--css-->
    .button{
    	position: absolute;
    	width: 40px;
    	height: 80px; 
    	left:244px;
    	top:50%;
    	margin-top: -40px;
    	background:url(../img/arrow.png) no-repeat center center ;
    }
    .button:hover{
    	background-color: #333;
    	opacity: 0.5;
    	filter:alpha(opacity=50);
    }
    .prev{
    	transform: rotate(180deg);
    }
    .next{
    	left:auto;
    	right:0 ;
    }
    .dots{
    	position: absolute;
    	right: 15px;
    	bottom: 24px;
    	text-align: right;
    }
    .dots span{
    	display: inline-block;
    	width: 12px;
    	height: 12px;
    	line-height: 12px;
    	border-radius: 50%;
    	background: rgba(7,17,27,0.4);
    	box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    	margin-right: 8px;
    	cursor: pointer;
    }
    .dots span.active{
    	box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;	
    	background: #fff;
    }

CSS部分

  1. 封装document.getElementById()方法

    1
    2
    3
    function byId(id){
      return typeof(id)==="string"?document.getElementById(id):id;
    }

  2. js文件自动运行滑过图片slideImage()方法，执行slideImage时会自动触发图片轮播

  3. 从标签中获得main类，鼠标滑入或滑出时触发事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function slideImage(){

      var main = byId("main");
      //滑过清除定时器，离开继续
      main.onmouseover = function(){
        //清除定时器

      }
      main.onmouseout=function(){
        //继续定时器

      }
      //自动触发图片轮播
      main.onmouseout();
    }

    slideImage();

  4. 全局变量index监控要显示图片的编号

  5. 切换时index++

  6. timer做计时器

    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
    var index=0,
        timer=null,
        pics = byId("banner").getElementsByTagName("div"),
        dots=byId("dots").getElementsByTagName("span"),
        prev=byId("prev");
        next=byId("next");
        len=pics.length;
    ...

    function slideImage(){
        var main = byId("main");
    		//滑过清除定时器，离开继续
    		main.onmouseover = function(){
    		//清除定时器
    		if(timer) clearInterval(timer);
    	}
    	main.onmouseout=function(){
    	//继续定时器
    	timer = setInterval(function(){
    	  index++;
    	  // console.log(index); 
    	  if(index>=len)
    	    index=0;
    	  //切换图片
    	  changeImg();
    	},2000);
    	}
    }

  7. 操作上一张或下一张按钮，就是对index进行操作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!--slideImage()方法中-->
    //点击上一张下一张按钮
    next.onclick=function(){
    	index++;
    	if(index>=len)
    	  index=0;
    	changeImg();
    }
    prev.onclick = function(){
    	index--;
    	if(index<0)
    	  index=len-1;
    	changeImg();
    }

  8. 切换前，将banner.div的所有class设置为‘none’，均不显示

  9. 将所有圆点class设置为‘’

  10. 根据index，找到当前div，将banner.div和dots显示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    //切换图片
    function changeImg(){
      for(var i=0;i<len;++i){
        pics[i].style.display = 'none';
        dots[i].className='';
      }
      //根据index索引，找到当前div，将其显示出来
      pics[index].style.display = 'block';
      dots[index].className = 'active';
    }

本项目所有源码

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
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合实例</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main" id="main">
        <!-- 图片轮播 -->
        <div class="banner" id="banner">
            <a href="">
                <div class="banner-slide slide1 slide-active"></div>
            </a>
            <a href="">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="">
                <div class="banner-slide slide3"></div>
            </a>
        </div>
        <!-- 箭头按钮 -->
        <a href="javascript:void(0)" class="button prev" id="prev"></a>
        <a href="javascript:void(0)" class="button next" id="next"></a>  
        <!-- 切换圆点 -->
        <div class="dots" id="dots"> 
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</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
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
<!--style.css-->
*{
	padding: 0;
	margin: 0;
}
ul{
	list-style: none;
}
body{
	font-family: "微软雅黑";
	color: #14191e;
}
.main{
	width: 1200px;
	height: 460px;
	margin:30px auto;
	position: relative;
	overflow: hidden;
}
.banner{
	width: 1200px;
	height:460px;
	position: relative;
	overflow: hidden;
}
.banner-slide{
	width: 1200px;
	height:460px;
	position: absolute;
	background-repeat: no-repeat;	
	display: none;
}
.slide-active{
	display: block;
}
.slide1{
	background-image: url("../img/bg1.jpg");
}
.slide2{
	background-image: url("../img/bg2.jpg");
}
.slide3{
	background-image: url("../img/bg3.jpg");
}
.button{
	position: absolute;
	width: 40px;
	height: 80px; 
	left:244px;
	top:50%;
	margin-top: -40px;
	background:url(../img/arrow.png) no-repeat center center ;
}
.button:hover{
	background-color: #333;
	opacity: 0.5;
	filter:alpha(opacity=50);
}
.prev{
	transform: rotate(180deg);
}
.next{
	left:auto;
	right:0 ;
}
.dots{
	position: absolute;
	right: 15px;
	bottom: 24px;
	text-align: right;
}
.dots span{
	display: inline-block;
	width: 12px;
	height: 12px;
	line-height: 12px;
	border-radius: 50%;
	background: rgba(7,17,27,0.4);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
	margin-right: 8px;
	cursor: pointer;
}
.dots span.active{
	box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;	
	background: #fff;
}






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
<!--script.js-->
// 封装document.getElementById
function byId(id){
  return typeof(id)==="string"?document.getElementById(id):id;
}

var index=0,
    timer=null,
    pics = byId("banner").getElementsByTagName("div"),
    dots=byId("dots").getElementsByTagName("span"),
    prev=byId("prev");
    next=byId("next");
    len=pics.length;
    // console.log(len);

function slideImage(){

  var main = byId("main");
  //滑过清除定时器，离开继续
  main.onmouseover = function(){
    //清除定时器
    if(timer) clearInterval(timer);
  }
  main.onmouseout=function(){
    //继续定时器
    timer = setInterval(function(){
      index++;
      // console.log(index); 
      if(index>=len)
        index=0;
      changeImg();
    },2000);
  }
  //自动触发图片轮播
  main.onmouseout();
  //点击原点切换图片
  for(var d=0;d<len;++d){
    //给所有span添加一个id的属性，值为当前span的索引
    dots[d].id = d;
    dots[d].onclick = function(){
      //改变 index为当前span的索引
      index = this.id;
      changeImg();
    }
  }
  //点击上一张下一张按钮
  next.onclick=function(){
    index++;
    if(index>=len)
      index=0;
    changeImg();
  }
  prev.onclick = function(){
    index--;
    if(index<0)
      index=len-1;
    changeImg();
  }
}

//切换图片
function changeImg(){
  for(var i=0;i<len;++i){
    pics[i].style.display = 'none';
    dots[i].className='';
  }
  //根据index索引，找到当前div，将其显示出来
  pics[index].style.display = 'block';
  dots[index].className = 'active';
}

slideImage();
-------------The End-------------