Heim > Web-Frontend > HTML-Tutorial > 用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:19:21
Original
1673 Leute haben es durchsucht

用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  src="http://img1.gtimg.com/sports/pics/hv1/224/17/723/47017634.jpg" class="undis" border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000515.htm#p=1"><img  src="http://img1.gtimg.com/sports/pics/hv1/184/194/722/46997704.jpg" class="undis" border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>         <a href="http://sports.qq.com/a/20110220/000465.htm"><img  src="http://img1.gtimg.com/sports/pics/hv1/122/189/722/46996367.jpg" class="undis" border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000356.htm"><img  src="http://img1.gtimg.com/sports/pics/hv1/112/185/722/46995337.jpg" class="undis" border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000417.htm"><img  src="http://img1.gtimg.com/sports/pics/hv1/93/187/722/46995828.jpg" class="undis" border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000303.htm#p=2"><img  src="http://img1.gtimg.com/sports/pics/hv1/20/180/722/46993970.jpg" class="undis" border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000262.htm"><img  src="http://img1.gtimg.com/sports/pics/hv1/61/177/722/46993246.jpg" class="undis" border="0" alt="用css+jquery 实现 图片滑动效果_html/css_WEB-ITnose" ></a>        <a href="http://sports.qq.com/a/20110220/000324.htm#p=1"><img  src="http://img1.gtimg.com/sports/pics/hv1/205/181/722/46994410.jpg" class="undis" 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>
Nach dem Login kopieren


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

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage