HTML中如何做图片切换效果,跪求代码
发布网友
发布时间：2022-04-23 03:29
共4个回答
热心网友
时间：2022-04-19 07:38
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、然后就完成了。
热心网友
时间：2022-04-19 08:56
试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
尺寸可以通过样式修改里面有教程和源码
参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?1=p&id=105
热心网友
时间：2022-04-19 10:31
图片切换的效果，其实就是修改图片的距离。下面提供一个简单的图片切换效果。
效果主要做的是无缝切换图片。
<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>
热心网友
时间：2022-04-19 12:22
老兄啊，你网站是后台是什么程序语言，光html肯定做不到哦。讲清楚的话高手才会帮到你。
