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五屏轮播手风琴切换代码 在线演示本地下载
随机推荐
- 缓存ViewState减少网络传输
在维护 asp.net webform系统时,某些系统将控件及页面数据都存储在viewstate中,导致在频宽不够时,影响页面加载速度,此时可将viewstate 存储在服务端,减少网络传输. 重写 ...
- Java入门笔记 03-面向对象（上）
介绍:Java是面向对象的程序设计语言,类是面向对象的重要内容,可以把类当成是一种自定义类型,可以使用类来定义变量,这种类型的变量统称为引用变量.也就是说,所有类都是引用类型.Java也支持面向对象的 ...
- Swift3.0-基础知识
本文对Swift做一个从OC的角度的基础知识简单概要. Swift OC 说明 let.var const 在OC中不用const声明的常量,都认为是变量 Float.Double CGFloat ...
- js学习：基本数据类型
数据类型在 js 里面分为两个大类: 基本数据类型 引用数据类型 基本数据类型: 数值 number 各种意义上的数字:整数.小数.浮点数等 正数:100 负数:-100 浮点数,小数:1.234 进 ...
- selenium webdriver 截屏
/**截图 * @param driver * @param name */ public static void takeScreenShot(WebDriver driver,String nam ...
- PAT T1009 Triple Inversions
树状数组判断三元逆序对~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; ]; long long l[maxn], ...
- PTA的Python练习题（六）
从 第3章-8 字符串逆序 开始 1. n = str(input()) n1=n[::-1] print(n1) 2. 不是很好做这道题,自己还是C语言的思维,网上几乎也找不到什么答案 s = in ...
- VM安装linux操作系统详细教程
1.首先我们新建一个虚拟机,先不安装操作系统,稍后再对其安装Linux系统. 新建虚拟机步骤如下: 打开VMware软件,菜单栏点击“文件(F)”–>选择“新建虚拟机(N)”,如下图1,(或者直 ...
- 穿越雷区--蓝桥杯--DFS/BFS
题目描述 X星的坦克战车很奇怪,它必须交替地穿越正能量辐射区和负能量辐射区才能保持正常运转,否则将报废. 某坦克需要从A区到B区去(A,B区本身是安全区,没有正能量或负能量特征),怎样走才能路径最短? ...
- Flex 学习笔记
Flex布局是什么 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 .box{ displ ...