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五屏轮播手风琴切换代码 在线演示本地下载
随机推荐
- svn检出两种方式的区别
第一种是“做为新项目检出,并使用新建项目向导进行配置(仅当资源库中不存在.project工程文件时才可用,意思是如果代码库中有了这个工程文件,那么它就认为这是一个信息完整的工程,在导入的过程中就不需要 ...
- nginx的addition模块在响应的前后报文添加内容与变量的运行原理
nginx默认未编译此模块:让nginx编译启用此模块 ./configure --prefix=/data/web --sbin-path=/usr/bin --user=nginx --group ...
- 从零构建以太坊（Ethereum）智能合约到项目实战——第21章 搭建联盟链
P78 .1-内容介绍 什么情况下建立自己测试用的PoA chain? 公司内网或无对外网络,无法同步区块 降低测试时等待区块的时间 不想碰到testrpc各种雷 PoA chain特点有 有别于Po ...
- C++ 知识零碎搭建
全局变量 局部变量 函数不能嵌套定义 C/C++ 变量在将要被使用时定义即可, 不必一开始就声明所有变量 函数的定义与声明的区别 C++常规类型自动类型转换规则 C语言中十六进制和八进制的格式: 二进 ...
- 记录下 k8s （1.14.2）使用kubeadm方式搭建和rancher搭建需要的镜像清单
kubeadm方式 之前一直用的1.12.2版本的,最近想试一下新的版本1.14.2 当然相应的组件镜像版本也需要更新了.镜像版本如下(网络插件使用flannel) k8s.gcr.io/kube-p ...
- SpringMvc 初步配置
spring-aop.jarspring-bean.jarspring-context.jarspring-core.jarspring-web.jarspring-webmvc.jarcommons ...
- 【PAT甲级】1028 List Sorting (25 分)
题意: 输入一个正整数N(<=100000)和C(C属于{1,2,3}),接下来输入N行,每行包括学生的六位学号(习惯用string输入,因为可能有前导零),名字和成绩(正整数).输出排序后的信 ...
- JSONObject遍历并替换部分json值
今天做接口对接,在更新价格时,最开始传的值为整数,发现报错,询问对方后得知需要统一保留两位小数,没有则为.00,于是对原有JSONObject进行改造,遍历并替换其中的值.下面贴出代码: JSONOb ...
- Linux CentOS7 VMware 安装PHP5 、安装PHP7
一.安装PHP5 PHP官网www.php.net 当前主流版本为5.6/7.1 cd /usr/local/src/ wget http://cn2.php.net/distributions/ph ...
- Eth合约攻击
前言 Ethernaut是一个类似于CTF的智能合约平台,集成了不少的智能合约相关的安全问题,这对于安全审计人员来说是一个很不错的学习平台,本篇文章将通过该平台来学习智能合约相关的各种安全问题,由于关 ...