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;}

?

轉載于:https://www.cnblogs.com/wangzhenghua/p/4332847.html

總結

以上是生活随笔為你收集整理的图片轮转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。