基于JQuery实现的幻灯片轮播(对时间间隔做严格控制)

<div class="tel_slide">
    <div class="tel_slide_title">Title</div>
    <div class="slidebtn" id="left" ><!--左按钮-->
        <img alt="" src="images/left.png">
    </div>
    <div class="tel_slide_content">
        <img src="images/1.jpg">
    </div>
    <div class="tel_slide_content">
        <img src="images/2.jpg">
    </div>
    <div class="tel_slide_content">
        <img src="images/3.jpg">
    </div>
    <div class="tel_slide_content">
        <img src="images/4.jpg">
    </div>
    <div class="slidebtn" id="right" ><!--右按钮-->
        <img alt="" src="images/right.png">
    </div>
    <div class="slidebottombtn"><!--下面的数字-->
        <a href="javascript:void(0)">1</a>
        <a href="javascript:void(0)">2</a>
        <a href="javascript:void(0)">3</a>
        <a href="javascript:void(0)">4</a>
    </div>
</div>

<script type="text/javascript">
var begintime;
var endtime;
var cur = 0;
var max = $(".tel_slide_content").size()-1;
var duration = 3000;
$(document).ready(function(){
  $(".slidebtn").mouseover(function(){
    var idattr = $(this).attr("id");
    $(this).children("img").attr("src","images/"+idattr+"2.png");
  });
  $(".slidebtn").mouseout(function(){
    var idattr = $(this).attr("id");
    $(this).children("img").attr("src","images/"+idattr+".png");
  });
  $(".slidebtn").click(function(){
          var lr = $(this).attr("id");
        slide(1,1,lr==‘left‘?0:1);
  });
  $(".slidebottombtn a").click(function(){
          var target = $(this).html();
          skipto(cur, target-1);
  });
  slide(0,0,1);//第一次触发定时调用
});

//type:0-第一次调用,1-非第一次调用;
//isman:0定时调用,1手工调用;lr左右
//lr:0-previous, 1-next
function slide(isfirst,isman,lr){

    if(isfirst==0){    //第一次触发
        $(".slidebottombtn a").eq(0).css("color","red");
        $(".tel_slide_content").eq(0).fadeIn();
        setTimeout(function(){
            slide(1,0,1);
        },duration);
    }else{            //非第一次触发
        if(isman==0){    //自动调用
            endtime = new Date().getTime();
            var gap = endtime - begintime;
            if(gap<duration){    //要判断上一次切换跟现在的时间间隔,够3秒才切换。
                setTimeout(function(){
                    slide(1,0,1);
                },gap);
            }else{
                skipto(cur, cur==max?0:++cur);
                sdate = new Date();
                begintime = sdate.getTime();
                setTimeout(function(){
                    slide(1,0,1);
                },duration);
            }
        }else{    //手动调用
            var from = cur;
            if(lr==0){
                cur = cur==0?max:--cur;
            }else{
                cur = cur==max?0:++cur;
            }
            skipto(from, cur);
            begintime = new Date().getTime();
            setTimeout(function(){
                slide(1,0,1);
            },duration);
        }
    }
}

function skipto(from, to){
    $(".slidebottombtn a").eq(from).css("color","white");
    $(".tel_slide_content").eq(from).fadeOut();
    $(".tel_slide_content").eq(to).fadeIn();
    $(".slidebottombtn a").eq(to).css("color","red");
    begintime = new Date().getTime();
    cur = to;
}

</script>
时间: 2024-11-05 16:26:33

基于JQuery实现的幻灯片轮播(对时间间隔做严格控制)的相关文章

基于jQuery实现左右图片轮播(原理通用)

基于jQuery实现左右图片轮播(原理通用), 本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下 运行效果图: 重点!!! 实现原理: 通过判断index值的大小变化来判断图片左移还是右移.通过控制图片的left值,来达到一个轮播的效果. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

基于jQuery slide插件的轮播大图,带标题及简介,附源码

1.首先看效果 2.源码 1)index.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title></title> </head> <body> <!-- Demo start --> <!-- css --> <link rel=&

基于jquery的简单图片轮播----banner

主要用到的几个JQUERY函数: li:nth-child(2)  第二张图的意思: attr() 方法设置或返回被选元素的属性值. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. 先说下实现的机制: 首先是一个大盒子,里面三张图片,然后显示的只是其他三分之一中间的位置,其他部分是被隐藏的,通过animate方法,从隐藏的地方把其他的拉出来 这段代码的核心就下面这句话了: oUl.stop(true).animate({"left":-countw

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

jquery全屏背景轮播切换的登录页

很大气漂亮的注册登录页面模板,带背景全屏轮播JS特效,基于jQuery实现,可左右按钮实现背景全屏切换,全屏效果是基于背景图片平铺,插件支持自动切换播放. 演示    下载 <!DOCTYPE html> <html> <head> <title>jquery带全屏背景图片轮播切换的注册登录页面-素材吧</title> <meta name="keywords" content="jQuery背景全屏轮播,JS

介绍两个JQuery插件 — 滚动和轮播

1.滚动组件. 有时候需要在网页中的各个部分跳转,类似于回到首页的功能,给点动画当然是极好的.JQuery插件AnimateScroll就是解决这个问题的. 使用方法类似这样: $('#use').animatescroll({scrollSpeed:1500, easing:'easeOutCubic'}); //跳转到#use处 更多方法请访问项目主页. 2.轮播组件 这款轮播组件同样基于JQuery,可以用来做个牛逼哄哄的3D相册神马的. demo地址:http://tympanus.ne

使用javascript,jquery实现的图片轮播功能

使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以直接把代码copy下来,放入一个html 文件即可,然后把jquery文件放在同一个文件夹下就可以了.文件下载地址:http://download.csdn.net/detail/xyytcs/5037545 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

jQuery轻量级京东图片轮播代码等

http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间:2016-07-11 09:18 类别:脚本 0 更多相关 jQuery缩略图数字按钮图片切换 所属专题:焦点图代码 脚本简介 jQuery轻量级京东图片轮播代码是一款带左右按钮控制,带缩略图的图片轮播代码.

基于css和js的轮播效果图实现

基于css和js的轮播效果图实现 第一篇:效果图 1.先啥也不说直接上效果图 第二篇:详细讲解 1.  建立容器  #box 给其设置相关属性(注意:overflow:hidden;) 2.  Box中包括有ul li 以及a标签.在图片描述的时候,确保span所在层置顶. 3. <div class="innerText"> </div> <span class="innerText1">第一辆车</span> 另外