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



67 265 89



特效描述:利用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>



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


热门标签: 滚动流动 滚动切换 滑动选项卡切换 自动滚动图片轮播 选项卡切换 滑动手风琴 滑动星星打分 切换按钮 form表单 其他更多 导航切换 图片滚动 图片切换 按钮控制 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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