网站首页轮播图怎么做简单?

发布网友

我来回答

共6个回答

懂视网

效果图

思路分析：

　　1、开启一个定时器

　　　　方法名：window.setInterval(code,MilliSec)，每隔指定的时间就执行code，无限次执行。

　　2、定时器函数主要是用来执行图片轮播的效果

　　3、当鼠标放在图片上面时，图片就停止了轮播的效果清除了定时器

　　　　方法名：window.clearInterval (timer），清除指定的定时器。

　　4、当鼠标离开图片上面时，图片继续在执行轮播的效果重新开启了定时器功能

　　5、当鼠标放在li标签上面时，图片就停止了轮播的效果清除了定时器

　　6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片

　　7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果重新开启了定时器功能

　　8、li标签上面的高亮效果，它是随着图片滚动而滚动。

HTML代码

<body>
<div id="content">
 <!--轮换显示的横幅广告图片-->
 <div class="scroll_top"></div>
 <div class="scroll_mid"> 
 <img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" οnmοuseοver="stopScroll()" οnmοuseοut="goon()"/>
  <div id="scroll_number">
  <ul>
   <li class="scroll_number_over" οnmοuseοver="stopScroll(1)" οnmοuseοut="goon()">1</li>
   <li οnmοuseοver="stopScroll(2)" οnmοuseοut="goon()">2</li>
   <li οnmοuseοver="stopScroll(3)" οnmοuseοut="goon()">3</li>
   <li οnmοuseοver="stopScroll(4)" οnmοuseοut="goon()">4</li>
   <li οnmοuseοver="stopScroll(5)" οnmοuseοut="goon()">5</li>
   <li οnmοuseοver="stopScroll(6)" οnmοuseοut="goon()">6</li>
  </ul>
  </div>
 </div>
 <div class="scroll_end"></div>
</div>
</body>

JS代码

<script type="text/javascript">
window.οnlοad=function(){
timer=setInterval("imgScroll()",500);
var scroll_number=document.getElementById('scroll_number');
scrLi=scroll_number.getElementsByTagName('li');
scrLiLen=scrLi.length;
}
var n=2;
function imgScroll(){
for(var i=0;i<scrLiLen;i++){
scrLi[i].className="";
}
scrLi[n-1].className="scroll_number_over";
var imgObj=document.getElementById('dd_scroll');
imgObj.src="images/dd_scroll_"+n+".jpg";
n++;
if(n>6){
n=1;
}
}
function stopScroll(imgN){
if(imgN){
n=imgN;
imgScroll();
}
clearInterval(timer);
}
function goon(){
timer=setInterval('imgScroll()',500);
}
</script>

热心网友

首页轮播图是网站基础功能，最简单的手机拍照后修饰下就能做轮播图了。需要注意的是，不要随便从网上下载图片，这种有可能涉及到侵权。购买了版权的图片那就随意用吧。

热心网友

是找插件嘛？，单独可以用swiper。
项目如果有其它UI框架，一般都有轮播组件。

热心网友

如果不会PS软件，可以用WORD打好后，用聊天软件截图就行了。

热心网友

做ppt最简单。然后再到用网上免费版图加自己设计最好。

热心网友

最简单的就是自己切换，点击切换，多少要使用一点jq代码

全部栏目

网站首页轮播图怎么做简单?