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代 ...
随机推荐
- Java Thread wait, notify and notifyAll Example
Java Thread wait, notify and notifyAll Example Java线程中的使用的wait,notify和nitifyAll方法示例. The Object clas ...
- 。。。欢乐捕鱼App WeX5 连接打包代理服务失败,请检查代理服务地址是否正确。。。
今天学习了WeX5,第一次使用,使用它打包一个Web App 欢乐捕鱼的时候,在最终打包生成Native App的时候突然报错了,说:"连接打包代理服务失败,请检查代理服务地址是否正确&qu ...
- c#:如何处理对对象进行深度拷贝
/// <summary> /// 对对象进行深度拷贝 /// </summary> /// <param name="obj"></pa ...
- Poj 1276 Cash Machine 多重背包
Cash Machine Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 26172 Accepted: 9238 Des ...
- MFC 修改各种控件的背景颜色、字颜色和字体
今天主要总结一下有关MFC 中静态编辑框(StaticEdit).编辑框(Edit)和按钮(Button)的背景颜色.字颜色和字体. 我的程序运行结果如下: 由上图我们知道修改的地方有:1.把Stat ...
- Redmine性能测试
Redmine部署使用有一个月了,反馈有时很慢. 1.查看log发现,事务更新后要发送Email,如果连接邮件服务器有问题,会等待超时,导致很慢. 2.解决发送邮件问题后,仍然有时慢,ActiveRe ...
- insmod过程详解【转】
转自:http://blog.csdn.net/chrovery/article/details/51088425 转自 http://blog.chinaunix.net/xmlrpc.php?r= ...
- [转]Linux进程间通信——使用消息队列
点击此处阅读原文 另收藏作者ljianhui的专栏初学Linux 下面来说说如何使用消息队列来进行进程间的通信,消息队列与命名管道有很多相似之处.有关命名管道的更多内容可以参阅我的另一篇文章:Linu ...
- ftp相关资料
一.ftp状态码 110 重新启动标记应答.在这种情况下文本是确定的,它必须是:MARK yyyy=mmmm,其中yyyy是用户进程数据流标记,mmmm是服务器标记. 120 ...
- java开发中中文乱码总结
1.jsp页面内容显示乱码 这种乱码原因很简单,一般的工具或解码程序对中文字符解析时采用默认的解码方式: <%@ page contentType="text/html; charse ...