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)两 ...
随机推荐
- CentOS 7 Apache 多端口部署 Web Apps 指南
转载自简书,原作者xuyan0,链接https://www.jianshu.com/p/b34c78bf9bf0,如有侵权,请联系删除 导语 Apache web 服务器运行着互联网上超过半数的活跃的 ...
- 【分享】BS大神的C++ 11 keynotes
看到infoQ上面有BS大神的keynotes讲C++ 11的,有点长,但是值得一看. http://www.infoq.com/presentations/Cplusplus-11-Bjarne ...
- RHEL生命周期管理 -- Should I stay, or should I go?
1. RHEL的支持策略是怎么样的? 标准支持(一般7年)+ 延长支持(3年) 2. 升级RHEL的好处有哪些? More advantageous to upgrade completely to ...
- 从golang-gin-realworld-example-app项目学写httpapi (四)
https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/routers.go 路由定义 pa ...
- leetcode Ch7-Graph Search
1. Clone Graph BFS: class Solution { public: typedef UndirectedGraphNode UGNode; UndirectedGraphNode ...
- phpmyadmin文件上传限制
修改php.ini文件中的四个属性upload_max_filesize,post_max_size,max_execution_time,memory_limit,如图所示: 保存重启系统;打开ph ...
- php中的static
静态成员是一种类变量,可以把它看成时属于整个类而不是属于类的某个实例.与一般的实例变量不同的是,静态成员只保留一个变量值,而这个变量值对所有的实例都是有效的,也就是说,所有的实例共享这个成员. $th ...
- [EffectiveC++]item04:Make sure the objects are initialized before they're used
28 页 C++规定,对象的成员变量的初始化动作发生在进入构造函数本体之前. 构造函数的一个较佳的写法是,使用所谓的member initialization list替换赋值动作. 29页 但请立下 ...
- [T-ARA][Sugar Free]
歌词来源:http://music.163.com/#/song?id=29343991 作曲 : 新沙洞老虎/범이낭이 [作曲 : 新沙洞老虎/버미낭이] [作曲 : 新沙洞老虎/p/beo-mi- ...
- 021.8 properties(开发使用频率高)
内容:Properties基本存取.存储到持久化设备.从持久化设备读取.简单模拟收费软件试用结束##Properties——有配置文件的功能. 特点: 1.Hash table的子类,ma ...