JS 控制网页轮播图片的自动,按钮,导航原点转换

<script type="text/javascript">
//实现进入轮播区域，显示按钮

 //banner-item是div大盒子里面的id

//获取轮播图片、轮播按钮、轮播导航点三部分 但是有四个ul

var bannerItems = bannerItem.getElementsByTagName("ul");

var bannerNav = bannerItems[0];

var bannerImage = bannerItems[1];

var bannerBtn = bannerItems[2];

var bannerDotted = bannerItems[3];

//当鼠标进入轮播区域时，显示轮播按钮ul区域

//添加鼠标悬停事件

bannerItem.onmouseover = function(){

bannerBtn.style.display = "block";    };

bannerItem.onmouseout = function(){

bannerBtn.style.display = "none";    };

//点击按钮实现图片切换

//获取到每一个按钮，图片列表和导航圆点列表

//SHs数组永远是从零开始的

var preBtn = bannerBtn.getElementsByTagName("li")[0];

var nextBtn = bannerBtn.getE
4000
lementsByTagName("li")[1];

var bannerImages = bannerImage.getElementsByTagName("li");

var bannerDotteds = bannerDotted.getElementsByTagName("li");

//下标计数器

var _index = 0;

//添加点击事件    preBtn.onclick = function(){

//上一张

//根据下标来改变图片的显示

_index--;

if(_index<0){

_index = 6;

}

changeImg(_index);    };

//下一张图片

nextBtn.onclick = function(){

//根据下标来改变图片的显示

//++xunhuxunha循环

_index++;

if(_index>6){

_index = 0;

}

changeImg(_index);    };

//导航点悬停控制图片

for(var i=0;i<bannerDotteds.length;i++)

{        bannerDotteds[i].index = i;

bannerDotteds[i].onmouseover = function(){

changeImg(this.index);

_index = this.index;

}    }

//时间循环自动切换

var mySi = setInterval(function(){

_index++;

if(_index>6){

_index=0;        }

changeImg(_index);    },5000);

//切换图片与导航点样式

function changeImg(index){

//清除其他li的类名

for(var i=0;i<bannerImages.length;i++){

bannerImages[i].className = "";

bannerDotteds[i].className = "";        }

//通过类名的修改来改变样式

bannerImages[index].className = "show";

bannerDotteds[index].className = "red-dotted";    }</script>