js
/*轮播*/ $(function () {var page = 1;var i = 4; //每版放4个图片var len = $(".scroll_content li").length;var page_count = Math.ceil(len / i); //只要不是整数，就往大的方向取最小的整数var none_unit_width = $(".scroll_mod").width(); //获取框架内容的宽度,不带单位var $parent = $(".scroll_content");//向右 按钮$(".main_show_btnr").click(function () {if (!$parent.is(":animated")) {if (page == page_count) { //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。$parent.animate({ left: 0 }, 800); //通过改变left值，跳转到第一个版面page = 1;} else {$parent.animate({ left: '-=' + none_unit_width }, 800); //通过改变left值，达到每次换一个版面page++;}}});//往左 按钮$(".main_show_btnl").click(function () {if (!$parent.is(":animated")) {if (page == 1) { //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。$parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800); //通过改变left值，跳转到最后一个版面page = page_count;} else {$parent.animate({ left: '+=' + none_unit_width }, 800); //通过改变left值，达到每次换一个版面page--;}}}); }); /*轮播*//*tab 切换*/ $(function () {$(".news_nav li a").each(function (i) {$(this).mouseover(function () {$(".news_list").hide();$(".news_list").eq(i).show();});}); }); /*tab 切换*//*图片切换*/ $(function () {var len = $(".num > li").length;var index = 0;var adTimer;$(".num li").mouseover(function () {index = $(".num li").index(this);showImg(index);}).eq(0).mouseover();//滑入 停止动画，滑出开始动画.$(".news_pic").hover(function () {clearInterval(adTimer);}, function () {adTimer = setInterval(function () {showImg(index)index++;if (index == len) { index = 0; }}, 2000);}).trigger("mouseleave"); }) // 通过控制top ，来显示不同的幻灯片 function showImg(index) {var adHeight = $(".news_pic").width();$(".show").stop(true, false).animate({ left: -adHeight * index }, 1000);$(".news_pic .num li").removeClass("on").eq(index).addClass("on"); } /*图片切换*/
<div class="news_pic"><ul class="show"><li><a href="#" target="_blank"><img src="images/1.JPG"> </a> </li><li><a href="#" target="_blank"><img src="images/2.JPG"> </a> </li><li><a href="#" target="_blank"><img src="images/3.JPG"> </a> </li><li><a href="#" target="_blank"><img src="images/4.JPG"> </a> </li></ul><ul class="num"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
css
.news_pic{float:left;width: 300px;height: 236px;overflow:hidden;position: relative;background:#fff;margin-top:2px;} .news_pic img{padding:5px;width: 290px;height: 231px;display:block; }.news_pic .num{position:absolute; bottom:5px; right: 5px; } .news_pic .num li{float:left; width:15px; height:15px; line-height:15px; text-align:center; border:#fff 1px solid; margin:0 2px; background:#FFF;} .news_pic .num .on{background:#B81B21; color:#FFF; width:15px; height:15px; line-height:15px; } .news_pic .show li{float:left;text-decoration:none; } .news_pic .show{position:absolute;height:240px;width:99999px;} .news_pic li{ list-style-type:none;}
)
)
)
