简单轮播

$(function(){
    var _index=0;
    var Time = null;
    var Sudu="";
    for(a=1;a<$("#flashs .bgitem").size()+1;a++){
    $("#btn").html($("#btn").html()+"<span>"+a+"</span>")
    }
    $("#btn span").eq(0).addClass("cur");
    function autoTime(){
        if(_index<$("#flashs .bgitem").size()-1){_index++}else{_index=0};
        $("#flashs .bgitem").eq(_index).fadeIn(Sudu).siblings().fadeOut(Sudu);
    $("#btn span").eq(_index).addClass("cur").siblings().removeClass("cur");
    }

    $("#btn span").click(function(){

                                _index = $(this).index();
                                $(this).addClass("cur").siblings().removeClass("cur");
                                $("#flashs .bgitem").eq(_index).fadeIn(Sudu).siblings().fadeOut(Sudu);

                         })
    $("#btn span").hover(function(){clearInterval(Time)},function(){Time = setInterval(autoTime,6000);})
    Time = setInterval(autoTime,6000);
}
)
时间: 2024-08-08 22:05:52

简单轮播的相关文章

原生js面向对象实现简单轮播

平时中我习惯用jquery写轮播效果,实现过程不是很难,也很方便,为了加深对js面向对象的理解,我打算用面向对象实现一个简单的轮播,这里采用了字面量的方式实现.为了实现这个过程,我们要自己动手封装一个运动函数animate,在这里我采用的是匀速运动的方式,这种方式可能体验不是很好,后面分析js代码我在详细解释.废话不多说,先上代码.页面布局可以根据自己的习惯来. html代码: <head> <meta charset="UTF-8"> <meta nam

原生js简单轮播图 代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

jquery实现简单轮播

先上简单的html代码 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="./css/init2.css"> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></sc

手把手原生js简单轮播图

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

简单轮播的实现

之前在培训班里面学到的实现轮播的方式有很多,无论是从 HTML.CSS.JavaScript.还是 jQuery 方面,代码.布局都有多种方法,只要掌握其中原理和逻辑,剩下的就是看个人喜好. 当然我们在编程的过程中,要注意代码规范.页面工整.避免代码冗余.图片加载.浪费内存.遵循命名规范等. 无论写一个什么样的网页,第一步便是素材的准备,第二步整理好基本样式/布局,然后用 HTML + CSS 实现静态样式,用 jQuery 实现动态效果,最后便是调试程序.(个人一直是这样的流程). 首先从文件

(新手向)基于Bootstrap的简单轮播图的手机实现

个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先是本地站点搭建:win+R输入mmc打开控制台,文件-添加/删除管理单元,Internet信息服务.添加确定,右侧基本信息,新建网站-把路径改了.设定一个端口号,手机浏览器就可以输入  电脑局域网ip:端口号 就可以连上去了. 接下来问题来了,一个个点击查看然后关闭图片是一件更不环保的事.何不做一个

vue上的简单轮播图

好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用.moveLeft向左移动一个格子,造成滚动的假象,此时第二张图在第一个格子的位置: 这时候把第一个格子 li 的元素摘下接到 ul 末尾,并马上撤掉.moveLeft.每张图都在自己的格子上. 定时器循环该操作,一直轮播.可以用touch事件添加touchmove左右滑动效果和切换图片的功能,就不

js写的简单轮播图

这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放,离开自动播放6.移动到导航上,切换相对应的导航 然后贴代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume

原生js实现一个简单轮播效果

代码简单,直接上: <!DOCTYPE html> <html> <head> <title>轮播</title> <meta charset="utf-8"> <style type="text/css"> *{ padding:0; margin:0; } .mainCss{ width:100px; height: 200px; position: relative; over

简单轮播制作

插件描述:unslider.min.js 体积仅 2.56kb ,却能满足绝大部分网站的轮播需求.支持响应式,最低支持到IE6(亲测).可以使用CSS进行完全的自定义. 举一个最常见的轮播图例子,五张轮播图 + 圆点指示器 + 左右箭头. <!-- 首先引入jQuery和unslider --> <script src="jquery-1.11.1.min.js"></script> <script src="unslider.min