前提： 最近由于項目的需要jquery "switchable圖片切換"效果 所以趁著周末有空時間研究下 ，以前工作都依賴于kissy框架，所以也沒有綜合的寫過類似的，如下圖所示效果：

?

有左右按鈕 和下面的數字按鈕 點擊左右按鈕或者數字按鈕切換到上一屏或者下一屏等。

HTML代碼如下

<div class="wrapper"><div class="focus" id="focus"><ul><li><a href="#"><img src="images/01.jpg"/></a></li><li><a href="#"><img src="images/02.jpg"/></a></li><li><a href="#"><img src="images/03.jpg"/></a></li><li><a href="#"><img src="images/04.jpg"/></a></li></ul></div></div>

css代碼如下：

<style>*{margin:0;padding:0;}body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{zoom:1;}ul,li{list-style:none;}img{border:0;}.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}.focus{width:800px;height:280px;overflow:hidden;position:relative;}.focus ul{height:380px;position:absolute;}.focus ul li{float:left;position:relative;width:800px;height:280px;overflow:hidden;}.focus ul li div{position:absolute;overflow:hidden;}.focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}.focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}.focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;opacity:0.4;filter:alpha(opacity=40);}.focus .btn span.on{background:#fff;opacity:1;filter:alpha(opacity=100);}.focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(images/sprite.png) no-repeat 0 0;cursor:pointer;opacity:0.2;filter:alpha(opacity=20);}.focus .current {opacity:0.5;filter:alpha(opacity=50);}.focus .pre{left:0;}.focus .next{right:0;background-position:right top;}</style>

JS代碼如下：

/*** switchable 切換*/$(function(){function SwitchTab() {this.config = {wrapContainer : '#focus', // 焦點圖的外部容器prev : '.prev' , // 上一頁按鈕next : '.next', // 下一頁按鈕autoplay : true, // 是否自動播放 默認為自動time : 3000, // 間隔時間current : 'current', // 左右按鈕當前狀態on : 'on', // 數字按鈕當前狀態isNum : true // 是否動態生成數字按鈕1,2,3,4 默認為true };this.cache = {index : 0, //當前的索引picTimer : undefined // 保存定時器的時間 };}SwitchTab.prototype = {init: function(customConfig){this.config = $.extend(this.config, customConfig || {});var self = this,_config = self.config,_cache = self.cache;var sWidth = $(_config.wrapContainer).width(), //獲取焦點圖外層容器寬度len = $(_config.wrapContainer + ' ul li').length;/* 下面的代碼初始化 數字按鈕 按鈕半透明 上一頁和下一頁按鈕*/var btn = "<div class='btnBg'></div><div class='btn'>";if(_config.isNum) {for(var i = 0; i < len; i+=1) {btn+= "<span></span>";}}btn += "</div><div class='preNext prev'></div><div class='preNext next'></div>";$(_config.wrapContainer).append(btn);//為小按鈕添加鼠標滑入事件，以顯示相應的內容$(_config.wrapContainer + ' .btn span') && $(_config.wrapContainer + ' .btn span').mouseover(function(){_cache.index = $(_config.wrapContainer + ' .btn span').index(this);t && clearTimeout(t);var t = setTimeout(function(){hover();},100);}).eq(0).trigger("mouseover");function hover(){self.showPics(_cache.index,sWidth);}// 上一頁 下一頁按鈕透明處理$(_config.wrapContainer + ' .preNext').hover(function(){$(this).stop(true,false).addClass(_config.current);},function(){$(this).stop(true,false).removeClass(_config.current);});// 上一頁按鈕$(_config.prev).click(function(){_cache.index--;if(_cache.index == -1) {_cache.index = len - 1;}self.showPics(_cache.index,sWidth);});// 下一頁按鈕 $(_config.next).click(function(){_cache.index++;if(_cache.index == len) {_cache.index = 0;}self.showPics(_cache.index,sWidth);});//本例為左右滾動，即所有li元素都是在同一排向左浮動，所以這里需要計算出外圍ul元素的寬度$(_config.wrapContainer + ' ul').css("width",sWidth * len);if(_config.autoplay) {// 鼠標滑到焦點圖時候 停止自動播放 滑出時自動播放$(_config.wrapContainer).hover(function(){_cache.picTimer && clearInterval(_cache.picTimer);},function(){_cache.picTimer = setInterval(function(){self.showPics(_cache.index,sWidth);_cache.index++;if(_cache.index == len) {_cache.index = 0;}},_config.time);}).trigger("mouseleave");} },showPics: function(index,sWidth){var self = this,_config = self.config,nowLeft = -index*sWidth;//通過animate()調整ul元素滾動到計算出的position$(_config.wrapContainer + " ul").stop(true,false).animate({"left":nowLeft},300); $(_config.wrapContainer + ' .btn span') &&$(_config.wrapContainer + ' .btn span').removeClass(_config.on).eq(index).addClass(_config.on); //為當前的按鈕切換到選中的效果 }}new SwitchTab().init({});});

上面都有注釋 就不用解釋了哦！

轉載于:https://www.cnblogs.com/tugenhua0707/p/3366395.html

總結

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

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