Jquery中文网 > 脚本编程 > javascript > 正文 js 图片轮换代码

js 图片轮换代码

发布时间：2017-10-25 编辑：www.jquerycn.cn

jquery中文网为您提供js 图片轮换代码等资源，欢迎您收藏本站，我们将为您提供最新的js 图片轮换代码资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >js 图片轮换代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>picsGlide</title> <style type="text/css"> body{ font-size:12px; color:#333;} #picBox{width:610px; height:205px; margin:50px auto; overflow:hidden; position:relative;} #picBox ul#show_pic{ margin:0; padding:0; list-style:none; height:205px; width:3050px; position:absolute;} #picBox ul#show_pic li{ float:left; margin:0; padding:0; height:205px;} #picBox ul#show_pic li img{ display:block;} #icon_num{ position:absolute; bottom:0px; right:10px;} #icon_num li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;margin-right:5px;} #icon_num li:hover,#icon_num li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;} #picBox_top{width:610px; height:205px; margin:50px auto; position:relative; overflow:hidden;} #picBox_top ul#show_pic_top{ margin:0; padding:0; list-style:none; height:205px; width:610px; position:absolute;} #picBox_top ul#show_pic_top li{ float:left; margin:0; padding:0; height:205px;} #picBox_top ul#show_pic_top li img{ display:block;} #icon_num_top{ position:absolute; bottom:0px; right:10px;} #icon_num_top li{ float:left; background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0;width:15px; height:15px; list-style:none; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;margin-right:5px;} #icon_num_top li:hover,#icon_num_top li.active{ background:url(http://pc.qq.com/pc/images/flashbutton.gif) no-repeat 0 0; color:#fff;} </style> </head> <body>

<ul id="show_pic_top" style="top:0;"> <li> js 图片轮换代码

</li> <li> js 图片轮换代码

</li> </ul> <ul id="icon_num_top"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js图片轮换代码 js图片轮播简单示例
 js图片轮换效果的例子
 JS图片自动轮换效果实例代码
 图片轮换效果(点击按钮停止执行)的js代码
 js 图片轮换代码
 js 鼠标滚轮改变图片大小的小例子
 JQuery 图片滚动轮播示例代码
 Js 图片滚动的实现方法
 javascript+xml简单图片轮换(只支持IE)的实现代码
 CSS实现轮播图广告效果

上一篇：js 可伸缩网页内容展示效果

[关闭]

js 图片轮换代码

最近更新

浏览排行