Jquery插件---渐隐轮播
//需求:打开网页时，每秒钟自动切换下一张图片内容。也可以用鼠标点导航按钮进行图片切换
//代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.container{
width: 1000px;
height: 400px;
position: relative;
}
.wrapper{
height: 400px;
position: relative;
}
.wrapper li{
position: absolute;
width: 100%;
height: 100%;
display: none;
}
.wrapper .cur{
display: block;
}
.wrapper a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
img{
width: 100%;
height: 100%;
display: block;
}
.pagination{
position: absolute;
width: 200px;
height: 20px;
right: 100px;
bottom: 30px;
}
.pagination li{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin:0 5px;
background-color: #000;
border:2px solid #777;
}
.pagination .act{
background-color: #fff;
}
.prev,.next{
position: absolute;
width: 41px;
height: 67px;
background-image: url(img/icon-slides.png);
background-repeat: no-repeat;
top: 166px;
}
.prev{
background-position: -83px 0;
left: 0;
}
.prev:hover{
background-position: 0 0;
}
.next{
right: 0;
background-position: -124px 0;
}
.next:hover{
background-position: -42px 0;
}
</style>
</head>
<body>
<div class="container">
<ul class="wrapper">
<li class="cur"><a href="#"><img src="img/ban01.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ban02.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ban03.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ban04.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ban05.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ban06.jpg" alt=""></a></li>
<li><a href="#"><img src="img/ban07.jpg" alt=""></a></li>
</ul>
<ul class="pagination">
<li class="act"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
<div style="margin-left: 30%;">网页轮播图效果1111111</div>
<script type="text/javascript">
// $(".wrapper li").eq(1).fadeIn(2000).siblings().fadeOut(2000);
// 当前li的索引
var index = 0;
function changeImg(num){
$(".wrapper li").eq(num).fadeIn().siblings().fadeOut();
$(".pagination li").eq(num).addClass("act").siblings().removeClass("act");
}
// changeImg(3);
function autoPlay(){
if (index==6) {
index=-1;
}
index++;
changeImg(index);
}
var timer = setInterval(autoPlay,2000);
$(".container").mouseover(function(){
clearInterval(timer);
}).mouseout(function(){
timer = setInterval(autoPlay,2000);
});
$(".prev").click(function(){
if (index==0) {
index=7;
}
index--;
changeImg(index);
});
$(".next").click(function(){
autoPlay();
});
$(".pagination li").click(function(){
var i = $(this).index();
index = i;
changeImg(index);
});
</script>
</body>
</html>
Jquery插件---渐隐轮播的更多相关文章
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- jQuery补充，基于jQuery的bxslider轮播器插件
基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jquery实现导航图轮播
版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...
- 自适应图片宽度的jQuery焦点幻灯轮播代码
自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示 XML/HTML Code <div id="sli ...
- （转）jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Bootstrap的js插件之轮播(carousel)
轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...
- jQuery五屏轮播手风琴切换代码
jQuery五屏轮播手风琴切换代码 在线演示本地下载
随机推荐
- mybatis源码探索笔记-1(构建SqlSessionFactory)
前言 mybatis是目前进行java开发 dao层较为流行的框架,其较为轻量级的特性,避免了类似hibernate的重量级封装.同时将sql的查询与与实现分离,实现了sql的解耦.学习成本较hibe ...
- #P1909 买铅笔 的题解
题目描述 P老师需要去商店买n支铅笔作为小朋友们参加NOIP的礼物.她发现商店一共有 33种包装的铅笔,不同包装内的铅笔数量有可能不同,价格也有可能不同.为了公平起 见,P老师决定只买同一种包装的铅笔 ...
- python字典操作方法详解
前言 字典是一种通过名字或者关键字引用的得数据结构,key 类型需要时被哈希,其键可以是数字.字符串.元组,这种结构类型也称之为映射.字典类型是Python中唯一內建的映射类型. 注意,浮点数比较很不 ...
- PHP的isset()、is_null、empty()使用总结
这几个变量判断函数在PHP开发中用的其实挺多的,而且粗看上去都差不多,但其实还是有不少的区别的,如果搞不清楚,也许就会遗留一些潜在的bug, 包括我自已也遇到过这样的坑,比如有一次我就遇到过用empt ...
- golang数据库操作初体验
在golang中,提供了标准的数据库接口database/sql包,做过数据库开发的应该知道,不同的数据库有不同的数据库驱动.比如mysql等,我们可以去找 https://golang.org/s/ ...
- selenium+chrome options
selenium+chrome options 环境:selenium chrome 1. selenium + chrome参数配置 1.1. 启动 from selenium im ...
- 1004 Counting Leaves (30分) DFS
1004 Counting Leaves (30分) A family hierarchy is usually presented by a pedigree tree. Your job is ...
- Pytorch本人疑问(1) torch.nn和torch.nn.functional之间的区别
在写代码时发现我们在定义Model时,有两种定义方法: torch.nn.Conv2d()和torch.nn.functional.conv2d() 那么这两种方法到底有什么区别呢,我们通过下述代码看 ...
- 异常 日志-<多重catch语句>
try{ }catch(){ }catch(){ }
- iOS学习7：iOS沙盒(sandBox)机制（一）之获取沙盒路径及目录说明（转）
转:http://my.oschina.net/joanfen/blog/151145 一.iOS沙盒机制 iOS的应用只能访问为该应用创建的区域,不可访问其他区域,应用的其他非代码文件都存在此目录下 ...