横向轮播

 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. HDU-1274 展开字符串

    Problem Description 在纺织CAD系统开发过程中,经常会遇到纱线排列的问题.该问题的描述是这样的:常用纱线的品种一般不会超过25种,所以分别可以用小写字母表示不同的纱线,例如:abc ...

  2. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  3. MXNet学习~试用卷积~跑CIFAR-10

    第一次用卷积,看的别人的模型跑的CIFAR-10,不过吐槽一下...我觉着我的965m加速之后比我的cpu算起来没快多少..正确率64%的样子,没达到模型里说的75%,不知道问题出在哪里 import ...

  4. DLL注入

    最近的项目涉及了软件破解方面的知识,记录一下. 将dll注入另一个进程. // Inject.cpp : Defines the exported functions for the DLL appl ...

  5. NIO 之 缓冲区(Buffer)

    缓存区是java nio的核心部分,所以必须熟悉它的一些操作. 实现类型: nio中实现了除布尔型(boolean)外的其他7种基本数据类型的buffer(ByteBuffer,CharBuffer, ...

  6. hsql数据库使用详解(入门)及快速使用

    一.简介: hsql数据库是一款纯Java编写的免费数据库,许可是BSD-style的协议,如果你是使用Java编程的话,不凡考虑一下使用它,相对其 他数据库来说,其体积小,才563kb.仅一个hsq ...

  7. 一个java的Profile工具

    场景:我们在系统运行中,需要监控某个代码段的运行时间,我们完全可以使用currentTimeMillis来做,但是做起来比较麻烦,尤其是需要阶段监控的时候,那么这个工具就出现啦~~~ 先说下想要实现的 ...

  8. CentOS 6.5、6.7 设置静态 ip 教程

    CentOS 6.5.6.7 设置静态 ip 教程,可以ping通外网:www.baidu.com ①. 网络适配器(VMware Network Adapter) 选择NAT模式 ②. 设置静态 i ...

  9. 阻止iOS中页面弹性回滚,只允许div.phone_body的区块有弹性

    使用说明:只要替换选择器:var selector = '.phone_body'; /** * 阻止iOS中页面弹性回滚,只允许div.scroller的区块有弹性 */ (function () ...

  10. HTML 链接 - href

    链接 在HTML的学习中,链接的标签发挥着很大的作用,HTML 使用超级链接与网络上的另一个文档相连.几乎可以在所有的网页中找到链接.点击链接可以从一张页面跳转到另一张页面. 比如说:实例 创建超级链 ...