仿锋利的Jquery案例做的一个滚动切换效果，供大家参考，具体内容如下
效果如下图:
前台HTML代码如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动图</title> <link rel="stylesheet" type="text/css" href="css/RollControl.css" /> <script type="text/javascript" src="script/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { var page = 1; var i = 4; var $v_trends = $("#view_menu_trends").find("li"); $v_trends.eq(0).addClass('currentTrends');//默认第一个点选中 $(".next").click(function () { var $parent = $("#view_menu"); var $v_content = $("#view_content");//外围width var $v_show = $("#view_content_fixed");// var v_width = $v_content.width(); var len = $v_content.find('li').length; var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数 if (!$v_show.is(":animated")) { if (page == page_count) { $v_show.animate({ left: '0px' }, 'slow');//如果超过总页数 那么就跳回第一页 page = 1; } else { $v_show.animate({ left: '-=' + v_width }, 'slow'); page++; } $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends'); } }); $(".pre").click(function () { var $parent = $("#view_menu"); var $v_content = $("#view_content");//外围width var $v_show = $("#view_content_fixed");// var v_width = $v_content.width(); var len = $v_content.find('li').length; var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数 if (!$v_show.is(":animated")) {//判断是否是动画状态 if (page == 1) { $v_show.animate({ left: '-=' + (page_count - 1) * v_width + "px" }, 'slow');//到了第一页那么跳转到最后一页 page = page_count; } else { $v_show.animate({ left: '+=' + v_width }, 'slow'); page--; } $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends'); } }); }); </script> </head> <body> <div> <div id="view_menu"> <div id="view_menu_title"><span>热播电视剧</span></div> <div id="view_menu_trends"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div id="view_menu_control"> <span> <img src="Rollpic/left_arrow.png" /></span> <span> <img src="Rollpic/right_arrow.png" /></span> </div> </div> <div id="view_content"> <div id="view_content_fixed"> <ul> <li> <div> <img src="Rollpic/1.jpg" /></div> <span></span></li> <li> <div> <img src="Rollpic/2.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/3.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/4.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/5.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/6.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/7.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/8.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/9.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/10.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/11.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/12.jpg" /> </div> <span></span></li> </ul> </div> </div> </div> </body> </html>
RollControl.css代码如下:
body { margin: 0px; padding: 0px; } #view_menu { width: 600px; height: 30px; line-height: 30px; cursor: default; } #view_menu_title { float: left; font-family: 'Microsoft YaHei'; width: 150px; text-align: center; } #view_menu_trends { float: left; line-height: 30px; color: #99CC99; font-size: 10px; } .currentTrends { color: #009933; } #view_menu_trends ul { list-style: none; margin: 0px; padding: 0px; } #view_menu_trends ul li { text-align: center; float: left; width: 15px; } #view_menu_control { float: left; width: 100px; height: 30px; text-align: center; } #view_menu_control img { width: 25px; height: 25px; line-height: 30px; cursor: pointer; } #view_content { width: 548px; height: 178px; position: relative; overflow: hidden; border: 1px solid #CCCCCC; } #view_content_fixed { position: absolute; width: 2500px; } #view_content_fixed img { cursor: pointer; } #view_content ul { margin: 0px; position: absolute; padding: 0px; } #view_content ul li { margin: 0px; padding: 0px; float: left; padding: 8px; list-style: none; display: inline; }
.view_content_fixed下的SPAN标签是为了加标题的
效果图如下:
还有两个地方没有细化，第一个就是
这个动态点点击的时候也可以切换页面，第二个
左右切换按钮,可以添加按压效果，点击的时候取深色图片。
好了，大体的效果就这样，细节自己去玩吧，希望自己能坚持写下去，从小案例到大案例，好好学习！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【基于jQuery实现滚动切换效果】相关文章：
★ jQuery的Scrollify插件实现滑动到页面下一节点
★ 滚动效果