当前位置: 代码迷 >> Web前端 >> 又一个jquery轮播成效,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器
  详细解决方案

又一个jquery轮播成效,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器

热度:433   发布时间:2013-11-25 13:22:27.0
又一个jquery轮播效果,焦点图,带数字显示序号,这个可以添加对应标题在图片上,支持主流浏览器

先放一个截图,一个网页上放几个效果的案例

/img/2013/11/25/094640137.jpg


演示地址:http://www.corange.cn/demo/3660/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" />
<script type="text/javascript" src="http://i3.dukuai.com/ui/js/jquery-1.32pack.js"></script>
<script type="text/javascript" src="effect_commonv1.1.js"></script>
</head>
<body>

<div style="clear:both; margin-bottom:20px;">
<ul id="pub_slideplay">
<li>
<a target="_blank" href="#">
<img alt="" src="images/01.gif" />
<p>corange.cn</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/02.jpg" />
<p>给我人生中第一个一克拉的钻</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/03.jpg" />
<p>"我喜欢自己二十岁时甜美的笑</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/04.jpg" />
<p>单眼皮MM也可以很漂亮</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/05.jpg" />
<p>一桌子好菜大餐 都没人敢吃</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/06.jpg" />
<p>大学女生寝室真的很“丰满”</p>
</a>
</li>
</ul>
</div>

<div style="clear:both; margin-bottom:20px">
<ul id="pub_slideplay2">
<li>
<a target="_blank" href="#">
<img alt="" src="images/01.gif" />
<p>corange.cn</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/02.jpg" />
<p>给我人生中第一个一克拉的钻</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/03.jpg" />
<p>"我喜欢自己二十岁时甜美的笑</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/04.jpg" />
<p>单眼皮MM也可以很漂亮</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/05.jpg" />
<p>一桌子好菜大餐 都没人敢吃</p>
</a>
</li>
<li>
<a target="_blank" href="#">
<img alt="" src="images/06.jpg" />
<p>大学女生寝室真的很“丰满”</p>
</a>
</li>
</ul>
</div>


<script type="text/javascript">new dk_slideplayer("#pub_slideplay",{width:"320px",height:"170px",fontsize:"12px",time:"5000"});</script>
<script type="text/javascript">new dk_slideplayer("#pub_slideplay2",{width:"320px",height:"170px",fontsize:"12px",time:"4000"});</script>

</body>
</html>
effect_commonv1.1.js文件
http://www.corange.cn//uploadfiles/effect_commonv1.1_46900.rar?

  相关解决方案