jqeury之平移轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="yangshi/css.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript">
$(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;
} }
})
</script>
</head>
<body>
<div class="topimg"><img src="data:image/1.jpg" /></div>
<div class="lunbo">
<div class="thumb">
<div class="b bl"></div>
<div class="li">
<ul>
<li><img src="data:image/1.jpg" /></li>
<li><img src="data:image/2.jpg" /></li>
<li><img src="data:image/3.jpg" /></li>
<li><img src="data:image/4.jpg" /></li>
<li><img src="data:image/5.jpg" /></li>
<li><img src="data:image/6.jpg" /></li>
<li><img src="data:image/7.jpg" /></li>
</ul>
</div>
<div class="b br"></div>
</div>
</div> </body>
</html>
jqeury之平移轮播的更多相关文章
- javascript写无缝平移的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js各种特效轮播图，选项卡，放大镜，窗口拖拽，楼层跳转
// 透明度轮播图 // img:轮播图片 // dot:轮播点 // lbtn:左箭头 // rbtn:右箭头 // banner:轮播盒子 // active:轮播点选中效果类名 // time: ...
- 用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...
- CSS动画之旋转魔方轮播
很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...
- 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- 踩石行动：ViewPager无限轮播的坑
2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
随机推荐
- ASP.NET在IE9,IE10,IE11中Form表单身份验证失效问题解决方法
已经研究出解决方案. IE9:在web.config中的forms中增加name=".xCookie"属性即可. IE10或IE11: 在web.config中的forms中增加c ...
- 删除NSMutableArray中的二维数组
// 删除模型数据 [self.mutableArr[indexPath.section] removeObjectAtIndex:indexPath.row]; //删除UI(刷新数据,UI) [s ...
- PostgreSQL Replication之第十三章 使用PL/Proxy扩展（2）
13.2 设置 PL/Proxy 简短的理论介绍之后,我们可以继续前进并运行一些简单的PL/Proxy设置.要做到这一点,我们只需安装PL/Proxy并看看这是如何被使用的. 安装PL/Proxy是一 ...
- 事件监听addEventListener()和removeEventListener() ---------1
一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...
- Lintcode: Recover Rotated Sorted Array
Given a rotated sorted array, recover it to sorted array in-place. Example [4, 5, 1, 2, 3] -> [1, ...
- DIY小能手｜别买电动滑板车了，咱做一台吧
!! http://www.shoudian.org/thread-316111-1-1.html http://www.jiequer.com/html/news/xinpin/2014/1218/ ...
- c++之路进阶——codevs2333（弹飞绵羊）
2333 弹飞绵羊 2010年省队选拔赛湖南 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description Lostmonk ...
- HashMap存储数据赋值javabean简单示例
package com.shb.web; import java.util.HashMap; import java.util.Iterator; import java.util.Map; /** ...
- paper 40 ：鲁棒性robust
最近只想安心.安静的科研,不想被任何人打扰,继续做自己,不忘初心,方得始终! 首先了解下鲁棒性这个词的定义.鲁棒性是指控制系统在一定(结构,大小)的参数摄动下,维持某些性能的特性.根据对性能的不同定义 ...
- 将EXCEL数据表导入到SQL中
工具/原料 SQL Server Management Studio 已建立SQL数据库 方法/步骤 打开SQL Server Management Studio,按图中的路径进入导入数据界面. ...