这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好,
比如:dedecms 的首页的轮播图是用flash实现滚动的。
所以这个自己修改了一下,实现html+js+css 滚动图片,效果很好。
这里没有用到jquery ,感觉加载jquery 也耗时间,所以没有引用。速度快就是王道。
代码如下:
<!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">
<title>js css 轮播</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="css/gundong.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!--gundong size: 280px * 192px -->
<div id="turn" class="turn">
<div class="turn-loading"><img src="../images/loading_comment.gif" alt="loading"/></div>
<ul class="turn-pic">
<li><a href="http://ishuba.com.cn/article-221-1.html" target="_blank" title="成大事者善沟通(高清)1" ><img src="images/1.jpg" width="280" height="192" alt="成大事者善沟通(高清) pdf下载" /></a></li>
<li><a href="http://ishuba.com.cn/article-221-1.html" target="_blank" title="成大事者善沟通(高清)2" ><img src="images/1.jpg" width="280" height="192" alt="成大事者善沟通(高清) pdf下载" /></a></li>
<li><a href="http://ishuba.com.cn/article-221-1.html" target="_blank" title="成大事者善沟通(高清)3" ><img src="images/1.jpg" width="280" height="192" alt="成大事者善沟通(高清) pdf下载" /></a></li>
</ul>
</div>
<script type="text/javascript" src="js/gundong.js"></script>
</body>
</html>
效果图如下:
但有个不好的地方就是要2张图片以上,最少2张图片,不然滚动轮播的时候会有一个白块,这个是要注意的地方。
喜欢就拿去用在自己的项目吧。有什么问题也可以找我,随时交流。
点击这里下载:html js css 轮播图片 (访问密码:7509)