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>
最新文章
- AutoMapper随笔记
- Linux下Session丢失原因
- react-router+webpack+gulp路由实例
- Redis 的 5 个常见使用场景
- “Compiled” Python files
- cas 登陆超时 解决方案
- oracle11 客户端安装及PLSQL和TOAD中文乱码
- python运维开发(二十一)----文件上传和验证码+session
- Inno Setup 插件 CallbackCtrl V1.1 (回调函数插件)
- 基于visual Studio2013解决C语言竞赛题之0710排序函数
- [java面试题]最长的回文字符串中出现确定
- [编织消息框架][netty源码分析]11 UnpooledHeapByteBuf 与 ByteBufAllocator
- java实现:将一个数逆序输出
- C# 添加Word页眉、页脚和页码
- 终止ajax异步请求——abort()
- 三、CSS样式——表格
- windows10系统盘瘦身
- coTurn测试程序之 turnutils_uclient
- 用GDB调试程序（七）
- python并发编程之IO模型 （四十九）
热门文章
- JSONObject、 JsonObject、阿里fastJson、谷歌gson区别
- 学习笔记（20）- Google LaserTagger
- 一、FreeMarker实现对js和css压缩
- JSON 解析中遇到的坑😭
- [排错] SpringBoot 警告 Could not find acceptable representation
- leetCode练题——14. Longest Common Prefix
- 二分查找及几种变体的Python实现
- json字符串转换成json增删查改节点
- 11 JavaScript Number原始值&对象&科学记数法&范围&进制转换&溢出Infinity&NaN
- C 语言入门第八章--C语言预处理命令