html 轮播 平移,jqeury之平移轮播

$(function () {

var timer; //定时器

var curno = 1;

var length = $(".lunbo ul li").length; //有几张图片

$(".lunbo ul").css("width", length * 137 + "px");

$(".topimg").hover(function () {

//鼠标移上去执行的内容

clearInterval(timer);

}, function () {

//鼠标移走时执行的内容

timer = setInterval(scroll, 3000);

}).trigger("mouseover"); //trigger("mouseover")窗体加载的时候就触发一次mouseover事件

$(".lunbo").hover(function () {

//鼠标移上去执行的内容

clearInterval(timer);

}, function () {

//鼠标移走时执行的内容

timer = setInterval(scroll, 3000);

})

$(".lunbo .bl").click(function () {

if (curno == 0) {

}

else {

curno--;

}

$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

$(".topimg img").attr("src", src); //上面图片显示

if (curno == 0) {

$('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

}

else if (curno > 2 && curno + 2 < length) {

$(".lunbo ul").css("margin-left", 0);

var nowLeft = -(curno - 2) * "137" + "px";

$('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

}

})

$(".lunbo .br").click(function () {

if (curno == 0) {

}

else {

curno++;

}

$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

$(".topimg img").attr("src", src); //上面图片显示

if (curno == 0) {

$('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

}

else if (curno > 2 && curno + 2 < length) {

$(".lunbo ul").css("margin-left", 0);

var nowLeft = -(curno - 2) * "137" + "px";

$('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

}

})

function scroll() {

//轮播图高亮显示

$(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

$(".topimg img").attr("src", src); //上面图片显示

if (curno == 0) {

$('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

}

else if (curno > 2 && curno + 2 < length) {

$(".lunbo ul").css("margin-left", 0);

var nowLeft = -(curno - 2) * "137" + "px";

$('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

}

curno++;

if (curno == length) {

curno = 0;

}

}

})

js各种特效轮播图，选项卡，放大镜，窗口拖拽，楼层跳转

// 透明度轮播图 // img:轮播图片 // dot:轮播点 // lbtn:左箭头 // rbtn:右箭头 // banner:轮播盒子 // active:轮播点选中效果类名 // time: ...

用JQ去实现一个轮播效果

前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了:

CSS动画之旋转魔方轮播

很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

踩石行动：ViewPager无限轮播的坑

2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

原生js&plus;css3实现图片自动切换，图片轮播

运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

纯javaScript、jQuery实现个性化图片轮播

纯javaScript实现个性化图片轮播 轮播原理说明: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

jQuery个性化图片轮播效果

jQuery个性化图片轮播效果 购物产品展示:图片轮播器 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

js 基础篇(点击事件轮播图的实现)

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

随机推荐

eclipse下的webservice开发

关于eclipse下的webservice开发,有非常多的教程,这里只记下学习过程中的弯路: 1.无论是CXF模式还是AXIS模式,在出现start server之后,点击next报错:"s ...

Linq学习之操作符

一.环境搭建 下面将逐步搭建我们学习的环境,这个环境不仅仅是这次需要使用,以后的教程一样需要使用这个环境.所以请大家务必按照 搭建这里的环境否则会影响你后面的学习. 我们用到的几张表 通知消息表: 用 ...

深入理解JavaScript系列&lpar;转自汤姆大叔&rpar;

深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript ...

国外android开源站点

http://android-arsenal.com/

【MongoDb基础】插入数据

以mydb为事例数据库. 切换到mydb数据库. use mydb 1. insert函数. db.users.insert({name:"Derek",age:18}) 该函数会 ...

django 路由分发

对于一个大的工程,可能会有很多应用,比如cmbd,moniter,openstack等等,我们就要用到路由分发 1,首先在跟工程同名的文件夹下的urls中写分发表: from django.conf. ...

Luogu P3959 宝藏

这道题正解是状压DP,不过我不会所以写一下随机化算法来骗骗分. 听说当时考场上就有很多写prim然后挂掉的神仙,其实这道题是可以prim过的 prim是一种基于贪心的算法,在本题中由于盲目的选择当前最 ...

shell基础：1&period;1脚本执行方式

echo 后边跟的东西有空格,那么需要加上单引号或双引号.!是有特殊含义的,用单引号原意. 尽管linux不区分文件的后缀,但还是要写上以便于区分. #!Bash    这行不是注释,也不能省略,他的 ...

linux suse 同步时间

ntpdate 210.72.145.44 ip为中国(国家授时中心)

Android将日志信息自动发送到指定的邮箱中 邮件的内容以附件形式发送

今日整合了网上一些大神的例子(具体看了那些大神的?这个真不好意思我忘记了.下次再整合一定给大家补上,这次也只有默默的给那几个大神说声抱歉了.)做了一个“记录android项目中的日志信息,并将日志信息 ...