横向轮播

 function lxfScroll(main,titleli,alt,speed){
     var lxfscroll = $(main);
     var ul = lxfscroll.find("ul");
     var li = lxfscroll.find("li");
     var tli = $(titleli);
     var alt = $(alt);
     var cutspeed = 350;//切换的速度
     var autospeed = speed;//自动播放的速度
     var n = 0;
     var imgwidth = 480;//获取图片高度
     var lilength = li.length;//获取图片数量
     var timer;
     li.eq(0).clone().appendTo(ul);
     /* 标题按钮事件 */
     function hoverscroll() {
         tli.mouseenter(function(){
             var index = tli.index($(this));
             var lipoint = index*imgwidth;
             var imgTitle = li.find("img").eq(index).attr("alt");
             alt.text(imgTitle);
             tli.removeClass("cur");
             $(this).addClass("cur");
             ul.stop(true,false).animate({"left":-lipoint+"px"},cutspeed);
         });
     };
     /* 自动轮换 */
     function autoroll() {
     /*最后一个回到第一个的时候*/
         if(n >= lilength+1) {tli.removeClass("cur").eq(0).addClass("cur"); ul.stop(true,false).css({left:"0px"});n = 1;};
         var lipoint = n*imgwidth;
         var imgTitle = li.find("img").eq(n).attr("alt");
         ul.stop(true,false).animate({"left":-lipoint+"px"},cutspeed);
         tli.removeClass("cur").eq(n).addClass("cur");
         if(n >= lilength){tli.removeClass("cur").eq(0).addClass("cur"); };
         alt.text(imgTitle);
         n++;
         timer = setTimeout(autoroll, autospeed);
         if(n >= lilength+1) {alt.text(li.find("img").eq(0).attr("alt"));};
     };
     /* 鼠标悬停即停止自动轮换 */
     function stoproll() {
         li.hover(function() {
             clearTimeout(timer);
             n = $(this).prevAll().length+1;
         }, function() {
             timer = setTimeout(autoroll, autospeed);
         });
         tli.hover(function() {
             clearTimeout(timer);
             n = $(this).prevAll().length+1;
         }, function() {
             timer = setTimeout(autoroll, autospeed);
         });
     };
     hoverscroll();
     autoroll();//启动自动播放功能
     stoproll();//启动鼠标悬停功能
 };  

 $(function(){
     lxfScroll(".lxfscroll",".lxfscroll-title li",".lxfscroll-alt",2000);
      $(".lxfscroll").click(function(){
       $(".hide_theme").show();
     });
     $(".false").click(function(){
       $(".hide_theme").hide();
     });
 });
 </script> 

JS巧计__轮播的更多相关文章

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

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  5. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  6. Bootstrap的js插件之轮播(carousel)

    轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  9. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

随机推荐

  1. 飞机大战编写以及Java的面向对象总结

    面向对象课程完结即可编写一个简单的飞机大战程序.我觉得我需要总结一下 飞机大战中类的设计: 父类:FlyingObject(抽象类) 接口:Award .Enemy 子类:Hero.Bullet.Ai ...

  2. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  3. Tanks坦克大战

    创建工程,场景: 将素材导入,Unity5以上的版本,无需担心素材包的路径问题,中文路径也可以直接导入了,简单方法就是将素材包直接拖到Project面板 游戏所需要的场景在Prefabs里的Level ...

  4. VB.NET中Form窗体运行时,按ESC退出全屏状态

    1.在其KeyDown事件添加: If e.KeyValue = 27 Then Me.FormBorderStyle = Windows.Forms.FormBorderStyle.Sizable ...

  5. 解决Qualcomm Atheros AR8161 Gigabit Ethernet网卡Linux下坏掉的问题

    我的戴尔(Dell)I2330R-168一体电脑的网卡在升级某个内核版本后,网卡就用一会儿就坏了 ifconfig eth0 eth0: flags=<UP,BROADCAST,RUNNING, ...

  6. Adressing

  7. 3.Git的诞生和其分布式的优点

    Git的诞生 省略了,喜欢的可以看百度. 分布式的优点 先说集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完 ...

  8. JAG Summer 2012 Day 4 C Connect

    状压dp,由于枚举两维状态会GG,所以只枚举当前位置前m个的状态,就是这个样子大概= =: 呆马: #include <iostream> #include <cstdio> ...

  9. lua 基础 1

    --1.1 Chunks--[[Chunk 是一系列语句,Lua 执行的每一块语句,比如一个文件或者交互模式下的每一行都是一个 Chunk.]] -- 1.2 全局变量--[[ 全局变量不需要声明,给 ...

  10. AjaxUpload跨域上传问题

    1. 调用上传的html页面所在域名是 www.abc.com ,添加document.domain <script> document.domain = "abc.com&qu ...