当前位置: 移动技术网 > IT编程>开发语言>JavaScript > jquery背景渐变切换banner的代码实现

jquery背景渐变切换banner的代码实现

2018年10月07日  | 移动技术网IT编程  | 我要评论

jquery背景渐变切换banner的代码实现

<script type="text/javascript">
$(document).ready(function(){
	var $tab_li = $('#tab ul li');
	$tab_li.hover(function(){
		$(this).addclass('selected').siblings().removeclass('selected');
		var index = $tab_li.index(this);
		$('p.tab_box > p').eq(index).show().siblings().hide();
	});	
});
</script><script type="text/javascript">
$(function(){
	$(".screenbg ul li").each(function(){
		$(this).css("opacity","0");
	});
	$(".screenbg ul li:first").css("opacity","1");
	var index = 0;
	var t;
	var li = $(".screenbg ul li");	
	var number = li.size();
	function change(index){
		li.css("visibility","visible");
		li.eq(index).siblings().animate({opacity:0},3000);
		li.eq(index).animate({opacity:1},3000);
	}
	function show(){
		index = index + 1;
		if(index<=number-1){
			change(index);
		}else{
			index = 0;
			change(index);
		}
	}
	t = setinterval(show,8000);
	//根据窗口宽度生成图片宽度
	var width = $(window).width();
	$(".screenbg ul img").css("width",width+"px");
});
</script>
<p class="screenbg">
  <ul>
    <li><a href="javascript:;"><img src="images/0.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/1.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/2.jpg"></a></li>
  </ul>
</p>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网