横向轮播

 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. WEB启动时就加载servlet的dopost方法

    web启动的时候可以加载servlet的init方法,无法加载dopost方法,如果你需要什么内容在启动的时候执行,可以将内容放到init方法里面,dopost方法,是在客户端使用post请求的时候才 ...

  2. Samba文件服务器详细配置步骤

    准备安装 环境:CentOS 6.3_x64bit 安装:Minimal(最小) 1.配置IP地址 2.挂载:[root@localhost ~]# mount -t iso9660 /dev/cdr ...

  3. 夺命雷公狗-----React---16--事件操作事件

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  4. JS中的prototype

    JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

  5. Linux主机规划

    当你想装linux操作系统的时候,一定要知道你的用途,不同的用途就要规划不同的装机方式. 首先要知道一些概念: 挂载:利用一个目录当成进入点,将磁盘分区的数据放置在该目录下. 磁盘第一个扇区记录的信息 ...

  6. 【转】PowerShell入门(十):使用配置文件

    转至:http://www.cnblogs.com/ceachy/archive/2013/03/01/PowerShell_Profile.html 在命令行中定义别名.变量和函数,只是将它们添加在 ...

  7. DataGrid获取当前行某列值

    前言: 本文将给大家介绍一下, 在ASP.NET MVC环境下,如何利用Jquery MiniUI(一个专业WebUI控件库)来获取Datagrid中的值,官网没有涉及到的内容:如何获取当前行某一列的 ...

  8. PHP 将下划线命名 转换为 驼峰式命名

    function convertUnderline($str , $ucfirst = true) { $str = ucwords(str_replace('_', ' ', $str)); $st ...

  9. c++之变量的引用

    昨天耀哥在问引用的时候,当时有一点点懵.平时经常用到引用的时候就是函数的参数传递. 引用就是某一变量的一个别名,对引用的操作与对变量直接操作完全一样,但是要注意到的是引用并没有新开辟内存空间,因此并不 ...

  10. java中post时中文乱码

    http://blog.chinaunix.net/uid-12348673-id-3335300.html 设置流的编码,就避免了乱码 public static String post(Strin ...