HTML中如何做图片切换效果,跪求代码

就是下面有数字12345,这样,来回切换,跟新浪上面那种差不多,大家应该懂我意思的,我要做5个图片的切换,尺寸是750x409px求高手解答谢谢了... 就是下面有数字12345,这样,来回切换,跟新浪上面那种差不多,大家应该懂我意思的,我要做5个图片的切换,尺寸是 750x409 px 求高手解答 谢谢了 展开
 我来答
很多游戏
高粉答主

2019-11-16 · 游戏精通者,攻略技能点满
很多游戏
采纳数:91 获赞数:386975

向TA提问 私信TA
展开全部

1、首先输入代码:

<div class="wrapper">

<div id="focus">

<ul>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>

2、然后输入代码:

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li>

3、然后再输入代码:

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li>

</ul>

</div>

</div><!-- wrapper end -->

</body>

4、然后就完成了。

百度网友2571d37bb
推荐于2017-09-13 · 知道合伙人软件行家
百度网友2571d37bb
知道合伙人软件行家
采纳数:1971 获赞数:7905
前端工程师

向TA提问 私信TA
展开全部

图片切换的效果,其实就是修改图片的距离。下面提供一个简单的图片切换效果。

效果主要做的是无缝切换图片。

<style>    
*{ margin:0; padding:0; list-style:none;}    
#box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}    
#box ul{ position:absolute; left:0; top:0;}    
#box ul li{ width:200px; height:200px; float:left; padding:5px;}    
</style>    
<script>    
window.onload=function(){    
var oBox=document.getElementById('box');    
var oUl=oBox.children[0];    
var aLi=oUl.children;    
    
//复制一份内容 ,制作出无缝的效果   
oUl.innerHTML+=oUl.innerHTML;    
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
    
setInterval(function(){   //开定时器,这样就可以自己切换,无需人工干预。 
var l=oUl.offsetLeft-10;  //图片切换,就是移动距离
if(l<=-oUl.offsetWidth/2){    
l=0;    
}    
oUl.style.left=l+'px';    
},30);    
};    
</script>    
</head>    
<body>    
<div id="box">    
    <ul>    
    <li><img src="img/1.jpg" width="200"></li>    
       <li><img src="img/2.jpg" width="200"></li>    
       <li><img src="img/3.jpg" width="200"></li>    
       <li><img src="img/4.jpg" width="200"></li>      
   </ul>    
</div>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
推荐于2017-09-19
展开全部

试试这个图片切换

有12345数字一起切换

鼠标点一下数字会变换到另一张图片,不点就会自动换

尺寸可以通过样式修改里面有教程和源码

参考资料: http://www.blueidea.com/common/shoutbox/redir.asp?1=p&id=10895

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
yang2288
2010-07-18
知道答主
回答量:47
采纳率:0%
帮助的人:27万
展开全部
老兄啊,你网站是后台是什么程序语言,光html肯定做不到哦。讲清楚的话高手才会帮到你。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式