利用jquery实现选项卡切换图片滚动结合代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

134 532 178



特效描述:利用jquery实现 选项卡切换 图片滚动。利用jquery实现选项卡切换图片滚动结合代码

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>

2. HTML代码

<br>
<div class="slideGroup" style="margin:0 auto">
    <div class="parHd">
        <ul><li>教育</li><li>培训</li><li>出国</li></ul>
    </div>
    <div class="parBd">
            <div class="slideBox">
                <a class="sPrev" href="javascript:void(0)"></a>
                <ul>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic1.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图1.1</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic1.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图1.2</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic1.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图1.3</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic1.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图1.4</a></div>
                    </li>
                </ul>
                <a class="sNext" href="javascript:void(0)"></a>
            </div><!-- slideBox End -->
            <div class="slideBox">
                <a class="sPrev" href="javascript:void(0)"></a>
                <ul>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic2.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图2.1</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic2.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图2.2</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic2.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图2.3</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic2.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图2.4</a></div>
                    </li>
                </ul>
                <a class="sNext" href="javascript:void(0)"></a>
            </div><!-- slideBox End -->
            <div class="slideBox">
                <a class="sPrev" href="javascript:void(0)"></a>
                <ul>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic3.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图3.1</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic3.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图3.2</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic3.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图3.3</a></div>
                    </li>
                    <li>
                        <div class="pic"><a href="http://51qianduan.com/jiaoben" target="_blank"><img src="images/pic3.jpg" /></a></div>
                        <div class="title"><a href="javascript:void(0);" >效果图3.4</a></div>
                    </li>
                </ul>
                <a class="sNext" href="javascript:void(0)"></a>
            </div><!-- slideBox End -->
    </div><!-- parBd End -->
</div>
<script type="text/javascript">
    /*
    SuperSlide组合注意:
    1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同,除非特殊应用;
    2、注意书写顺序,通常先写内层js调用,再写外层js调用
    */
    /* 内层图片滚动切换 */
    jQuery(".slideGroup .slideBox").slide({
		mainCell:"ul",
		vis:3,
		prevCell:".sPrev",
		nextCell:".sNext",
		effect:"leftLoop"
		});
    /* 外层tab切换 */
    jQuery(".slideGroup").slide({
		titCell:".parHd li",
		mainCell:".parBd"
		});
</script>  
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到