用JS实现图片轮播效果代码(一).doc

　　这篇文章主要介绍了用JS实现图片轮播效果代码（一）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
　　一.实现原理
　　（1）将所有图片放在一个父容器div里面，通过display属性来设置图片的出现与隐藏；
　　（2）轮播图分为手动轮播和自动轮播；
　　手动轮播的重点是每次点击图片下方的小圆圈，获得它的索引号，并让与之对应索引号的图片显示，并且此时的小圆圈为高亮显示；
　　自动轮播：利用定时器setInterval()，来每隔一定的时间来播放一次图片。
　　（3）所有的基础知识：dom操作，定时器，事件运用。
　　二.轮播图页面布局：
　　<div id="content"> <!-- 总的父容器 -->
　　<div class="carousel-inner"> <!-- 包含图片的容器 -->
　　<div class="item "><img src="./img/lunbo1.jpg" alt="第一张图片"></div>
　　<div class="item"><img src="./img/lunbo2.jpg" alt="第二张图片"></div>
　　<div class="item"><img src="./img/lunbo3.jpg" alt="第三张图片"></div>
　　</div>
　　<!-- 图片下方的指示圆圈-->
　　<ul class="carousel-indicators">
　　<li id='pic1'>●</li>
　　<li id='pic2'>●</li>
　　<li id='pic3'>●</li>
　　</ul>
　　<!-- 图片左右方来回滚动图片的左右箭头-->
　　<a href="#" class="carousel-control prev"><span><</span></a>
　　<a href="#" class="carousel-control next"><span>></span></a>
　　</div>
　　三.轮播图的css样式：
　　#content{
　　width: 100%;
　　height:500px;
　　position: relative;
　　}
　　.carousel-inner{
　　position: relative;
　　width: 100%;
　　overflow: hidden;
　　height:500px;
　　}
　　.carousel-inner>.item>img{
　　display: block;
　　line-height: 1;
　　z-index: 1;
　　}
　　.carousel-indicators{
　　position: absolute;
　　bottom:10px;
　　left:45%;
　　z-index: 2;
　　list-style-type: none;
　　}
　　.carousel-indicators li{
　　display:inline-block;
　　padding: 0 15px;
　　font-size: 24px;
　　color:#999;
　　cursor: pointer;
　　z-index: 2;
　　}
　　.active1{
　　font-size: 28px;
　　color:#fff;
　　}
　　.carousel-control{
　　position: absolute;
　　text-decoration:none;
　　color: #999;
　　font-weight: bold;
　　opacity: .5;
　　font-size: 40px;
　　z-index: 3;
　　}
　　.carousel-control:hover{
　　color:fff;
　　text-decoration: none;
　　opacity: .9;
　　outline: none;
　　font-size: 42px;
　　}
　　.prev{
　　top: 30%;
　　left:20px;
　　}
　　.next{
　　top:30%;
　　right: 20px;
　　}
　　四.轮播图的js实现代码：
　　window.onload = function(){
　　//轮播初始化
　　var lunbo = document.getElementById('content');
　　var imgs = lunbo.getElementsByTagName('img');
　　var uls = lunbo.getElementsByTagName('ul');
　　var lis = lunbo.getElementsByTagName('li');
　　//初始状态下，一个圆圈为高亮模式
　　lis[0].style.fontSize = '26px';
　　lis[0].style.color = '#fff';
　　//定义一个全局变量，用来进行自动轮播图片顺序的变化
　　var pic_index = 1;
　　//自动轮播.使用pic_time记录播放，可以随时使用clearInterval()清除掉。
　　var pic_time = setInterval(autobofang,3000);
　　//手动轮播
　　for(var i=0;i<lis.length;i++){
　　lis[i].addEventListener("mouseover",change,false);
　　}
　　function change(event){
　　var event=event||window.event;
　　var target=event.target||event.srcElement;
　　var children = target.parentNode.children;
　　for(var i=0;i<children.length;i++){
　　if(target == children[i]){
　　picChange(i);
　　}
　　}
　　}
　　//图片切换函数
　　function picChange(i){
　　//让所有图片都不显示，所有圆圈都为普通样式
　　for(var j=0;j<imgs.length;j++){
　　imgs[j].style.display = 'none'; lis[j].style.fontSize = '24px';
　　lis[j].style.color = '#999';
　　}
　　//让选中的索引的图片显示，对应的圆圈高亮
　　imgs[i].style.display = 'block';
　　lis[i].style.fontSize = '26px';
　　lis[i].style.color = '#fff';
　　}
　　//自动播放的事件处理
　　function autobofang(){
　　if(pic_index >= lis.length){
　　pic_index = 0;
　　}
　　change1(pic_index);
　　pic_index++;
　　}
　　//自动播放的图片转化中的事件
　　function change1(index){
　　picChange(index);
　　//鼠标移入ul标签，自动播放图片暂停
　　uls[0].addEventListener("mouseover",pause,false);
　　//鼠标移出ul标签，自动播放图片继续
　　uls[0].addEventListener("mouseout",go,false);
　　}
　　//自动播放暂停函数
　　function pause(event){
　　var event=event||window.event;
　　var target=event.target||event.srcElement;
　　switch(target.id){
　　case "pic1":
　　clearInterval(pic_time);
　　break;
　　case "pic2":
　　clearInterval(pic_time);
　　break;
　　case "pic3":
　　clearInterval(pic_time);
　　break;
　　}
　　}
　　//自动播放图片继续函数
　　function go(event){
　　var event=event||window.event;
　　var target=event.target||event.srcElement;
　　switch(target.id){
　　case "pic1":
　　pic_index = 1;
　　pic_time = setInterval(autobofang,3000);
　　break;
　　case "pic2":
　　pic_index = 2;
　　pic_time = setInterval(autobofang,3000);
　　break;
　　case "pic3":
　　pic_index = 3;
　　pic_time = setInterval(autobofang,3000);
　　break;
　　}
　　}
　　}
　　六.遇到的问题与不足
　　问题：当鼠标第一次移入ul标签时，自动轮播图片停止，鼠标移出，自动轮播继续，但是随着运行，轮播图片的变化速度越来越快，而且这时点击ul标签已经不起作用了。
　　问题原因：在后面停止轮播后再次轮播开始使用定时器的时候，没有给赋值给pic_time来记录，也就没有再次鼠标移到ul标签而清除定时器，因此导致再次点击ul标签不能暂停自动轮播播放，而且速度 越来越快。
　　不足：没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果，左右箭头的指示作用也没有完成。这些在后期会继续学习，继续来完善，来分享.