淡入淡出轮播图

2019-11-21 17:00:35 阅读：302 来源： 互联网

标签：index ol 轮播淡入淡出 li autoPaly var pages

轮播图淡入淡出效果 jquery

css

<style>
	*{margin: 0;padding: 0;}
	ul,ol{ list-style: none;}
	.wrapper{
		width: 670px;
		height: 240px;
		margin: 100px auto;
		overflow: hidden;
		position: relative;
	}
	ul{
		position:relative;
	}
	ul li{
		position:absolute;
		top:0;
		left:0;
	}
	ol{
		position: absolute;
		right: 0;
		bottom: 10px;
		width: 190px;
	}
	ol li{
		float: left;
		width: 20px;
		height: 20px;
		margin: 0 5px;
		text-align: center;
		border-radius: 50%;
		cursor: default;
		background-color: #abc;
	}
	ol li.current{
		background-color: pink;
	}
</style>

　　html

    <div class="wrapper">
        <ul>
            <li style="z-index: 6;"><img src="images/1.jpg" alt=""/></li>
            <li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>
            <li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>
            <li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>
            <li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>
            <li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>
        </ul>
        <ol style="z-index: 10;">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>

<script>
	var index = 0;
	var timer = null;
	var list = $("ul li");
	var pages = $("ol li");
	timer = setInterval(autoPaly,4000)
	function autoPaly(){
		index++;
		if(index == pages.length){
			index = 0;
		}
		pages.eq(index).addClass("current").siblings().removeClass("current");
		list.eq(index).fadeIn(1000).siblings().fadeOut(1000);
		// fadeIn  淡入效果  速度1秒
	}
	pages.mouseenter(function(){
		clearInterval(timer);
		index = $(this).index()-1;
		autoPaly();
	})
	pages.mouseleave(function(){
		timer = setInterval(autoPaly,4000)
	})
</script>

标签：index,ol,轮播,淡入淡出,li,autoPaly,var,pages
来源： https://www.cnblogs.com/xiaoyaolang/p/11906725.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

淡入淡出轮播图