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代 ...
随机推荐
- Windows Phone 五、配置存储
基本存储形式 本地设置:ApplicationData.Current.LocalSettings 漫游设置:ApplicationData.Current.RoamingSettings 支持的数据 ...
- 9月10日,美团网2014校招研发笔试哈尔滨站 1、链表翻转。给出一个链表和一个数k,比如链表1→2→3→4→5→6,k=2,则翻转后2→1→4→3→6→5,若k=3,翻转后3→2→1→6→5→4,若k=4,翻转后4→3→2→1→5→6,用程序实现
// reverselink.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" struct Node{ int num; struct No ...
- centos查看实时网络带宽占用情况方法
Linux中查看网卡流量工具有iptraf.iftop以及nethogs等,iftop可以用来监控网卡的实时流量(可以指定网段).反向解析IP.显示端口信息等. centos安装iftop的命令如下: ...
- java三大框架
1定义 集成SSH框架的系统从职责上分为四层:表示层.业务逻辑层.数据持久层和域模块层,以帮助开发人员在短期内搭建结构清晰.可复用性好.维护方便的Web应用程序.其中使用Struts作为系统的整体基础 ...
- S3C2440上RTC时钟驱动开发实例讲解(转载)
嵌入式Linux之我行,主要讲述和总结了本人在学习嵌入式linux中的每个步骤.一为总结经验,二希望能给想入门嵌入式Linux的朋友提供方便.如有错误之处,谢请指正. 共享资源,欢迎转载:http:/ ...
- html5,格式的验证
<form action="" method="get"> <input type="text" name=&quo ...
- 关于UIView的显示问题
今天在倒腾PP助手SDK的接入,游戏框架使用的是cocos2d-x,因为不熟悉iOS的UIKit,所以费了点功夫终于让SDK的登录页面显示出来了,问题来了,在iOS设备landscape显示模式UI显 ...
- [译]Dynamics AX 2012 R2 BI系列-规划分析的注意事项
https://msdn.microsoft.com/en-us/library/gg731898.aspx 在开始实施AX的分析特性前,有很多事情要考虑.本文描述了你必须考虑的事情,和在 ...
- Dedecms 图片加上Alt或Title等属性写法
代码如下:$this->Fields['typename'] = $this->TypeLink->TypeInfos['typename']; SetSysEnv($this-&g ...
- crm软件如何实现企业智能化管理?
互联网技术的发展,让企业越来越重视客户的感知体验,企业只有适应并接受再逐步转向智能化发展模式,才能在市场竞争中取胜不被淘汰.选择一款适宜企业自身发展的CRM系统,根据自身的具体情况随需而定,企业才能更 ...