一個(gè)實(shí)用的圖片切換支持點(diǎn)擊切換和自動(dòng)輪播

更新時(shí)間：2014年09月09日 11:02:34 投稿：whsnow

這篇文章主要介紹了一個(gè)實(shí)用的圖片切換支持點(diǎn)擊切換和自動(dòng)輪播，經(jīng)測試效果相當(dāng)不錯(cuò)，需要的朋友可以參考下

不經(jīng)意間看到了以前寫的這個(gè)小東西，就貼上來了，支持點(diǎn)擊切換和自動(dòng)輪播，供前端新手看看吧！

代碼如下：

<div class="scroll_div">
<ul class="pic">
<li><img src="img/pic_1.jpg" /></li>
<li><img src="img/pic_2.jpg" /></li>
<li><img src="img/pic_3.jpg" /></li>
<li><img src="img/pic_4.jpg" /></li>
<li><img src="img/pic_5.jpg" /></li>
</ul>
<ul class="btn">
<li>項(xiàng)目一</li>
<li>項(xiàng)目二</li>
<li>項(xiàng)目三</li>
<li>項(xiàng)目四</li>
<li>項(xiàng)目五</li>
</ul>
</div>

html

此處只需將圖片路徑改成你本地的即可。

.scroll_div{width:1000px; height:370px; margin:0 auto; padding:10px;}
.scroll_div .pic{width:820px; height:370px; overflow:hidden; position:relative; float:left;}
.scroll_div .pic li{width:820px; height:370px; position:absolute; top:0; left:0; display:none;}
.scroll_div .btn{float:right; width:173px;}
.scroll_div .btn li{width:173px; height:66px; display:block; float:left; text-align:center; color:#fff; font:18px/100% "微軟雅黑"; font-weight:bold; background:#008dd8; margin-bottom:10px; line-height:66px; cursor:pointer;}
.scroll_div .btn li.on{background:#d73737;}

li {list-style:none;}

css

$(function(){
var listLen = $(".pic li").length, i=0,setInter,speen = 3000;
/*圖片輪播*/
$(".btn li:last").css({"margin":"0px 0px 0px 0px"});
$(".btn li:first").addClass("on");
$(".pic li:first").show();

$(".btn li").each(function(index,element){
$(element).click(function(){
i = index;
$(this).addClass("on").siblings().removeClass("on");
$(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
})
$(element).hover(function(){
clearInterval(setInter);
},function(){
outPlay();
});
})


out_fun = function(){
if(i < listLen){i++;}else{i=0;};
$(".btn li").eq(i).addClass("on").siblings().removeClass("on");
$(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
}

outPlay = function(){
setInter = setInterval("out_fun()",speen);
}
outPlay();
})

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)調(diào)整表格單列順序完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)調(diào)整表格單列順序的方法,結(jié)合完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件及動(dòng)態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06
jQuery中val()方法用法實(shí)例
這篇文章主要介紹了jQuery中val()方法用法,以實(shí)例形式分析了val()方法的兩種常見用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery判斷郵箱格式對錯(cuò)實(shí)例代碼講解
本文通過實(shí)例代碼給大家講解了基于jquery判斷郵箱格式對錯(cuò)，非常實(shí)用，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-04-04
jQuery實(shí)現(xiàn)嵌套選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)嵌套選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
jquery實(shí)現(xiàn)的樹形目錄實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)的樹形目錄,涉及jquery針對頁面元素及鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下
2015-06-06
jquery 自定義容器下雨效果可將下雨圖標(biāo)改為其他
這篇文章主要介紹了jquery 自定義容器下雨效果可將下雨圖標(biāo)改為其他,需要的朋友可以參考下
2014-04-04
基于jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退功能
前進(jìn)與后退在瀏覽網(wǎng)頁的時(shí)候是比較常見的而且非常的實(shí)用，接下來為大家分享下使用jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退，感興趣的朋友可以參考下哈
2013-04-04
jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡單演示
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡單演示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
html文件中jquery與velocity變量中的$沖突的解決方法
在使用velocity模版引擎的環(huán)境下，使用jquery時(shí)其中$與velocity變量中的$沖突，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下
2013-11-11
Jquery下判斷Id是否存在的代碼
Jquery下判斷Id是否存在的代碼，需要的朋友可以參考下。
2011-01-01