jQuery仿今日头条图片轮播特效代码下载


jQuery仿今日头条图片轮播特效代码下载
jQuery仿今日头条图片轮播特效代码下载以及仿今日头条、图片轮播等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery.js"></script>

2. HTML代码

	<div id="banner">
    	<div id="pic">
        	<ul id="picUl">
            	<li><a href="#"><img src="images/b1.jpg"></a></li>
                <li><a href="#"><img src="images/b2.jpg"></a></li>
                <li><a href="#"><img src="images/b3.jpg"></a></li>
                <li><a href="#"><img src="images/b4.jpg"></a></li>
                <li><a href="#"><img src="images/b5.jpg"></a></li>
                <li><a href="#"><img src="images/b6.jpg"></a></li>
            </ul>
        </div>
        <div id="tab">
        	<ul id="tabUl">
            	<li class="active"><a href="#">要闻</a><span class="on"></span></li>
                <li><a href="#">社会</a><span></span></li>
                <li><a href="#">娱乐</a><span></span></li>
                <li><a href="#">体育</a><span></span></li>
                <li><a href="#">军事</a><span></span></li>
                <li><a href="#">明星</a><span></span></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
		$(function(){
			var timer=null;
			var index=0;
			var picLi=$("#banner #picUl li");
			var tabLi=$("#banner #tabUl li" );
			var tabSp=$("#banner #tabUl li span")
			var size=$("#banner #picUl li").size();
			tabLi.mouseover(function(){
				index=$(this).index();
				$(this).addClass('active').siblings().removeClass('active');
				tabSp.eq(index).addClass('on').siblings().removeClass('on');
				picLi.eq(index).fadeIn().siblings().fadeOut();
			});
			$("#picUl").hover(function(){
				clearInterval(timer);
			},function(){timer=setInterval(move,1500);});
			window.clearInterval(timer);
			timer=window.setInterval(move,1500);
			function move(){
				index++;
				if(index==size)
				{
				  index=0;
				}
				tabLi.eq(index).addClass('active').siblings().removeClass('active');
				tabSp.eq(index).addClass('on').siblings().removeClass('on');
				picLi.eq(index).fadeIn().siblings().fadeOut();
			}
		})
    </script>

相关推荐

发表评论

相关文章