超详细讲解用jquery制作图片百叶窗轮播展示特效推荐 亲测 原创

文章标签: 图片特效
  • :
  • 07-02 20:44
  • :
  • 66次
  • :
  • 0条
  • 2赞

简介本文非常详细的讲解了如何在jquery里制作类似百叶窗一样的图片轮播展示特效,并且还有完整的在线实例演示。l

本文和大家分享一个用jquery制作的一个图片百叶窗的特效,大家可以点下面的链接查看具体的在线实例演示:

jquery图片百叶窗轮播展示特效在线演示

下面是实例的截图:

下面站长来具体和大家说下,如何来制作这个jquery图片百叶窗轮播展示的特效:


第一步:布置相关的HTML代码,结构如下:

<div class="boxx">
    <ul class="boxx_con" id="boxx_con">
        <li><a href=""><img src="/images/eg/ad1.jpg"/></a></li>
        <li style="display:none"><a href=""><img src="/images/eg/ad2.jpg"/></a></li>
        <li style="display:none"><a href=""><img src="/images/eg/ad3.jpg"/></a></li>
        <li style="display:none"><a href=""><img src="/images/eg/ad4.jpg"/></a></li>
    </ul>
    <ul class="boxx_title" id="boxx_title">
        <li class="bks">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

第二步:添加所需的CSS样式:

.boxx{width:549px;height:289px;margin:0 auto;position:relative;border:1px #ccc solid}
.boxx_con{width:100%;position:absolute;z-index:10}
.boxx_title{width:250px;height:50px;position:absolute;top:260px;left:435px;z-index:100;}			
.boxx_title li{width:15px;height:15px;float:left;margin-left:10px;display:inline;cursor:pointer;line-height:15px;text-align:center;background:#f7f6f2;color:#373737}
li.bks{color:#fff;background:#ce2329;}


第三步:编写具体的jquery代码:

<script type="text/javascript">
$(document).ready(function(){
	var p=0;
	var timeInterval=3000;
	var $bli=$("#boxx_con li");
	var $pli=$("#boxx_title li");
	
	$bli.hide();
	$($bli[0]).show();
	function play(){
		p<$bli.length-1?p++:p=0;
		$bli.eq(p).show().siblings().hide(); 
		$pli.eq(p).addClass("bks").siblings().removeClass("bks");   
	}
	set = window.setInterval(play,timeInterval);
	$pli.mouseover(function(){
			window.clearInterval(set);
			p=$(this).index();
			$bli.eq(p).show().siblings().hide(); 
			$pli.eq(p).addClass("bks").siblings().removeClass("bks"); 
			set = window.setInterval(play,timeInterval);  
	});   
})
</script>

好了,就是这么简单!

虽然网上有很多关于jquery图片百叶窗的插件,但是如果我们自己的网页只需要很简单的功能,那么自己动手写是最好的方法,希望这篇文章能帮助到所有看到这篇文章的朋友们!



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 11:08:33