Jquery实现图片轮换效果

最近在看jquery书时，看到一个比较有趣的东西：图片轮换。这里和大家分享下我看完后写的一个demo。实现图片轮换要完成三部分模块：html部分、css部分、jqury部分。下面分步详细说明。
1.html部分：

五月天专辑
<<>>
伤心的人别听慢歌....播放：523,4455
神的孩子都在跳舞....播放：123,4455
后青春期的诗....播放：133,4445
第二人生....播放：183,4655
我为爱而生....播放：423,4355
知足。怎么去拥有 一道彩虹....播放：723,4955

基本上就是三个部分：按钮控区#controlBtns，.图片展示区.showContent，当前板块#pageInfo。

2.css部分。主要是控制好图片展示区的样式。图片列表父容器.showContent的
position设为relative,overflow为hidden。其子元素showContentList的position设为absolute，列表ul的white-space设为nowrap。为了方便大家快速查看效果，我把完整的css也附上来：

 body {font-size:14px;
}ul {margin:0;padding:0;
}ul li {float:left;list-style:none;    
}.main {height:500px;width:1100px;border:1px solid #808080;border-radius:2px;margin:10px auto;
}.showContainer {height:200px;width:770px;margin:10px auto;
}.showContainer .showHead {height:35px;width:100%;    background-color:#2B6CAD;opacity:0.7;border-top-left-radius:2px;border-top-right-radius:2px;
}.showContainer .headItem {float:left;margin-top:10px;padding-left:5px;
}#headName {width:130px;font-size:16px;color:white;font-weight:bold;
}#pageInfo {width:80px;
}#pageInfo ul li {width:12px;height:12px;border-radius:10px;background-color:#E7E7E7;text-align:center;margin-right:2px;
}#pageInfo ul li.selected {background-color:#41403C;
}#controlBtns {width:65px;height:20px;    border:1px solid #41403C;border-radius:4px;background-color:white;line-height:20px;
}
#controlBtns span {cursor:pointer;display:block;float:left;height:20px;width:30px;    text-align:center;
}#controlBtns span:first-child {border-right:1px solid #41403C;
}#controlBtns span:hover {color:red;font-weight:bold;
}.showContainer .showContent {height:180px;width:100%;overflow:hidden;position:relative;
}.showContent .showContentList {position:absolute;height:100%;
}.showContainer .showContentList ul {height:180px;white-space:nowrap;
}.showContainer ul li{height:180px;width:187px;margin-right:2px;/*margin-left:2px;*/margin-top:5px;
}.showContainer ul li img {height:120px;width:180px;    cursor:pointer;border:1px solid #808080;
}.showContainer ul li div {font-weight:bold;margin:5px 0;
}

3. js部分。利用jquery的animate方法实现起来确实简单代码如下： 

$(function () {var currentIndex = 1;var cellNum = 4;var contentWidth = $('.showContent').width();var $list = $('.showContentList'); //列表对象 即滚动的容器var banCount = Math.ceil($list.find('li').length / cellNum); //计算总的板数$('#controlBtns span').click(function () {var index = $(this).index();if ($list.is(":animated")) {  //防止出现连续多次点击后，仍然滑动的情况return;}if (index == 0) { //上一板if (currentIndex == 1) {currentIndex = banCount;   $list.animate({ left:'-' contentWidth*(banCount-1) }, 'normal');}else {currentIndex --;$list.animate({ left: ' ='   contentWidth }, 'normal');}}else {if(currentIndex == banCount){currentIndex=1;            $list.animate({ left: '0' }, 'normal');}else{currentIndex   ;$list.animate({ left: '-='   contentWidth }, 'normal');}}/*显示当前所在版的*/$('#pageInfo ul li').eq(currentIndex - 1).addClass('selected').siblings().removeClass('selected');});});

　　js代码都比较简单，就不做多的解释了。就这样，比较简单的图片轮换效果就实现。效果如图：

转载于:https://www.cnblogs.com/airbreak/p/4595450.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！