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对象.请 ...