用css+jquery 实现图片滑动效果_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

用css+jquery 实现图片滑动效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:19 PM

用css+jquery 实现图片滑动效果，哪位大侠有代码。
就是那种1234点击每个都会有不同图片显示在同一个地方的。
网上有，结果发现出不来。。。

回复讨论(解决方案)

<!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>无标题文档</title><script src="http://dealer.xxauto.com/JS/jquery-1.4.2.min.js" type="text/javascript"></script><script type="text/javascript">    $(document).ready(function(){        $("#tip span").bind("click",function(){            change($(this).html());           });        change(1);    });    var change = function(id){        if (typeof(isround)!='undefined') clearTimeout(isround);        var bigimg =$("#pic img");        var smallimg = $("#tip span");        var text = $("#text p");        smallimg.each(function(i){               bigimg.eq(i).attr("class","undis");            smallimg.eq(i).attr("class","");            text.eq(i).attr("class","undis");         });        bigimg.eq(id-1).attr("class","dis");        smallimg.eq(id-1).attr("class","current");        text.eq(id-1).attr("class","dis");        var next = id >= smallimg.size()?1:parseInt(id)+1;             isround=setTimeout('change('+next+')', 4000);    }</script><style>body, p, ul, li, dd, dt, dl, ol, form, h1, h2, h3, h4, h5 { margin:0; padding:0; }body { font-size:12px; color:#000; text-align:left }i, em { font-style:normal; }img { border:none; vertical-align:middle; }ul, li { list-style:none; min-height:12px; }a { color:#555; text-decoration:none; }a:hover { color:#cc0000; text-decoration:underline; }.undis{display:none;}.dis{display:block!important;}#pic{position:absolute;top:0;left:0;z-index:9;width:308px;height:258px;}#pic img{width:308px;height:258px;float:left;}#textbg{position:absolute;left:0;bottom:0;z-index:99;width:308px;height:27px;background:url(http://mat1.gtimg.com/sports/nba2011/images/flash_bg.png);_background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="http://mat1.gtimg.com/sports/nba2011/images/flash_bg.png");}#text{position:absolute;left:0;bottom:0;z-index:999;width:308px;height:27px;line-height:27px;color:#fff;}#text p{width:100%;height:27px;line-height:27px;color:#fff;text-align:center;font-size:14px;}#text p a{color:#fff;}#tip{width:308px;height:15px;position:absolute;right:0;bottom:28px;z-index:999;text-align:right;}#tip span{width:16px;height:15px;line-height:15px;background:#7B7B7B;cursor:pointer;display:inline-block;margin-left:1px;text-align:center;color:#fff;}#tip span.current{background:#000;}</style></head><body><div id="pic">        <a href="http://zhibo.sports.qq.com/sports/1162/index.html"><img  class="undis lazy"  src="/static/imghwm/default1.png"  data-src="http://img1.gtimg.com/sports/pics/hv1/224/17/723/47017634.jpg"    border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000515.htm#p=1"><img  class="undis lazy"  src="/static/imghwm/default1.png"  data-src="http://img1.gtimg.com/sports/pics/hv1/184/194/722/46997704.jpg"    border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>         <a href="http://sports.qq.com/a/20110220/000465.htm"><img  class="undis lazy"  src="/static/imghwm/default1.png"  data-src="http://img1.gtimg.com/sports/pics/hv1/122/189/722/46996367.jpg"    border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000356.htm"><img  class="undis lazy"  src="/static/imghwm/default1.png"  data-src="http://img1.gtimg.com/sports/pics/hv1/112/185/722/46995337.jpg"    border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000417.htm"><img  class="undis lazy"  src="/static/imghwm/default1.png"  data-src="http://img1.gtimg.com/sports/pics/hv1/93/187/722/46995828.jpg"    border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000303.htm#p=2"><img  class="undis lazy"  src="/static/imghwm/default1.png"  data-src="http://img1.gtimg.com/sports/pics/hv1/20/180/722/46993970.jpg"    border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000262.htm"><img  class="undis lazy"  src="/static/imghwm/default1.png"  data-src="http://img1.gtimg.com/sports/pics/hv1/61/177/722/46993246.jpg"    border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000324.htm#p=1"><img  class="undis lazy"  src="/static/imghwm/default1.png"  data-src="http://img1.gtimg.com/sports/pics/hv1/205/181/722/46994410.jpg"    border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>    <div id="textbg"></div>        <div id="text">        <p class="undis"><a href="http://zhibo.sports.qq.com/sports/1162/index.html">正在直播全明星东西部对抗赛皇帝对决科比</a></p>        <p class="undis"><a href="http://sports.qq.com/a/20110220/000515.htm#p=1">全明星扣篮大赛格里芬击败麦基得冠军</a></p>        <p class="undis"><a href="http://sports.qq.com/a/20110220/000465.htm">全明星三分球大赛热火琼斯闪耀捧杯</a></p>        <p class="undis"><a href="http://sports.qq.com/a/20110220/000356.htm">亚特兰大队捧杯瞬间霍福德笑开怀</a></p>        <p class="undis"><a href="http://sports.qq.com/a/20110220/000417.htm">全明星技巧挑战赛库里28.2秒成功夺魁</a></p>        <p class="undis"><a href="http://sports.qq.com/a/20110220/000303.htm#p=2">科比星光大道留手脚印模成篮坛第一人</a></p>        <p class="undis"><a href="http://sports.qq.com/a/20110220/000262.htm">纳什闪电离婚内幕曝光前妻与巴博萨偷情生子</a></p>        <p class="undis"><a href="http://sports.qq.com/a/20110220/000324.htm#p=1">腾讯直击全明星美女明星黄奕现场微博爆料</a></p>        </div>        <div id="tip"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span></div>  </div></body>

你看看行不。之前改了qq的。

XML/HTML code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677nbsp;html PUBLIC "-//W3……
谢谢可以的

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles