jQuery呼吸轮播图 jQuery实现呼吸轮播图
鑫仔9805 人气:0想了解jQuery实现呼吸轮播图的相关内容吗,鑫仔9805在本文为您仔细讲解jQuery呼吸轮播图的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jQuery,轮播图,下面大家一起来学习吧。
HTML
<div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/01.jpg" width="500" height="200" /></li> <li><img src="images/02.jpg" width="500" height="200" /></li> <li><img src="images/03.jpg" width="500" height="200" /></li> <li><img src="images/04.jpg" width="500" height="200" /></li> <li><img src="images/05.jpg" width="500" height="200" /></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <div id="arr"> <span id="left"><</span> <span id="right">></span> </div> </div>
CSS
* { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 2500px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; }
JS代码
$(function () { var index = 0; //鼠标移入 $('#box').mouseenter(function(){ $('#arr').show(); }) //鼠标移出 $('#box').mouseleave(function(){ $('#arr').hide(); }) $('#right').click(function(){ if(index == $('.screen>ul>li').length-1){ //最后一张 index = 0; }else { index++; } $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); //下方页码对应高亮 $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) $('#left').click(function(){ if(index == 0){ //第一张 index = $('.screen>ul>li').length-1; }else { index--; } $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); //下方页码对应高亮 $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) //页码点击轮播图片 $('.screen>ol>li').click(function(){ index = $(this).index() $('.screen>ul>li').eq(index).fadeIn(200).siblings('li').fadeOut(200); $('.screen>ol>li').eq(index).addClass('current').siblings('li').removeClass('current') }) });
加载全部内容