类似选项卡竖向排版的jquery图文同步切换效果

像TAB选项卡一样的图片切换效果,基于jquery来实现,试试这个图片切换有12345数字一起切换有小图大图一起切换里面有教程和源码,鼠标放上图片左侧的彩条上,右侧的大图片和左侧的文字说明一起切换。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>类似选项卡竖向排版的jquery图文同步切换效果丨石家庄门禁</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px "Helvetica Neue",Helvetica,STheiti,微软雅黑,黑体,Arial,Tahoma,sans-serif,serif}
body{background:#f6f6f6}
.fl{float:left}
a{text-decoration:none}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
*html .clearfix{height:1%}
.clearfix{display:block}
/* m-banner */
.m-banner{padding:10px 10px 10px 0;height:239px;border:1px solid #dedede;width:755px;margin:20px auto;}
.mb-news{width:270px;padding:0 15px;line-height:1.8}
.mb-news h4{word-break:break-all;word-wrap:break-word}
.mb-news h4 a{font-size:18px;color:#8c3608;line-height:1.6;word-break:break-all;word-wrap:break-word}
.mb-news p{font-size:14px;color:#444;margin-top:15px;overflow:hidden}
.mb-news h4 a:hover{text-decoration:underline}
.mb-img{width:455px;height:239px}
.mb-inav{width:10px;margin-right:1px}
.mb-inav li{width:10px;height:79px;margin-bottom:1px}
.mb-inav li a{display:block;width:10px;height:79px;background:#bdbdbd}
.mb-inav li a.cur{background:#671900}
.mb-ibox{width:444px;height:239px;position:relative;overflow:hidden}
.mb-ibox a{display:block;width:444px;height:239px;overflow:hidden;position:absolute;top:0;left:0;z-index:10;display:none}
</style>
<script src="/images/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // 图片轮播
    bannerRotate.bannerInit();
});
var bannerRotate = {
    _time: 3000,
    _fade: 200,
    _i: 0,
    _interval: null,
    _navId: "#mb-inav",
    _navBox: "#mb-ibox",
    _navTxt: "#mb-itxt",
    bannerShow: function() {
        $(this._navId).find("li a").removeClass("cur");
        $(this._navId).find("li:eq("+this._i+")").find("a").addClass("cur");

        $(this._navBox).find("a").fadeOut(this._fade);
        $(this._navBox).find("a:eq("+this._i+")").fadeIn(this._fade);

        $(this._navTxt).find("div").hide();
        $(this._navTxt).find("div:eq("+this._i+")").fadeIn(this._fade);
    },
    bannerStart:function() {
        var _this = this;
        _this._interval = setInterval(function() {
            if(_this._i >= 2) {
                _this._i = 0;
            }
            else {
                _this._i++;
            }
            _this.bannerShow();
        }, _this._time);
    },
    bannerInit: function() {
        var _this = this;
        _this.bannerStart();
        $(_this._navId).find("li a").bind("mouseover", function() {
            clearInterval(_this._interval);
            _this._i = $(this).parent().index();
            _this.bannerShow();
            _this.bannerStart();
        });
    }
};
</script>
</head>
<body>
<div class="m-banner">
    <div id="mb-itxt" class="mb-news fl">
        <div style="display:block;">
            <h4><a href="/">秋之红叶</a></h4>
            <p>试试这个图片切换有12345数字一起切换有小图大图一起切换里面有教程和源码</p>
        </div>
        <div style="display:none;">
            <h4><a href="/">路边野花</a></h4>
            <p>content222...</p>
        </div>
        <div style="display:none;">
            <h4><a href="/">往事如茶</a></h4>
            <p>content333...</p>
        </div>
    </div>
    <div class="mb-img fl clearfix">
        <ul id="mb-inav" class="mb-inav fl">
            <li><a class="cur"></a></li>
            <li><a></a></li>
            <li><a></a></li>
        </ul>
        <div id="mb-ibox" class="mb-ibox fl">
            <a href="/" style="display:block;"><img width="440" height="239" src="/images/m01.jpg" alt="111" /></a>
            <a href="/"><img width="440" height="239" src="/images/m02.jpg" alt="222" /></a>
            <a href="/"><img width="440" height="239" src="/images/m03.jpg" alt="333" /></a>
        </div>
    </div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

<BR>所需js文件:<a href="/images/jquery-1.9.1.min.js" target=_blank>jquery-1.9.1.min.js</a>

<hr>
时间: 2024-10-13 21:26:18

类似选项卡竖向排版的jquery图文同步切换效果的相关文章

基于jQuery图像碎片切换效果插件FragmentFly

基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_wrap"> <div class="wrap_head"> <div id="fragment_title"> </div> </div> <div class="wrap_middle&

[Jquery]tab页面切换效果

思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个,中间每个内容都会相继显示出来.比较好的用户体验是,从某个标签迅速移到另一个标签,中间不想看的内容不显示出来.这就需要延迟切换效果(每次划每次加载信息,必将影响性能) 使用定时器:setTimeout(500毫秒),每次鼠标滑过的时候,先判断定时器存不存在,存在的话先清除定时器,然后开启定时器,执行

jquery版tab切换效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper { width: 1000px;

Jquery实现图片切换效果(IE,FF,Goole)都可以正常运行

这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) 1 <style type="text/css"> 2 3 /*展示图片切换的div样式*/ 4 #ShowImg { 5 width: 599px; 6 height: 324px; 7 background-image: url("imgs/1.jpg");/*注意自己的图片路径和图片名称*/ 8 margin: 0 auto; 9 } 10 /*显示点击切换按钮的div*

基于jQuery图文排版图片预览特效

基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 在线预览   源码下载 实现的代码. html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscreen-inner-button">&

jQuery ajax同步的替换方法,使用 $.Deferred()对象

function aa() { var defer = $.Deferred(); $.ajax({ url: "/Handler1.ashx", type: "post", success: function (data) { defer.resolve(data);//这里的data数据会传到$.when(aa()).done(function(data) data里面 } }); return defer.promise(); } $(function ()

tab 选项卡(初用jQuery)

---恢复内容开始--- 由于对JQuery不熟悉,折腾了半天...... 但不管怎么说,总算是完成了,也是一点进步. 先上完成后的代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s

18款 非常实用 jquery幻灯片图片切换

1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>>          下载地址 2.jquery图片切换插件制作图片层叠缩放展示效果 jquery图片插件制作图片等比列缩放层叠样式,图片叠加展示.点击层叠最上层的图片依次点击缩放图片层叠缩放切换. 查看演示>> 下载地址 3.jquery图像幻灯片制作大小图片切换滚动展示 jquery图像幻

如何使用jQuery实现隔行变色效果

如何使用jQuery实现隔行变色效果:隔行变色效果在网站有大量应用,尤其是在类似新闻列表这样的功能,对于行与行之间的区分有很大的好处,也提高了网站的人性化程度,虽然是个小功能,但是网站的流量都是从这样的小功能点点滴滴积累起来的.此效果可以使用CSS实现,但是由于现有浏览器对于CSS3支持度还不够好,所以使用js或者jQuery是不错的选择,下面就介绍一下如何使用jQuery实现此种效果.代码实例如下: 1 <!DOCTYPE html> 2 <html> 3 <head>