### 淡出淡入式
>效果如图
>html代码
```
<div class="content">
<div id="list">
<img src="images/01.png" alt="">
<img src="images/02.png" alt="">
<img src="images/03.png" alt="">
<img src="images/04.png" alt="">
<img src="images/05.png" alt="">
</div>
<button id="prev"></button>
<button id="next"></button>
<div id="btns">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
```
>jQuery代码
```
$(function(){
/*------------点击焦点跳到相应的图片并且添加样式----------*/
$("span").click(function(){
$(this).addClass("current").siblings().removeClass("current");
$("#list>img").eq($(this).index()).fadeIn().siblings().fadeOut();
var b_index = $(this).index();
console.log(b_index);
})
/*----------------点击按钮切换图片添加焦点样式-------------*/
var index = 0;
$("#next").click(function(){
index++;
if(index>4) {
index = 0;
}
console.log(index);
animate(index);
// $("#list img").eq(index).fadeIn().siblings().fadeOut();
// $("#btns>span").eq(index).addClass("current").siblings().removeClass("current");
})
$("#prev").click(function(){
index--;
if(index<0) {
index = 4;
}
console.log(index);
animate(index);
// $("#list>img").eq(index).fadeIn().siblings().fadeOut();
// $("#btns>span").eq(index).addClass("current").siblings().removeClass("current");
})
/*-----------封装切换图片&焦点样式函数-------*/
function animate(index) {
$("#list>img").eq(index).fadeIn().siblings().fadeOut();
$("#btns>span").eq(index).addClass("current").siblings().removeClass("current");
}
/*---------添加定时器---------*/
var timer;
function play(){
timer = setInterval(function(){
$("#next").click()
}, 800)
}
/*---------添加自动播放--------*/
play();
function stop(){
clearInterval(timer);
}
/*---------鼠标悬停停止-------*/
$(".content").mouseover(function(){
stop();
})
$(".content").mouseout(function(){
play();
})
})
```
>css代码
```
* {
margin: 0;
padding: 0;
}
.content {
position: relative;
width: 600px;
height: 400px;
margin-left: auto;
margin-right: auto;
border: 1px solid #333;
}
#list {
position: absolute;
width: 600px;
height: 400px;
}
#list img,
#prev,
#next,
#btns {
position: absolute;
}
#list img:not(:first-child) {
display: none;
}
#prev,
#next {
top: 50%;
transform: translateY(-50%);
z-index: 100;
width: 40px;
height: 70px;
background: url("../images/icon-slides.png");
border: none;
outline: none;
cursor: pointer;
}
#prev {
background-position-x: -86px;
}
#next {
right: 0;
background-position-x: -123px;
}
#prev:hover {
background-position-x: -1px;
}
#next:hover {
background-position-x: -42px;
}
#btns {
bottom: 13px;
right: 30px;
}
#btns>span {
display: inline-block;
width: 10px;
height: 10px;
background: #333;
border: 1px solid #fff;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
#btns .current {
border-color: #333;
background: #ccc;
}
```
### 滚动式
> 效果
>html 代码
```
<div class="content">
<div id="list" style="left:-600px">
<img src="img/05.png" alt="">
<img src="img/01.png" alt="">
<img src="img/02.png" alt="">
<img src="img/03.png" alt="">
<img src="img/04.png" alt="">
<img src="img/05.png" alt="">
<img src="img/01.png" alt="">
</div>
<button id="prev"></button>
<button id="next"></button>
<div id="btns">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
```
>js代码
```
$(function () {
var timer;
var index = 0;
$("#next").click(function () {
if (!$("#list").is(":animated")) {
index++;
if (index > 4) {
index = 0;
}
showBtn();
animate(-600);
}
})
$("#prev").click(function () {
if (!$("#list").is(":animated")) {
index--;
if (index < 0) {
index = 4;
}
showBtn();
animate(600)
}
})
function animate(offset) {
var newLeft = $("#list").position().left + offset
$("#list").animate({ left: newLeft + "px" }, 500, function () {
if (newLeft < -3000) {
$("#list").css({ left: "-600px" })
}
if (newLeft > -600) {
$("#list").css({ left: "-3000px" })
}
})
}
function showBtn() {
$("#btns>span").eq(index).addClass("current").siblings().removeClass("current");
}
$("#btns>span").click(function(){
var offset = ($(this).index()-index)*-600;
console.log(offset);
index = $(this).index();
showBtn();
animate(offset);
})
function play(){
timer = setInterval(function(){
$("#next").click()
},1000)
}
play();
function stop(){
clearInterval(timer);
}
$(".content").mouseover(function(){
stop();
})
$(".content").mouseout(function(){
play();
})
})
```
>css 代码
```
*{margin:0;padding:0}
.content{
overflow: hidden;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
width:600px;
height:400px;
border:1px solid #333;
}
.content img{
float:left;
}
#btns .current{
background: orangered;
}
#list{
position: absolute;
height:400px;
width:4200px;
}
#prev,#next{
cursor: pointer;
top:50%;
transform: translateY(-50%);
width:40px;
height:74px;
position: absolute;
z-index: 100;
background: url(../img/icon-slides.png);
border:none;
}
#next{
right:0;
background-position-x:-43px
}
#btns{
bottom: 40px;
left:50%;
transform: translateX(-50%);
position: absolute;
z-index: 101;
}
#btns span{
cursor: pointer;
border-radius: 50%;
width:20px;
height:20px;
display: inline-block;
border:1px solid #fff;
background: rgba(97, 96, 96, 0.3)
}
```
----
整个demo已上传至[github](https://github.com/MrXuxu/H5_demo/tree/master/jQuery%E8%BD%AE%E6%92%AD%E5%9B%BE)
- 空白目录
- css实用样式
- css--下拉栏的几种设计
- css--图片阴影以及浮起的效果
- css--图片翻转二：自动翻转
- css--图片翻转一：滑过翻转
- css--三种loading特效
- css--图片遮罩效果实现
- css--又是三种loading特效
- css--带三角形的图形实现
- js demo
- 原生demo
- 1. 原生js实现轮播图
- 2. 倒计时按钮
- 3. 动态添加表格
- 4. checkbox全选反选
- 5. 小米登录方式切换
- 6. 点击事件
- 7. 个人网页导航条(二)点击滚动
- 8. 瀑布流实现！
- 9. 个人网页导航条(一)滑动固定
- 10. 定时器实现淡入淡出效果
- 11. 轮播图setTimeout版
- jQuery demo
- 1. 轮播图实现！
- 2. 成都小风车导航特效
- html组件
- html--导航栏（家居医生）
- html--登录页面（小米登录）
- html--响应式导航条（木兮地板）
- html--搜索栏
- Vue demo
- 1. mvvm实现动态添加表格
- 2. 豆瓣TOP250渲染
- 3. 制作一段跑马灯文字
- 3.1. vue 单行文字自动跑马灯效果
- 4. 利用豆瓣接口搜索书籍
- 5. 制作简易计算器
- 6. 创建一个点赞组件
- 7. 列表添加删除动画
- 8. isShow手风琴原理
- 9. tab栏切换