轮播图默认轮播点击原点显示图片

前端  /  管理员 发布于 5年前   526

<div id="sb_yd">
    <div class="lbt">
        <div class="lbt_a"><a href=""><img src="xxx1.jpg" alt=""></a></div>
        <div class="lbt_a"><a href=""><img src="xxx2.jpg" alt=""></a></div>
    </div>
    <ul>
       <li class="dj_yd" style="position: absolute;width: 5px;height: 5px;z-index: 999;
           background: #666;top: 10px;left:48%;padding: 5px 5px;"></li>
       <li class="dj_yd" style="position: absolute;width: 5px;height: 5px;z-index: 999;
           background: #666;top: 10px;left:50%;padding: 5px 5px;"></li>
    </ul>
</div>
<script type="text/javascript">
    //轮播图
    var num=0;
    function run(){
     $(".lbt_a").eq(num).fadeIn().siblings().fadeOut();     
     $(".dj_yd").eq(num).css("background","red").siblings().css("background","#fff");
     num++;
     if (num==$(".lbt_a").length) {
     	num=0;
     }
    }
	time = setInterval(run,3000);
   //选中圆点 
	$(".dj_yd").stop().click(function(event){
		num=$(this).index();
		run();
		clearInterval(time);
	});
    //移进/出图片
    $('#sb_yd').stop().hover(function() {
           clearInterval(time);
   		 }, function() {
           time = setInterval(run,3000);
   		 }
    );
</script>

效果图就不贴了；

最近在做一个手机版公益网站，现在在写前端模版跟效果，blog更新这类的功能案例比较多