qianck

博客园 首页 新随笔 联系 订阅 管理

这个是自己修改的轮播图片,在网上有的是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)

 

posted on 2021-09-01 11:21  qianck  阅读(150)  评论(0编辑  收藏  举报

有什么问题,也可以找我,随时交流,QQ:1511923161

免费pdf电子书下载