jquery实现漂亮的轮播图
今天工作中要用到一个轮播功能，在网上找了一些，觉得有些过于繁琐，于是自己动手写了一个，效果如图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style>
.oop_inner{
margin:0 auto;
position:relative;
top:10px;
width:640px;
height:424px;
box-shadow:1px 2px 3px #666;
overflow:hidden;
}
.oop_banner{
position:absolute;
width:2600px;
/* left:-640px; */
}
.oop_banner img{
float:left;
width:640px;
}
.oop_li{
position:absolute;
left:45%;
bottom:20px;
}
.oop_li span{
display:block;
float:left;
margin-right: 10px;
width:15px;
height:7px;
background:#fff;
box-shadow: 1px 1px;
cursor:pointer;
}
.oop_li span:hover{
background:#000;
}
.oop_li .on{
background:#000;
}
.oop_inner a{
position:absolute;
display: block;
width:40px;
height:40px;
line-height:36px;
box-shadow: 0px 0px 3px 2px;
color:#fff;
top:45%;
text-align:center;
font-size:40px;
text-decoration:none;
}
.oop_inner a:hover{
box-shadow: 0px 0px 3px 2px #000;
}
.oop_inner .last{
left:15px;
}
.oop_inner .next{
right:15px;
}
</style>
<body>
<div class="oop_inner">
<div class="oop_banner">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
</div>
<div class="oop_li">
<span index="0" class="on"></span>
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="javascript:void(0);" class="last"><</a>
<a href="javascript:void(0);" class="next">></a>
</div>
</body>
<script src="../jquery-1.7.2.min.js"></script>
</html>
<script>
$(function(){
start();
//定时开始
var i = 0;
function start(){
banner = setInterval(function(){
i+=1;
if(i == 4){
i =0;
}
onclass();
var le = i* -640;
$('.oop_banner').animate({left:le});
},2000);
}
//定时停止
function stop(){
clearInterval(banner);
}
//选中样式
function onclass(){
$('.oop_li>span').each(function(e){
if(e == i){
$(this).addClass('on');
}else{
$(this).removeClass('on');
}
})
}
//点击按钮
$('.oop_li>span').click(function(){
$('.oop_li>span').removeClass('on');
$(this).addClass('on');
var le = $(this).attr('index') * -640;
$('.oop_banner').animate({left:le});
i = parseInt($(this).attr('index'));
})
//鼠标滑入
$('.oop_inner').mouseenter(function(){
stop();
})
//鼠标滑出
$('.oop_inner').mouseleave(function(){
start();
})
//下一个
$('.next').click(function(){
i+=1;
if(i == 4){
i = 0;
}
onclass();
var le = i* -640;
$('.oop_banner').animate({left:le});
})
//上一个
$('.last').click(function(){
i-=1;
if(i == -1){
i = 3;
}
onclass();
var le = i* -640;
$('.oop_banner').animate({left:le});
})
})
</script>
jquery实现漂亮的轮播图的更多相关文章
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- 前端框架之jQuery（二）----轮播图,放大镜
事件 页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> ...
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
- 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）
轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...
- jQuery实际案例②——三层轮播图
1.如图,这种轮播图需要实现的是,当鼠标移到2上时,第二张图片从右侧过来 2.需要注意的:①很明显这是通过改变z-index与left值来实现的: ②整体布局需注意,图与数值(1,2,3,4,5)两 ...
随机推荐
- WCF--找不到具有绑定 BasicHttpBinding 的终结点的与方案 https 匹配的基址。注册的基址方案是 [http]。
<system.serviceModel> <services> <service name="xxxxx.xxxxxx"> <endpo ...
- BufferedInputStream使用详解
下面的例子演示如何使用BufferedInputStream类读取文本文件内容. 首先需要声明一个byte数组作为buffer,然后循环将文本内容循环读入到buffer中,并将buffer转换为字符串 ...
- 《深入理解mybatis原理》 Mybatis数据源与连接池
对于ORM框架而言,数据源的组织是一个非常重要的一部分,这直接影响到框架的性能问题.本文将通过对MyBatis框架的数据源结构进行详尽的分析,并且深入解析MyBatis的连接池. 本文首先会讲述MyB ...
- oracle 帐号scott被锁定 如何解锁
由于多次输入:账号 密码不对 oracle 帐号scott被锁定 如何解锁: 具体操作步骤如下:C:> sqlplus请输入用户名:sys输入口令:sys as sysdba //注意:在口令这 ...
- APP中的 H5和原生页面如何分辨？
一.APP内嵌H5和原生的区别 1.原生的页面运行速度快,比较流畅.H5页面相对原生的运行性能低,特别是一些动画效果有明显卡顿. 2.H5页面的很多交互都没有原生的好,比如弹层.输入时候的页面滑动 等 ...
- Java获取中文拼音、中文首字母缩写和中文首字母
获取中文拼音(如:广东省 -->guangdongsheng) /** * 得到中文全拼 * @param src 需要转化的中文字符串 * @return */ public static S ...
- iOS亮屏解锁命令【iOS自动化测试】--使用ssh
前提:iOS越狱手机一个 越狱方法:使用pp助手, 爱思助手等 1.从Cydia安装以下软件: AppSync for iOSx(可安装破解软件).afc2add补丁(可访问整个iOS设备的系统文件) ...
- Wannafly挑战赛18 E 极差（线段树、单调栈）
Wannafly挑战赛18 E 极差 题意 给出三个长度为n的正整数序列,一个区间[L,R]的价值定义为:三个序列中,这个区间的极差(最大值与最小值之差)的乘积. 求所有区间的价值之和.答案对\(2^ ...
- [T-ARA][TIAMO]
歌词来源:http://music.163.com/#/song?id=439915067 改了一版格式,先尝试一下,考虑到总不能永远只看着拼音读,所以想把发音按照韩文字来写,以后争取看着韩文字唱. ...
- Shell的egrep、grep、fgrep命令的使用
Linux egrep 命令用于在文件内查找指定的字符串.与grep-E使用语法及参数相似,不同点在于解读字符串的方法. 语法: egrep [范本模式] [文件或目录] 参数说明: [范本模式]:查 ...