jquery 幻灯片
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lin_jquery</title>
<style type="text/css">
.linContainer{margin:10px auto;width:790px;}
.linBox{width:790px;overflow:hidden;height:300px;position:relative;z-index:1;}
.linBoxImg{position:absolute;z-index:10;}
img{border:none;}
.linBoxImg img{float:left;}
.clearBoth{clear:both;}
.linNum{position:absolute; top:230px;right:40px;z-index:100;}
.linNum a{color:#000000;padding:5px;text-decoration:none;}
.linActive{font-weight:bold;}
.linNum a.linActive{color:#ffff00;text-decoration:underline;}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="linContainer">
<div class="linBox">
<div class="linBoxImg">
<a href="x"><img src="./images/reel_1.jpg" /></a>
<a href="2"><img src="./images/reel_2.jpg" /></a>
<a href="3"><img src="./images/reel_3.jpg" /></a>
<a href="4"><img src="./images/reel_4.jpg" /></a>
<br class="clearBoth" />
</div>
<div class="linNum">
<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var imgWidth = $(".linBox img").width();
var imgNum = $(".linBox img").size();
var imgTotal = imgWidth * imgNum;
var leftWidth = 0;
var nnn = 0;
var leftTotal = -imgWidth * (imgNum - 1);
$(".linNum a").eq(0).addClass("linActive");
$(".linBoxImg").css({"width": imgTotal});
play = function(){
ok = setInterval(function(){
$(".linBoxImg").animate({left:leftWidth});
leftWidth -= imgWidth;
$(".linNum a").removeClass("linActive");
$(".linNum a").eq(nnn).addClass("linActive");
nnn++;
if(leftWidth < leftTotal){
leftWidth = 0;
nnn = 0;
}
}, 2000);
};
play();
$(".linNum a").hover(function(){
$(".linNum a").removeClass("linActive");
$(this).addClass("linActive");
var nn = $(this).index();
leftWidth = -nn * imgWidth;
$(".linBoxImg").animate({left:leftWidth});
clearInterval(ok);
}, function(){
$(this).removeClass("linActive");
play();
});
$(".linNum a").click(function(){ // 清除点击
return false;
});
});
</script>
</body>
</html>
jquery 幻灯片的更多相关文章
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- 锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...
- 60款很酷的 jQuery 幻灯片演示和下载【转】
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...
- 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效
这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
- lightslider-支持移动触摸的轻量级jQuery幻灯片插件
插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...
随机推荐
- PHP向MySql中插入数据
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...
- linux下安装php的swoole扩展模块(安装后php加载不出来?)
应开发同事要求,需要安装php的扩展模块swoole.swoole是一种PHP高级Web开发框架,框架不是为了提升网站的性能,而是为了提升网站的开发效率,以最少的性能损耗,换取最大的开发效率. 假设服 ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- C++ 让控制台运行到最后按下回车键才结束的3种方法
初学C++,弄懂了3种在控制台最后需要按回车键才退出返回编辑框的方法 1.最简单的编译生成后,通过Ctrl+F5运行即可(推荐自己调试的时候用,因为程序在别人那里是一闪而过的) 2.先添加头文件“#i ...
- MongoDB 复制集 (三) 内部数据同步
一 数据同步 一个健康的secondary在运行时,会选择一个离自己最近的,数据比自己新的节点进行数据同步.选定节点后,它会从这个节点拉取oplog同步日志,具体流程是这样的: ...
- VM下的linux系统上不了网?? 使用putty远程登录不上linux的解决方法?
背景:昨晚想尝试一下用putty远程登录我的linux系统,悲剧的是,我竟然连接不上,显示 connection refused ,连接被拒绝.于是我就想看看能不能在linux下看看能不能访问百度 ...
- shell 获取当前ip
HOST_IP=$(hostname --all-ip-addresses | awk '{print $1}')
- mongodb 学习笔记 09 -- shard分片
概述 shard 分片 就是 把不同的数据分在不同的server 模型 当中: 用户对mongodb的操作都是向mongs请求的 configsvr 用于保存,某条数据保存在哪个sha ...
- Android BLE开发——Android手机与BLE终端通信初识
蓝牙BLE官方Demo下载地址: http://download.csdn.net/detail/lqw770737185/8116019参考博客地址: http://www.eoeandr ...
- 给自己取了个英文名-Jamy Cai,哈哈~~
给自己取了个英文名:Jamy Cai, 同时开始启用新邮箱:Jamycai@outlook.com ~~