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代 ...
随机推荐
- WEB启动时就加载servlet的dopost方法
web启动的时候可以加载servlet的init方法,无法加载dopost方法,如果你需要什么内容在启动的时候执行,可以将内容放到init方法里面,dopost方法,是在客户端使用post请求的时候才 ...
- Samba文件服务器详细配置步骤
准备安装 环境:CentOS 6.3_x64bit 安装:Minimal(最小) 1.配置IP地址 2.挂载:[root@localhost ~]# mount -t iso9660 /dev/cdr ...
- 夺命雷公狗-----React---16--事件操作事件
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
- JS中的prototype
JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
- Linux主机规划
当你想装linux操作系统的时候,一定要知道你的用途,不同的用途就要规划不同的装机方式. 首先要知道一些概念: 挂载:利用一个目录当成进入点,将磁盘分区的数据放置在该目录下. 磁盘第一个扇区记录的信息 ...
- 【转】PowerShell入门(十):使用配置文件
转至:http://www.cnblogs.com/ceachy/archive/2013/03/01/PowerShell_Profile.html 在命令行中定义别名.变量和函数,只是将它们添加在 ...
- DataGrid获取当前行某列值
前言: 本文将给大家介绍一下, 在ASP.NET MVC环境下,如何利用Jquery MiniUI(一个专业WebUI控件库)来获取Datagrid中的值,官网没有涉及到的内容:如何获取当前行某一列的 ...
- PHP 将下划线命名 转换为 驼峰式命名
function convertUnderline($str , $ucfirst = true) { $str = ucwords(str_replace('_', ' ', $str)); $st ...
- c++之变量的引用
昨天耀哥在问引用的时候,当时有一点点懵.平时经常用到引用的时候就是函数的参数传递. 引用就是某一变量的一个别名,对引用的操作与对变量直接操作完全一样,但是要注意到的是引用并没有新开辟内存空间,因此并不 ...
- java中post时中文乱码
http://blog.chinaunix.net/uid-12348673-id-3335300.html 设置流的编码,就避免了乱码 public static String post(Strin ...