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)两 ...
随机推荐
- vue2.0中的计算属性
计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中 ...
- android 实现微信分享多张图片的功能
昨天公司老大通知客户改需求了,原来的微信分享改成分享多张图片,然后屁颠屁颠跑到微信平台看了以后 心里千万只草泥马狂奔而过,微信平台没有提供分享多张的SDK有木有啊,我们只能自己调用系统自带的分享功能实 ...
- linux fack 文件系统修复命令
[简介] fsck命令被用于检查并且试图修复文件系统中的错误.当文件系统发生错误四化,可用fsck指令尝试加以修复. [选项]必要参数 -a 非互交模式,自动修复 -c 检查是否存在有损坏的区块. - ...
- Python 生成器总结
生成器的概念: 生成器不会把结果保存在一个系列中,而是保存在生成器的状态,在每次进行迭代时返回一个值,直到遇到StopIteration异常结束 生成器是这样一个函数,它记住上一次返回时在函数体中的位 ...
- 使用iCarousel的旋转木马效果请求图片
使用iCarousel的旋转木马效果请求图片 https://github.com/nicklockwood/iCarousel 先看看效果: 源码如下: // // RootViewControll ...
- 沉淀再出发:java中的equals()辨析
沉淀再出发:java中的equals()辨析 一.前言 关于java中的equals,我们可能非常奇怪,在Object中定义了这个函数,其他的很多类中都重载了它,导致了我们对于辨析其中的内涵有了混淆, ...
- Android 手机 黑域
黒域地址下载: http://pan.baidu.com/s/1bDYerc 连接手机,选择USB使用方式为“用作MIDI设备“ 0. (手机) 打开黑域,阅读向导1. (手机) 打开黑域,按屏幕提示 ...
- opencv python3.６安装和测试
安装: 命令行 pip install D:\python3.6.1\Scriptsopencv_python-3.2.0-cp36-cp36m-win_amd64.whl 测试代码: import ...
- Maven 阿里源
由于一些不可抗拒因素,在使用 maven 的时候我们不得不需要改变一些设置,以加快我们的下载速度. 仓库配置 在maven的settings.xml文件里的mirrors节点,添加如下子节点: ...
- PetaPoco轻量级ORM框架 - 入门安装
PetaPoco 是一个开源轻量级ORM,够小,够快,单文件 在GitHub上有很高的人气 1377星,几年来作者一直在更新 当前版本6.0.317 - Netstandard 2.0(同时支持.ne ...