jquery原生幻灯
<div class="slide">
    <ul>
        <li><img src="test1.png" /></li>
        <li><img src="test2.png" /></li>
        <li><img src="test3.png" /></li>
    </ul>
</div>

<a class="prev">prev</a>
<a class="next">next</a>

<style type="text/css">
.slide { position: relative; /*overflow: hidden;*/ width: 100px;height: 100px;} 
.slide ul{height: 100px;width: auto;}
.slide li {  width: 100px; height: 100px; list-style: none; float: left;} 
.slide li:first-child { position: relative;visibility: visible; display: block;}
.slide li img{width: 100%;height: 100%;}
</style>

<script type="text/javascript">
var size 		= $('.slide li').size();
var _index 	= 0;
var timer 	= null;

//  timer = setInterval(function() {
		// $('.slide li').fadeOut(800);
		// _index+1 == size ? _index = 0 : _index++;
		// $('.slide li').eq(_index).fadeIn(800);
//  }, 4000);

$(".prev").on('click',function(){
	console.log(_index);

	$('.slide li').fadeOut(800);
		_index == 0 ? _index =size-1  : _index--;
		$('.slide li').eq(_index).fadeIn(800);
});

$(".next").on('click',function(){
		$('.slide li').fadeOut(800);
		_index+1 == size ? _index = 0 : _index++;
		$('.slide li').eq(_index).fadeIn(800);
});

</script>


修改时间 2017-09-15

真诚赞赏,手留余香
赞赏
随机推荐
DedeCMS 织梦常见问题
iOS 10 APP调用摄像头导致的crash
跟Github学习设计不符合 CRUD 情况的RESTful API
Hls.js 播放 m3u8
一个页面中多个window.onload = function(){}冲突问题解决思路
Simple Model
ES6 Promise简介
使用 sqlmap 检测 SQL 注入漏洞
windows mysql 自动备份的几种方法
Vue和Ajax的关系,Axios简介