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五屏轮播手风琴切换代码 在线演示本地下载
随机推荐
- Fiddler过滤VsHub请求
Fiddler过滤掉VS2015 VsHub请求 打开VS2015, Tools --> Options --> Debugging --> General --> unche ...
- bootstrap标记说明
<span class="caret"> 这就是 一个倒三角
- paramiko linux pip18.1
Collecting paramiko Downloading https://files.pythonhosted.org/packages/cf/ae/94e70d49044ccc234bfdba ...
- Navicat Premium 12安装及激活
一.安装 百度云下载地址:https://pan.baidu.com/s/1T5BjpBqLtwCy26szcKSdKw 提取码:ujzx 二.激活步骤 ①将navicat-keygen-for-x6 ...
- [蓝桥杯2015初赛]生命之树（树状dp）
在X森林里,上帝创建了生命之树.他给每棵树的每个节点(叶子也称为一个节点)上,都标了一个整数,代表这个点的和谐值.上帝要在这棵树内选出一个非空节点集S,使得对于S中的任意两个点a,b,都存在一个点列 ...
- springboot 跨域
参考: https://blog.csdn.net/qq779446849/article/details/53102925 https://blog.csdn.net/wo541075754/art ...
- 实用类-<装箱与拆箱>
装箱:把基本数据类型装换为对应的对象类 作用:1.在需要使用对象类型的时候,装换成对应的对象类型(集合里面) 2.转换完成以后,拥有相应的属性和方法,方便咱们的数据操作 拆箱 Integer intO ...
- Go语言中的数组与数组切片
Go中的数组与C的数组一样,只是定义方法不同 c: int a[10][10] Go [10][10]int 定义并初始化 array1 := [5]int{1,2,3,4,5} 变量名 := [in ...
- 「CH6101」最优贸易
「CH6101」最优贸易 传送门 考虑一种贪心的思想:我们要尽量买价格小的货物,并尽量高价转卖. 我们记 : \(mn[i]\) 为从点 \(1\) 走到点 \(i\) 经过的价格最小的货物的价格. ...
- 深度解析Java可变参数类型以及与数组的区别
注意:可变参数类型是在jdk1.5版本的新特性,数组类型是jdk1.0就有了. 这篇文章主要介绍了Java方法的可变参数类型,通过实例对Java中的可变参数类型进行了较为深入的分析,需要的朋友可以参考 ...