JavaScript实现图片的自动轮播

福建厦门赵 發表於 2019-11-29 23:25:00

一、html和css部分代码
  设计的框架为：
    一个大的div用来显示图片（共四张图片），这个大的div中包含两个箭头，用来切换图片，向左或向右；
    然后底部有四个小的div用来对应每张图片；
  html和css效果图：
<img src="https://img2018.cnblogs.com/i-beta/1841950/201911/1841950-20191129215505470-475006364.png">
 
 代码：
<div class="cnblogs_code">
<pre> 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4 <meta charset="utf-8">
 5 <title>myImages</title>
 6 <style type="text/css">
 7 img{
 8 width: 100%;
 9 }
10
11 .li_img{
12 width: 800px;
13 float: left;
14 list-style: none;
15 }
16
17 .ul_img{
18 width: 6000px;
19 padding:0px;
20 margin: 0px;
21 transition: all 2s;
22
23 }
24
25 .main_div{
26 width: 800px;
27 overflow: hidden;
28 position: relative;
29 top: 100px;
30 left: 350px;
31 }
32
33 .arrows{
34 z-index: 9999;
35 position: absolute;
36 padding-top: 230px;
37 width: 800px;
38 }
39
40 .arrows span{
41 font-size: 3em;
42 color: seashell;
43 }
44
45 .arrows span:hover {
46 cursor: pointer;
47 background-color: rgba(192, 192, 192, 0.29);
48 }
49
50 .div_btn{
51 float: left;
52 border-radius: 100px;
53 background-color: aquamarine;
54 width: 60px;
55 height: 10px;
56 margin-left: 10px;
57 margin-top: 130px;
58 }
59
60 .div_btn:hover{
61 background-color:aqua;
62
63 }
64 </style>
65 </head>
66 <body>
67 <div class = "main_div">
68 <div class = "arrows">
69 <span title="1" class="arrow"><</span>
70 <span title="0" class="arrow" style="float: right">></span>
71 </div>
72
73 <ul class="ul_img">
74 <li class="li_img"><img src="images/1.jpg"></li>
75 <li class="li_img"><img src="images/2.jpg"></li>
76 <li class="li_img"><img src="images/3.jpg"></li>
77 <li class="li_img"><img src="images/4.jpg"></li>
78 </ul>
79 </div>
80
81 <div style="margin-left: 600px">
82 <div class="div_btn"></div>
83 <div class="div_btn"></div>
84 <div class="div_btn"></div>
85 <div class="div_btn"></div>
86 </div>
87 <script type="text/javascript" src="myscript.js"></script>
88 </body>
89 </html></pre>
</div>
 
JavaScript部分：
轮播的原理：先把图片排成一行，然后准备一个只有一张图片大小的容器，对这个容器设置超出部分隐藏，再控制定时器来让这些图片整体左移或右移，这样呈现出来的效果就是图片在轮播了。
  实现的功能：
      1、图片可以自动右向轮播，轮播至最后一张图片的时候，反向向左轮播，循环反复
      2、可以用左右方向键去控制图片轮播方向
      3、可以利用下方的圆角矩形来选择浏览某一张图片
 根据实现的功能，具体代码实现分为三个部分：
     1、实现图片的自动轮播：这里需要设计一个定时器，用到setInterval()方法，每隔一段时间，重复执行一次轮播代码，当轮播到边界时，设置数组的下标往反方向轮播即可。
     2、给左右箭头添加事件，实现通过左右箭头选择轮播的方向
     3、给下方的四个圆角矩形添加事件，实现浏览某张特定的图片
 
