JS原生轮播图

2017-09-09 19:00 出处:360java.com 作者:360java  阅读()
哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 * { 2 padding : 0px ; 3 margi

哈喽!我的朋友们,最近有一个新项目。所以一直没更新!有没有想我啊!!

今天咱们来说一下JS原生轮播图!

话不多说:

直接来代码吧:下面是CSS部分:

 1 *{
 2                 padding: 0px;
 3                 margin: 0px;
 4             }
 5             img{
 6                 width: 500px;
 7                 height: 300px;
 8             }
 9             li{
10                 float: left;
11             }
12             ul{
13                 width: 2000px;
14                 list-style: none;
15                 position: absolute;
16             }
17             div{
18                 width: 500px;
19                 height: 300px;
20                 /*溢出部分隐藏*/
21                 overflow: hidden;
22                 margin: 60px auto;
23                 position: relative;
24             }

 

HTML部分!

		<div>
			<ul>
				<li><img src="img/1.jpg" /></li>
				<li><img src="img/2.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/1.jpg" /></li>
			</ul>
		</div>

  接下来是JS部分:

 1 //1、获取到ul
 2             var ul = document.getElementsByTagName("ul")[0];
 3             var x = 0;
 4             
 5             //id 用来关闭定时器的
 6             var id = setInterval(abc,10);
 7             
 8             function abc(){
 9                 ul.style.left = x-- +"px";
10                 
11                 //如果到第三周图片了
12                 if(x == -1500){
13                     x = 0;//把ul修改成第一张图片
14                     ul.style.left = x+"px";
15                 }
16                 if(x % 500 == 0){ //第一张图片进来
17                     clearInterval(id); //关闭定时器
18                     //开启定时器 隔半秒钟开启定时器
19                     setTimeout(function(){
20                         //500毫秒之后开启定时器,继续执行
21                         id = setInterval(abc,10);
22                     },500);//setTimeout 延时执行
23                 }
24             }

就是这么简单!你学会了吗??

分享到:
本文标签: 原生, 轮播

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) java学习 360java 360java.com, All Rights Reserved.

苏ICP备16022210号