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代 ...
随机推荐
- Eclipse版本android 65535解决方案(原理等同android studio现在的分包方式)
由于工作的需要看了下Eclipse下android65535的解决方案,查了好多文档,真心的发自内心的说一句请不要再拷贝别人的博客了,害人,真害人. 接下来我说下我的实现方式,首先说下65535的最可 ...
- web后端 文件上传
需要Commons-fileupload和commons-io两个jar包.可搜索apache commons下载 jar复制在项目下的web->WEB-INF->lib下 复制在a ...
- Android 回调接口是啥,回调机制详解(zhuan)
回调函数http://blog.csdn.net/a78270528/article/details/46918601 Android框架 android frame work: http://blo ...
- Centos vsftpd服务器搭建
Centos vsftpd服务器搭建 时间:2016-07-18 1.最为简单的vsftpd服务器搭建 1.安装vsftpd 1.yum 安装 yum install vsftpd 2.rpm文件安装 ...
- sqlserver 锁与阻塞
DDL/索引重建 会申请 Sch-M锁 with (nolock) 会申请 Sch-S锁 with (nolock)会阻塞 sch-M, 同样Sch-M也会 阻塞with (nolock) 索引重建2 ...
- SNMP
net-snmp 了解snmp程序最好的工具,snmpwalk和snmptable都是关键命令,举例: snmptable -v 2c -c public X.X.X.X ifTable 显示网络接口 ...
- jQuery获取隐藏文本域
[html] view plaincopyprint?//jquery获取隐藏域 <style type="text/css"> div{ width:1 ...
- 使用tmpfs作为缓存加速缓存的文件目录
使用tmpfs作为缓存加速缓存的文件目录 [root@web02 ~]# mount -t tmpfs tmpfs /dev/shm -o size=256m[root@web02 ~]# mount ...
- nginx+tomcat+二级域名静态文件分离支持mp4视频播放配置实例
nginx+tomcat+二级域名静态文件分离支持mp4视频播放配置实例 二级域名配置 在/etc/nginx/conf.d/目录下配置二级域名同名的conf文件,路径改成对应的即可 statics. ...
- [已解决] protobuf Missing input file
如果proto描述文件在当前目录,要以"./"开始 如: protoc ./test.proto --java_out=./ 文章来源:http://www.cnblogs.com ...