jQuery图文滚动点击图片切换代码

  • L0_224862
    了解作者
  • 311.6KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 05:04
    上传日期
jQuery图文滚动点击图片切换代码,点击实例中左侧城市按钮,能控制右边图文左右滚动切换,点击网页右侧城市介绍图文箭头按钮,也能控制左侧城市切换,支持图片自动切换,源码之家推荐下载!
tuwengundong.rar
  • jQuery图文滚动点击图片切换代码
  • index.html
    7KB
  • images
  • bd_btn.jpg
    3.1KB
  • bd_bg1.jpg
    14.5KB
  • bd_photo8.jpg
    34.4KB
  • bodyBg3.jpg
    307B
  • bd_lbtn.jpg
    568B
  • bd_photo7.jpg
    20.5KB
  • bd_photo1.jpg
    34.4KB
  • hbd_rbtn.jpg
    13.2KB
  • bd_photo9.jpg
    34.4KB
  • bd_photo12.jpg
    34.4KB
  • bd_photo5.jpg
    27.6KB
  • bd_photo11.jpg
    34.4KB
  • bd_photo10.jpg
    34.4KB
  • bd_photo2.jpg
    31.7KB
  • bd_rbtn.jpg
    550B
  • bodyBg2.jpg
    306B
  • bodyBg.jpg
    307B
  • hbd_lbtn.jpg
    13.3KB
  • bd_photo4.jpg
    19.7KB
  • bd_photo6.jpg
    17.3KB
  • bd_photo3.jpg
    27.7KB
  • js
  • jquery.js
    90.6KB
  • css
  • global.css
    2.5KB
内容介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery图文滚动点击图片切换代码 - 源码之家</title> <link href="css/global.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div style="background:#FFF; padding:50px;"> <!--效果开始--> <div class="bd_con4"> <div class="bd_t3">源码之家www.mycodes.net</div> <div class="bd_c4l"> <ul> <li class="bd_cutLi">南京</li> <li>上海</li> <li>武汉</li> <li>西安</li> <li>长春</li> <li>大连</li> <li>成都</li> <li>杭州</li> <li>沈阳</li> <li>合肥</li> <li>长沙</li> <li>郑州</li> </ul> </div> <div class="bd_c4r"> <div class="bd_c4top"> <a href="#" class="bd_lbtn" rel='nofollow' onclick='return false;'></a> <div class="bd_chgBox"> <div class="bd_long"> <ul> <li> <div class="bc_chgTitle">南京基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">上海基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">武汉基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">西安基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">长春基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">大连基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">成都基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">杭州基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">沈阳基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">合肥基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">长沙基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> <li> <div class="bc_chgTitle">郑州基地</div> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> <p><a href="#" target="blank" rel='nofollow' onclick='return false;'>介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...</a></p> </li> </ul> </div> </div> <a href="#" class="bd_rbtn" rel='nofollow' onclick='return false;'></a> </div> <center> <a href="#" target="blank" rel='nofollow' onclick='return false;'></a> </center> </div> </div> <script language="javascript"> var cutItm=0; function autoPlay(){ cutItm++; if(cutItm>11){ cutItm=0; } $(".bd_c4l li").removeClass("bd_cutLi"); $(".bd_c4l li").eq(cutItm).addClass("bd_cutLi"); var leftVal=cutItm*268; $(".bd_long").animate({left:-leftVal},500); } var timeer=setInterval(autoPlay,3000); $(".bd_c4l,.bd_c4top").hover(function(){clearInterval(timeer)},function(){timeer=setInterval(autoPlay,3000);}); $(".bd_c4l li").click(function(){ cutItm=$(".bd_c4l li").index(this); $(".bd_c4l li").removeClass("bd_cutLi");$(this).addClass("bd_cutLi"); var leftVal=cutItm*268; $(".bd_long").animate({left:-leftVal},500); }); $(".bd_lbtn").click(function(){ cutItm--; if(cutItm<0){ cutItm=11; } $(".bd_c4l li").removeClass("bd_cutLi"); $(".bd_c4l li").eq(cutItm).addClass("bd_cutLi"); var leftVal=cutItm*268; $(".bd_long").animate({left:-leftVal},500); }); $(".bd_rbtn").click(function(){ cutItm++; if(cutItm>11){ cutItm=0; } $(".bd_c4l li").removeClass("bd_cutLi"); $(".bd_c4l li").eq(cutItm).addClass("bd_cutLi"); var leftVal=cutItm*268; $(".bd_long").animate({left:-leftVal},500); }); </script> <!--End--> </div> <div style="text-align:center;"> <p>来源:<a href="http://www.mycodes.net/" target="_blank" rel='nofollow' onclick='return false;'>源码之家</a></p> </div> </body> </html>
评论
    相关推荐
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jquery1.32
      jquery-1.3.2.min.js 最新 jquery-1.2.6-vsdoc-cn.js 中文注释版 jquery-1.2.6.pack.js 压缩后的直接使用(推荐) jquery-1.2.6.min.js 精简的版本(学习用) jquery-1.2.6.js 学习用的(97k) jquery_0.js 初始版
    • JQuery资料
      JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 ...
    • jqueryDemo
      初学jquery的非常不错的demo (描述重点就可以了啊。还要有字数的限制。。 初学jquery的非常不错的demo 初学jquery的非常不错的demo 初学jquery的非常不错的demo )
    • jquery
      jquery
    • jquery
      Ajax使用例子(jQuery)
    • JQuery
      jQuery查询