首页 > Web开发 > 详细

JS 大图转换 无特效版

时间:2016-05-31 20:38:52      阅读:140      评论:0      收藏:0      [点我收藏+]
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 text-align: center;
 9             }
10             #scrollImg{
11                 margin-top: 200px;
12                 width: 200px;
13                 height: 200px;
14                 
15             }
16         </style>
17     </head>
18     <body>
19         <div id="box">
20             <img id="scrollImg" src="img/5.jpg" alt="加载失败" />
21         </div>
22     </body>
23         <script type="text/javascript">
24             // 获取到 img 标签
25             var picture = document.getElementById("scrollImg");
26             var count = 5;
27             setInterval(function(){
28                 count++;
29                 // 实现字符串的拼接
30                 var imgName1 = count + ".jpg";
31                 var imgName2 = "img/" + imgName1;
32                 // 设置 img 标签的图片源
33                 picture.src = imgName2;
34                 // 方法1
35 //                count = count % 3;
36                 // 方法2
37                 if(7 == count){
38                     count = 4;
39                 }
40             },3000);
41             
42         </script>
43 </html>

 

JS 大图转换 无特效版

原文:http://www.cnblogs.com/PowellZhao/p/5547127.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!