IT技术互动交流平台

仿安踏商城jQuery大图幻灯片焦点图插件

作者:jqueryba.com  发布日期:2013-08-14 10:42:39

仿安踏商城jQuery大图幻灯片焦点图插件
HTML结构


<div id="scroll_box">
    <div class="box_163css oh bc pr">
        <ul>
            <li><a href=""><img src="images/1.jpg"></a></li>
            <li><a href=""><img src="images/2.jpg"></a></li>
            <li><a href=""><img src="images/3.jpg"></a></li>
            <li><a href=""><img src="images/4.jpg"></a></li>
        </ul>
        <ol class="scroll_nav">
            <li class="current"><p>七夕情人节 有减还有送</p></li>
            <li><p>新品上架 满209减30</p></li>
            <li><p>到店有礼,注册即送20元抵用券</p></li>
            <li><p>我是A道 2013新品休闲鞋</p></li>
        </ol>
    </div>
    <p class="prev pa oh" id="banner_prev"><img alt="上一张" src="images/btn_banner.png"></p>
    <p class="next pa oh" id="banner_next"><img alt="下一张" class="pr" src="images/btn_banner.png"></p>
</div>

jquery插件部分引入


<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/anta.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var option = {
		prev:"#banner_prev", //上一张按钮,默认为null
		next:"#banner_next",//下一张按钮,默认为null
		nav:'.scroll_nav',//轮播导航,默认为null,当为null时,自动生成导航。
		auto:true//是否自动轮显,默认为true
	};
	$("#scroll_box").baisonSlider(option);
	//banner轮显按钮特效
	$("#banner_prev,#banner_next").find('img').hover(
		function(){
			$(this).stop(false,true).fadeTo(800,0);	
		},
		function(){
			$(this).stop(false,true).fadeTo(500,1);
		}
	);
})
</script>

 

Tag标签: jQuery   幻灯片焦点图  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规