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)两 ...
随机推荐
- Bootstrap 在线引用
Bootstrap 3.3.0 js 文件 <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.j ...
- 算法day01
- ajax实现跨域提交
因为现在一直用的mvc,所以就以mvc来说说ajax跨域提交. 首先说说跨域,简单说就是不同域名访问,比如在aaa.com访问bbb.com. 就拿招聘网站来说,分为两种用户,求职者和企业,求职者端是 ...
- 使用TFHpple解析html
使用TFHpple解析html https://github.com/topfunky/hpple 前期准备工作 引入静态库文件 添加库文件的 header search paths(注意,必须选中 ...
- 实现UIView的无限旋转动画（非CALayer动画）
实现UIView的无限旋转动画(非CALayer动画) 效果: 素材: 源码: // // ViewController.m // Animation // // Created by YouXian ...
- 使用 grep 的 -o 和 -E 选项进行正则的精确匹配
sed 命令可以很好的进行行匹配,但从某一行中精确匹配某些内容,则使用 grep 命令并辅以 -o 和 -E 选项可达到此目的.其中 -o 表示“only-matching”,即“仅匹配”之意.光用它 ...
- Effective C++(7) 为多态基类声明virtual析构函数 or Not
问题聚焦: 已经对一个对象执行了delete语句,还会发生内存泄漏吗? 先来看个demo: // 计时器类 class TimeKeeper { public: TimeKeeper(); ~Time ...
- codeforces 812E Sagheer and Apple Tree（思维、nim博弈）
codeforces 812E Sagheer and Apple Tree 题意 一棵带点权有根树,保证所有叶子节点到根的距离同奇偶. 每次可以选择一个点,把它的点权删除x,它的某个儿子的点权增加x ...
- 防止开放重定向，恶意篡改returnUrl
1.防止开放重定向: /// <summary> /// 防止开放重定向 /// </summary> /// <param name="url"&g ...
- BZOJ 3211 花神游历各国 线段树平方开根
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3211 题目大意: 思路: 由于数据范围只有1e9,一个数字x开根号次数超过logx之后 ...