K9 通用版 博客版 主题版 地方门户版 企业版 |   企业(ASP) 分类 使用 分享 疑问 模板 建议 帮助 错误 其他
+新建主题 [Ajax]
填写帐号密码即可完成注册
+新建话题 最新回复排序 最新主题排序 精华帖子

漂亮的JQuery的轮显大图代码(无FLASH)

12Next >

fox1383164k 发表于:10-09-02 16:01 编辑于:09-02 18:10 [添加收藏] 楼主 [回复] #Top#
fox1383164k 人气:377 积分:864 金币:3006
KC元老 灌水狂人

<link type="text/css" rel="Stylesheet" href="jquery.css" />
<script src="jquery.js" type="text/javascript"></script>


    <script type="text/javascript">
    $(document).ready(function() {
     var currentIndex = 0;
            var DEMO; //函数对象
            var currentID = 0; //取得鼠标下方的对象ID
            var pictureID = 0; //索引ID
            $("#ifocus_piclist li").eq(0).show(); //默认
            autoScroll();
            $("#ifocus_btn li").hover(function() {
                StopScrolll();
                $("#ifocus_btn li").removeClass("current")//所有的li去掉当前的样式加上正常的样式
                $(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式
                currentID = $(this).attr("id"); //取当前元素的ID
                pictureID = currentID.substring(currentID.length - 1); //取最后一个字符
                $("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示
                $("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏
                $("#ifocus_tx li").hide();
                $("#ifocus_tx li").eq(pictureID).show();
            }, function() {
                //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
                currentID = $(this).attr("id"); //取当前元素的ID
                pictureID = currentID.substring(currentID.length - 1); //取最后一个字符
                currentIndex = pictureID;
                autoScroll();
            });
            //自动滚动
            function autoScroll() {
                $("#ifocus_btn li:last").removeClass("current");
                $("#ifocus_tx li:last").hide();
                $("#ifocus_btn li").eq(currentIndex).addClass("current");
                $("#ifocus_btn li").eq(currentIndex - 1).removeClass("current");
                $("#ifocus_tx li").eq(currentIndex).show();
                $("#ifocus_tx li").eq(currentIndex - 1).hide();
                $("#ifocus_piclist li").eq(currentIndex).fadeIn("slow");
                $("#ifocus_piclist li").eq(currentIndex - 1).hide();
                currentIndex++; currentIndex = currentIndex >= 4 ? 0 : currentIndex;
                DEMO = setTimeout(autoScroll, 2000);
            }
            function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动
            {
                clearTimeout(DEMO);
            }
});
    </script>
<!-- 区块一开始 -->
<div class="content1">
<div class="top"></div>
<div class="main cl">
  <!-- FLASH切换图开始 -->
  <div class="l_flash_pic">
   <div id="ifocus">
    <div id="ifocus_pic">
     <div id="ifocus_piclist" style="left:0; top:0;">
      <ul>
{king:article type="head" number="4"}
       <li><a href="(king:path /)" target="_blank"><img src="(king:image width="570" height="225" /)" alt="(king:title /)" /></a></li>
{/king}
      </ul>
     </div>
     <div id="ifocus_opdiv"></div>
     <div id="ifocus_tx">
      <ul>
{king:article type="head" number="1"}
       <li class="current">(king:title /)</li>
{/king}
{king:article type="head" number="3" next="1" }
       <li class="normal">(king:title /)</li>
{/king}
      </ul>
     </div>
    </div>
    <div id="ifocus_btn">
     <ul>
{king:article type="head" number="1"}
      <li class="current" id="p0"><img src="(king:image width="75" height="45" /)" alt="(king:description /)" /></li>
{/king}
{king:article type="head" number="1" next="1"}
      <li id="p1"><img src="(king:image width="75" height="45" /)" alt="(king:description /)" /></li>
{/king}
{king:article type="head" number="1" next="2" }
      <li id="p2"><img src="(king:image width="75" height="45" /)" alt="(king:description /)" /></li>
{/king}
{king:article type="head" number="1" next="3"}
      <li id="p3"><img src="(king:image width="75" height="45" /)" alt="(king:description /)" /></li>
{/king}
     </ul>
    </div>
   </div>
  </div>
  <!-- FLASH切换图结束 -->
</div>
</div>
<!-- 区块一结束 -->

**************************************************
jquery.css


div,form,img,ul,ol,li,dl,dt,dd,label {margin: 0; padding: 0; border: 0;}
table,td,tr,th{font-size:12px;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
img{border:0;}
li{list-style-type:none;}
/*-------------------------------------------------------*/

/*****首页FLASH图片切换*****/
#ifocus { width:689px; height:244px;border:1px solid #DEDEDE; background:#F8F8F8;}
#ifocus_pic { display:inline; position:relative;float:left;width:570px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
  #ifocus_piclist { position:absolute; }
  #ifocus_piclist li { width:570px; height:225px; overflow:hidden; display:none}
  #ifocus_piclist img { width:570px; height:225px;}
#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0;}
  #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
  #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
  #ifocus_btn .current { background: url(images/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
#ifocus_opdiv { position:absolute; left:0; bottom:0; width:570px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
  #ifocus_tx .normal { display:none; }

**************************************************
jquery-1.3.2
jquery.js
点击打开链接
漂亮的JQuery的轮显大图代码(无FLASH)[图1]漂亮的JQuery的轮显大图代码(无FLASH)[图2]

SinCS 发表于:10-09-02 18:10 沙发 [回复] #Top#
SinCS 人气:1148 积分:28 金币:73406
VIP 管理团队 特殊贡献
似乎很不错
luke 发表于:10-09-02 23:10 板凳 [回复] #Top#
luke 人气:489 积分:1943 金币:8004
最佳新人 灌水狂人
大笑测试过没!能用就更好了
fuzhong 发表于:10-09-08 10:49 4楼 [回复] #Top#
fuzhong 人气:5 积分:79 金币:110
好东西啊,支持了
Gougliang 发表于:10-09-08 11:23 5楼 [回复] #Top#
Gougliang 人气:1401 积分:11242 金币:13771
VIP 管理团队 灌水狂人
测试过的朋友反馈下。

如果在KingCMS PHP企业版当中,jquery.js不用重复上传就能使用了。
SinCS 发表于:10-09-08 11:33 6楼 [回复] #Top#
SinCS 人气:1148 积分:28 金币:73406
VIP 管理团队 特殊贡献
jquery.js的次序很重要,一定要放在所有引用js文件的前面。
110 发表于:10-09-08 11:52 7楼 [回复] #Top#
110 人气:49 积分:61 金币:296
我好像也有一个,是从DEDE官站抠下来的,效果看desdev.cn  首页,好像比楼主这个漂亮
hs82442844 发表于:10-09-13 09:03 8楼 [回复] #Top#
hs82442844 人气:0 积分:51 金币:10
测试过的朋友反馈下
liang6314 发表于:10-09-14 18:45 9楼 [回复] #Top#
liang6314 人气:132 积分:182 金币:572
牛人
史册 发表于:10-09-15 13:00 10楼 [回复] #Top#
史册 人气:48 积分:242 金币:1898
VIP KC元老
必须顶一个

12Next >

发表回复

帐号 匿名发布 审核后可见 [加载完整在线编辑器]
内容
验证码
KingCMS 内容管理系统

关于我们 联系我们 广告报价 付款方式 站点导航

Copyright © 2004-2015 Focuznet All rights reserved.

广州唯众网络科技有限公司 粤ICP备08008106号