jquery 实现多图轮换

<script type="text/javascript">
var t;
var speed=2;
var i=0;
function qiehuan(){
var size=$("#all").find("div").length;
$("#all").find("div").hide();
$("#all").find("div").eq(i).show();
i = i+1 == size ?0:i+1;
t=setTimeout("qiehuan()",speed*1000);
}
onload=function(){qiehuan();};
$(document).ready(function(){
$("#all").hover(function(){
clearInterval(t);
});
$("#all").mouseleave(function(){
qiehuan();
});
});
</script>
  </head>
  
  <body>
    <div id="all" style="float:left; position:relative;overflow:hidden;width:300px;height:240px;">
    <div><img width="300" height="240" src=\‘#\‘" /images/1.jpg" alt="1" /></div>
    <div><img width="300" height="240" src=\‘#\‘" /images/2.gif" alt="2"/></div>
    <div><img width="300" height="240" src=\‘#\‘" /images/Winter.jpg" alt="3"/></div>
    </div>
  </body>
时间: 2024-10-30 20:16:18

jquery 实现多图轮换的相关文章

jQuery cxSlide 焦点图轮换

cxSlide 是一个简单易用的焦点图展示插件,支持水平.纵向切换,透明过渡切换. 已支持 CSS 动画过渡切换.通过 CSS 动画切换,可以展示更多效果. 版本: jQuery v1.7+ jQuery cxSlide v2.0.2 注意事项: 内部会自动创建切换按钮元素,也可在外部直接创建,若外部已创建,内部将跳过此步骤: 展示图片未超过 1 张时,会隐藏切换按钮元素. github地址 在线实例 实例预览 基础示例 实例预览 CSS 动画 实例预览 API 接口 使用方法 载入 JavaS

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null;

WEB前端:04_slider幻灯片(焦点图轮换)

slider幻灯片(焦点图轮换) 网站常用效果之一,以下为简化版,用于学习javascript基础知识. 效果图: slider幻灯片(焦点图轮换) - 纯JS简化版 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

一款基于jQuery饼状图比例分布数据报表

今天给大家带来一款基于jQuery饼状图比例分布数据报表.这款报表插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width: 600px; margin: 0 auto;"> <table id='myTable5'> <caption> 会员地区分布</caption> <th

8款耀眼的jQuery/HTML5焦点图滑块插件

1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片.焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用. 在线演示 源码下载 2.HTML5/CSS3淡入淡出滑块焦点图 非常清新 我们已经分享过几款简单的CSS3/jQuery焦点图插件,今天要分享的这款焦点图切换时有淡如淡出的动画效果,是利

一个简单的基于jQuery的焦点图(幻灯片)代码

本代码实现的是横向循环滚动, <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery的焦点图(幻灯片)</title> <sc

原生JS和jQuery实现banner图滚动那些事

  前  言 阿q 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码 首先,创建基本结构 <div id="outside"> <div id="inside"> <div>1</div> <div>2</div> <div>3</div> <div&

jquery轮播图

咱们今天还是轮播图,今天说jquery的轮播图! 首先,要有个插件: 请无视Zepto插件,他没起到任何作用! 就是这两个啦! 然后就是代码! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入插件--> <script src="../上月插件/jquery-3.1.1.min.js&q

jquery轮播图详解,40行代码即可简单解决。

我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jquery其实真的很简单,只要不停的练习就会有很大进步.每天150行代码,会帮助我们走的更远.对于编程对于脚本语言,我们这样的学生娃没有和比人一样初中,高中就开始研究,要想走在时代的前沿需要怎样的努力和毅力,是我们一类人需要思考的方向. 下面解释下焦点图,焦点图使用范围非常广,banner和anima