js 图片轮播代码带缓冲效果

<!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>可自定义的幻灯片和图片缓冲...</title>
<link href="css教程/css.css" type=text/css rel=stylesheet>
<body>
 <div class="dhooo_tab">
 <ul class="tab_btn" id="mytab_btns1">
  <li class="hot">嘉年华</li><li>完美冬日</li><li>年终庆</li><li>妈咪宝贝</li><li>冬季氛围</li>
 </ul>
 <div class="main" id="main1">
<div class="shell">
<ul id="content1">
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/1.jpg" /></a></li>
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/2.jpg" /></a></li>
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/3.jpg" /></a></li>
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/4.jpg" /></a></li>
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/5.jpg" /></a></li>
</ul>
</div>
 </div>
</div>
 <div class="dhooo_tab">
<div style="height:30px;background:#cc0000;margin-bottom:10px;border-bottom:2px solid #990000;position:relative"><div style="background:#fff;width:80px;font-size:12px;position:absolute;bottom:-2px;left:20px;padding:5px">我的幻灯片</div></div>
 <ul class="tab_btn_num" id="mytab_btns2">
  <li class="hot">1</li><li>2</li><li>3</li><li>4</li><li>5</li>
 </ul>
 <div class="main" id="main2">
<ul class="content">
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/5.jpg" /></a></li>
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/4.jpg" /></a></li>
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/3.jpg" /></a></li>
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/2.jpg" /></a></li>
 <li><a href="http://www.www.111cn.net/" target="_blank"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</div>
<script language=网页特效 src="js/scroll.js" type=text/javascript></script>
</p>
 <p></p>
 <p>   </p>
 <p> </p>
</body>
</html>

源码下载
http://down.111cn.net/down/code/jquery/2010/1023/21379.html

时间: 2024-11-13 10:13:07

js 图片轮播代码带缓冲效果的相关文章

当当js 图片轮播代码

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>当当js 图片轮播代码</titl

js图片轮播效果实现代码_javascript技巧

首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给它添

原生js图片轮播效果实现代码_javascript技巧

现在很多javascript的插件都可以实现图片轮播的功能,这篇文章,主要是通过这个domo来解析javascript图片轮播的原理. 老规矩,先上代码.至于代码中的图片,随便找三张即可,最核心的还是理解其思想. html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动图</title> <link rel="sty

js图片轮播特效代码分享_javascript技巧

本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图:                    -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co

js图片轮播手动切换效果_javascript技巧

利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot

图解js图片轮播效果_javascript技巧

本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下 两种图片轮播实现方案,先来看效果对比: 方案一: 原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张.这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯.  方案二: 实现原理示意图   原理: 1.轮播过程中,有几个关键元素:一个舞台(绿框).候场区(黑框).排队区(红框)和两个数组A和B.A用来保存正在展示和下一个将要展示的图片,如:图片1.2:B用来保存

jQuery左右滚动支持图片放大缩略图图片轮播代码分享_jquery

本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图:                                     -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大

纯JavaScript手写图片轮播代码_javascript技巧

废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2p

JavaScript图片轮播代码分享_javascript技巧

为大家分享的JavaScript图片轮播代码如下 <!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