横向轮播

 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 Thread wait, notify and notifyAll Example

    Java Thread wait, notify and notifyAll Example Java线程中的使用的wait,notify和nitifyAll方法示例. The Object clas ...

  2. 。。。欢乐捕鱼App WeX5 连接打包代理服务失败,请检查代理服务地址是否正确。。。

    今天学习了WeX5,第一次使用,使用它打包一个Web App 欢乐捕鱼的时候,在最终打包生成Native App的时候突然报错了,说:"连接打包代理服务失败,请检查代理服务地址是否正确&qu ...

  3. c#:如何处理对对象进行深度拷贝

    /// <summary> /// 对对象进行深度拷贝 /// </summary> /// <param name="obj"></pa ...

  4. Poj 1276 Cash Machine 多重背包

    Cash Machine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 26172   Accepted: 9238 Des ...

  5. MFC 修改各种控件的背景颜色、字颜色和字体

    今天主要总结一下有关MFC 中静态编辑框(StaticEdit).编辑框(Edit)和按钮(Button)的背景颜色.字颜色和字体. 我的程序运行结果如下: 由上图我们知道修改的地方有:1.把Stat ...

  6. Redmine性能测试

    Redmine部署使用有一个月了,反馈有时很慢. 1.查看log发现,事务更新后要发送Email,如果连接邮件服务器有问题,会等待超时,导致很慢. 2.解决发送邮件问题后,仍然有时慢,ActiveRe ...

  7. insmod过程详解【转】

    转自:http://blog.csdn.net/chrovery/article/details/51088425 转自 http://blog.chinaunix.net/xmlrpc.php?r= ...

  8. [转]Linux进程间通信——使用消息队列

    点击此处阅读原文 另收藏作者ljianhui的专栏初学Linux 下面来说说如何使用消息队列来进行进程间的通信,消息队列与命名管道有很多相似之处.有关命名管道的更多内容可以参阅我的另一篇文章:Linu ...

  9. ftp相关资料

    一.ftp状态码 110  重新启动标记应答.在这种情况下文本是确定的,它必须是:MARK   yyyy=mmmm,其中yyyy是用户进程数据流标记,mmmm是服务器标记.      120     ...

  10. java开发中中文乱码总结

    1.jsp页面内容显示乱码 这种乱码原因很简单,一般的工具或解码程序对中文字符解析时采用默认的解码方式: <%@ page contentType="text/html; charse ...