纯CSS打造图片定时循环滚动焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS打造图片定时循环滚动焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为纯CSS打造图片定时循环滚动焦点图" />
<link rel="stylesheet" type="text/css" href="css/lrtk.css">
<title>纯CSS打造图片定时循环滚动焦点图</title>
</head>
<body>
<!-- 代码 开始 -->
<div class="container">
	<div class="img">
		<ul class="nav">
			<li><a href="#" target="_blank"><img src="images/0.jpg"></a></li>
			<li><a href="#" target="_blank"><img src="images/1.jpg"></a></li>
			<li><a href="#" target="_blank"><img src="images/2.jpg"></a></li>
			<li><a href="#" target="_blank"><img src="images/3.jpg"></a></li>
			<li><a href="#" target="_blank"><img src="images/4.jpg"></a></li>
		</ul>
		<div class="bg">
			<ul class="bg_in">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li id="lp"></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
*{margin:0;padding:0;}
html{overflow:scroll;overflow-x:hidden;}
body,html{width:100%;height:100%;font-family:'΢���ź�',Verdana,Arial,Helvetica,sans-serif;font-size:12px;}
ul,ol{list-style:none;}
div{height:auto;}
img{display:block;border:none;}
.container{width:800px;height:330px;margin:0 auto;margin-top:20px;border:5px solid #d0d0d0;}
.img{width:800px;height:330px;overflow:hidden;position:relative;}
.bg{width:auto;height:20px;z-index:99;position:absolute;left:15px;bottom:15px;}
.bg_in{width:200px;height:20px;position:relative;}
.bg_in li{width:20px;height:20px;line-height:20px;border-radius:20px;background:#ffffff;opacity:0.5;text-align:center;color:#333333;float:left;margin-right:10px;position:relative;z-index:999;}
.bg_in #lp{position:absolute;left:0px;top:0;background:#ff3c00;opacity:1;z-index:998;animation:myfirstArr 22.5s infinite;-webkit-animation:myfirstArr 22.5s infinite;-moz-animation:myfirstArr 22.5s infinite;-o-animation:myfirstArr 22.5s infinite;}
.nav{width:4000px;height:330px;position:absolute;left:0px;top:0;z-index:9;animation:myfirst 22.5s infinite;-webkit-animation:myfirst 22.5s infinite;-0-animation:myfirst 22.5s infinite;-moz-animation:myfirst 22.5s infinite;}
.nav li{float:left;}
.nav li img{width:100%;height:100%;}
@keyframes myfirst{0%{left:0px;}
18%{left:0px;}
20%{left:-800px;}
38%{left:-800px;}
40%{left:-1600px;}
58%{left:-1600px;}
60%{left:-2400px;}
78%{left:-2400px;}
80%{left:-3200px;}
98%{left:-3200px;}
100%{left:-0px;}
}
@-o-keyframes myfirst{0%{left:0px;}
18%{left:0px;}
20%{left:-800px;}
38%{left:-800px;}
40%{left:-1600px;}
58%{left:-1600px;}
60%{left:-2400px;}
78%{left:-2400px;}
80%{left:-3200px;}
98%{left:-3200px;}
100%{left:-0px;}
}
@-moz-keyframes myfirst{0%{left:0px;}
18%{left:0px;}
20%{left:-800px;}
38%{left:-800px;}
40%{left:-1600px;}
58%{left:-1600px;}
60%{left:-2400px;}
78%{left:-2400px;}
80%{left:-3200px;}
98%{left:-3200px;}
100%{left:-0px;}
}
@-webkit-keyframes myfirst{0%{left:0px;}
18%{left:0px;}
20%{left:-800px;}
38%{left:-800px;}
40%{left:-1600px;}
58%{left:-1600px;}
60%{left:-2400px;}
78%{left:-2400px;}
80%{left:-3200px;}
98%{left:-3200px;}
100%{left:-0px;}
}
@keyframes myfirstArr{0%{left:0px;}
19%{left:0px;}
20%{left:30px;}
39%{left:30px;}
40%{left:60px;}
59%{left:60px;}
60%{left:90px;}
79%{left:90px;}
80%{left:120px;}
99%{left:120px;}
100%{left:0px;}
}
@-webkit-keyframes myfirstArr{0%{left:0px;}
19%{left:0px;}
20%{left:30px;}
39%{left:30px;}
40%{left:60px;}
59%{left:60px;}
60%{left:90px;}
79%{left:90px;}
80%{left:120px;}
99%{left:120px;}
100%{left:0px;}
}
@-moz-keyframes myfirstArr{0%{left:0px;}
19%{left:0px;}
20%{left:30px;}
39%{left:30px;}
40%{left:60px;}
59%{left:60px;}
60%{left:90px;}
79%{left:90px;}
80%{left:120px;}
99%{left:120px;}
100%{left:0px;}
}
@-o-keyframes myfirstArr{0%{left:0px;}
19%{left:0px;}
20%{left:30px;}
39%{left:30px;}
40%{left:60px;}
59%{left:60px;}
60%{left:90px;}
79%{left:90px;}
80%{left:120px;}
99%{left:120px;}
100%{left:0px;}
}

附件:下载该文件资源,减少时间成本(增值服务)