JS巧计__轮播
横向轮播
 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巧计__轮播的更多相关文章
- 用jQuery基于原生js封装的轮播
		我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ... 
- jQuery与原生js实现banner轮播图
		jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ... 
- 原生JS实现简易轮播图
		原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ... 
- 原生js实现无缝轮播
		原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ... 
- 原生js实现图片轮播思路分析
		一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ... 
- Bootstrap的js插件之轮播(carousel)
		轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ... 
- JS+css3焦点轮播图PC端
		<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ... 
- js原生实现轮播图效果(面向对象编程)
		面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ... 
- JS学习笔记--轮播图效果
		希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ... 
随机推荐
- 在nginx日志的access log中记录post请求的参数值
			背景:有时程序偶出现参数少了或没有提交到下一个链接Url里后出现问题,如何查呢,最好的办法是在nginx上的加post参数,以定位到问题才有可能对某个UIR的代码出现的问题进行排查. og_forma ... 
- jQuery File Upload done函数没有返回
			最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ... 
- 找出数组中从未出现的最小正整数java实现
			/** * 找出未出现的最小正整数 * @param A * @param n * @date 2016-10-7 * @author shaobn */ public static int find ... 
- MyBatis学习教程
			http://www.yihaomen.com/article/java/302.htm http://www.yihaomen.com/article/java/303.htm http://www ... 
- 求android ble 解决方案!
			智能医疗的产品,求ble解决方案:整体结构如下: 名词定义: 盒子:基于android4.3或以上版本的硬件,需支持wifi.ble 手机:android/ios 手机,用户使用 服务器:云服务器,盒 ... 
- GIT版本库回滚【图文版】
			git 版本库回滚,在实际开发过程中总会遇得到 1. 先找出需要回滚的commitid git log -3 2. 重置本地版本库到指定commitid, 注意:本地改动将丢失 ... 
- npm 安装远程包(github的)
			npm install git+ssh://git@github.com:xxx/xxx.git#master --save-dev npm install git+ssh://git@github. ... 
- 从svn资源库目录checkout出maven项目方法
			从svn资源库目录checkout出maven项目方法,如下图所示: 
- 富文本编辑器TInyMCE,本地图片上传(Image Upload)
			TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ... 
- Dynamics AX 2012 R2 无法创建类"Excel.Application"的COM对象
			Reinhard在做一个Excel导入项目时,发现X++代码一旦执行到Excel组件部分,就会报如下错误: 无法创建类"Excel.Application"的COM对象.请 ... 
