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

WBOY
Release: 2016-06-24 12:19:21
Original
1601 people have browsed it

用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>
Copy after login


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

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!