具体代码：（myscript.js）
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_2b3dd33a-540b-4cbd-87c0-71da56555d9c" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_2b3dd33a-540b-4cbd-87c0-71da56555d9c" class="cnblogs_code_hide">
<pre>1 1 //记录轮播的次数
2 2 var count = 0;
3 3 //轮播的方向,默认向右
4 4 var isgo = 0;
5 5 //第一计时器对象
6 6 var timer;
7 7 //获取ul元素
8 8 var ul_img = document.getElementsByClassName("ul_img");
9 9 //获取所有li图片元素
 1010 var li_img = document.getElementsByClassName("li_img");
 1111 //第一部分，设置定时器
 1212 function showtime(){
 1313 timer = setInterval(function(){
 1414 if(isgo==false){ //isgo为false表示向右轮播
 1515 count++;
 1616 if(count>=li_img.length-1){ //如果轮播到右边界，往反方向轮播
 1717 count = li_img.length-1;
 1818 isgo=true;
 1919 }
 2020 //显示轮播到的当前图片，图片轮播的原理就是把图片排成一行，
 2121 //然后准备一个只有一张图片大小的容器，对这个容器设置超出部分隐藏，
 2222 //再控制定时器来让这些图片整体左移或右移，这样呈现出来的效果就是图片在轮播了
 2323 ul_img.style.transform = "translate("+ -800*count +"px)";
 2424 }else{ //isgo为true表示向左轮播
 2525 count--;
 2626 if (count<=0) { //如果轮播到左边界，往反方向轮播
 2727 count = 0;
 2828 isgo=false;
 2929 }
 3030 //显示轮播到的当前图片
 3131 ul_img.style.transform = "translate("+ -800*count +"px)";
 3232 }
 3333
 3434 for (var i = 0; i < div_btn.length; i++) {
 3535 //这里是给下面的圆角矩形设置颜色，当轮播到这张图片时，显示为深色，否则显示为浅色
 3636 div_btn.style.backgroundColor = "aquamarine";
 3737 }
 3838 div_btn.style.backgroundColor = "aqua";
 3939 },4000);//每次延迟4秒钟
 4040 }
 4141 showtime();
 4242
 4343 //第二部分，为箭头添加事件
 4444 //获取控制方向的箭头元素
 4545 var arrow = document.getElementsByClassName("arrow");
 4646 //为箭头绑定事件
 4747 for(var i=0; i<arrow.length ;i++){
 4848 //鼠标悬停时
 4949 arrow.onmouseover = function(){
 5050 //停止计时器
 5151 clearInterval(timer);
 5252 }
 5353 //鼠标离开时，开始轮播
 5454 arrow.onmouseout = function(){
 5555 showtime();
 5656 }
 5757 //鼠标点击时，轮播一张图片
 5858 arrow.onclick = function(){
 5959 //区分左右箭头
 6060 if(this.title==0){ //点击的是右箭头时，往右轮播
 6161 count++;
 6262 if(count>3) {
 6363 count = 0;
 6464 }
 6565 }else{
 6666 count--;
 6767 if(count<0){
 6868 count=3;
 6969 }
 7070 }
 7171 //显示轮播到的当前图片
 7272 ul_img.style.transform="translate("+ -800*count+"px)";
 7373 for (var i = 0; i < div_btn.length; i++) {
 7474 div_btn.style.backgroundColor = "aquamarine";
 7575 }
 7676 div_btn.style.backgroundColor = "aqua";
 7777 }
 7878 }
 7979
 8080 //第三部分
 8181 //鼠标悬停在底部圆角矩形的操作
 8282 var div_btn = document.getElementsByClassName("div_btn");
 8383 div_btn.style.backgroundColor = "aqua"; //刚开始时，默认在第一张图，下面的圆角矩形应显示为深色
 8484 for (var i = 0; i<div_btn.length; i++) { //给每个圆角矩形添加事件
 8585 div_btn.index = i;
 8686 div_btn.onmouseover = function(){
 8787 //当鼠标落在某个圆角矩形时
 8888 clearInterval(timer); //停止定时器
 8989 for(var j=0;j<div_btn.length;j++){ //设置矩形的颜色
 9090 div_btn.style.backgroundColor="aquamarine";
 9191 }
 9292 div_btn[this.index].style.backgroundColor="aqua";
 9393 //控制方向，当鼠标停留在边界时，需设置轮播的方向，便于
 9494 //鼠标离开重新启动定时器时，轮播的方向正确
 9595 if (this.index==3) {
 9696 isgo = true;
 9797 }
 9898 if (this.index==0) {
 9999 isgo = false;
100 100 }
101 101 //让count值对应
102 102 count = this.index;
103 103 ul_img.style.transform = "translate("+ -800*this.index +"px)";
104 104 }
105 105 div_btn.onmouseout = function(){//鼠标离开时
106 106 //重新启动计时器
107 107 showtime();
108 108 }
109 109 }</pre>
</div>
View Code</div>
<img alt="" data-src="https://img2018.cnblogs.com/i-beta/1841950/201912/1841950-20191223204133558-350559453.png">
<img src="https://img2018.cnblogs.com/i-beta/1841950/201912/1841950-20191223204148762-1153103233.png">
<img src="https://img2018.cnblogs.com/i-beta/1841950/201912/1841950-20191223204158671-2083544325.png">
<img src="https://img2018.cnblogs.com/i-beta/1841950/201912/1841950-20191223204210424-1035486753.png">
 
总结：
JavaScript用到的主要知识点：
1、setInterval()和clearInterval()方法，用来控制定时器；
2、鼠标的mouseover、mouseout和click事件；
 
对我个人而言，主要难点在于对html和css不熟悉。
 
整体效果图（一直想弄一个动态图，没弄出来，不好意思，只能静态的截图了）：
<img src="https://img2018.cnblogs.com/i-beta/1841950/201911/1841950-20191129232215800-1362962889.png">
 
 
<img src="https://img2018.cnblogs.com/i-beta/1841950/201911/1841950-20191129232324759-1943120817.png"> 
来源：https://www.cnblogs.com/xiaoxb17/p/11960570.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript实现图片的自动轮播