jquery右上角點擊下拉背景切換



62 247 83



特效描述:jquery 右上角點擊下拉 背景切換,jquery右上角點擊下拉背景切換

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

2. HTML代碼

<a href="#" class="but"></a>
<div id="hf">
	<div class="con">
		<img src="images/left.png" class="left"/>
		<img src="images/right.png" class="right"/>
		<div class="scroll">
			<div class="scrollCon">
				<ul>
					<li><img src="images/99-1.jpg"/></li>
					<li><img src="images/11-1.jpg"/></li>
					<li><img src="images/55-1.jpg"/></li>
					<li><img src="images/33-1.jpg"/></li>
					<li><img src="images/44-1.jpg"/></li>
					<li><img src="images/55-1.jpg"/></li>
					<li><img src="images/99-1.jpg"/></li>
					<li><img src="images/44-1.jpg"/></li>
					<li><img src="images/55-1.jpg"/></li>
					<li><img src="images/99-1.jpg"/></li>
					<li><img src="images/11-1.jpg"/></li>
					<li><img src="images/33-1.jpg"/></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
<!-- 點擊收縮換膚欄 -->
$(".but").click(function(){
	$("#hf").slideToggle("slow");  
});
<!-- 點擊換body圖 -->
$(".scrollCon ul li").click(function(){
	var simg=$(this).find("img").attr("src");
	var bimg=simg.replace(/-\d*/,'');  //根據小圖找到大圖的名稱
	$("body").css("background","url("+bimg+")");//url("+bimg+"),添加 變量的方法
});
<!-- 點擊左邊按鈕 -->
var click_num=0; //初始點擊次數
$(".left").click(function(){
	click_num++;       //click_num+1
	if(click_num>2){
		click_num=0;
	}
	$(".scrollCon").animate({left:click_num*(-1080)},300);
});
$(".right").click(function(){
	click_num--;       //click_num+1
	if(click_num<0){
		click_num=2;
	}
	$(".scrollCon").animate({left:click_num*(-1080)},300);
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 收縮展開 展開收縮 收縮 展開 收縮菜單 收縮導航 背景切換 大圖切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子