JS网页设计里面，轮播图片，未设置初始值，想进入该网页后，自动默认选定第一个切换如何增加函数。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS网页设计里面，轮播图片，未设置初始值，想进入该网页后，自动默认选定第一个切换如何增加函数。相关的知识，希望对你有一定的参考价值。
图片上面是目前的状态。想变成下半部分图片的效果。 应该在JS中哪部位加什么函数代码？
function slideMouse(imgname,imgpath)
var banner_title = document.getElementById("banner_title");
var imgurl = document.getElementById("imgurl");
for(var im=0; im<imgname.length; im++)
imgname[im] = imgpath + imgname[im];
var links = banner_title.getElementsByTagName("a");
for(var i=0; i<links.length; i++)
links[i].name = i;
links[i].onmouseover = function()
clearClassName();
this.className = "slidenow";
imgurl.href = this.href;
imgurl.firstChild.src = imgname[this.name];
function clearClassName()
var banner_title = document.getElementById("banner_title");
var links = banner_title.getElementsByTagName("a");
for(var j=0; j<links.length; j++)
links[j].className = "";
var nowspace = 0;
function slideLoop()
var banner_title = document.getElementById("banner_title");
var imgurl = document.getElementById("imgurl");
var links = banner_title.getElementsByTagName("a");
if(nowspace == links.length - 1)
nowspace = 0;
else
nowspace += 1;
clearClassName();
imgurl.href = links[nowspace].href;
links[nowspace].className = "slidenow";
imgurl.firstChild.src = arguments[0][nowspace];
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?7=p&id=10895
参考技术A 你可以在 body里设置下 onload事件啊~~让它上来就选中第一个图~~~根据点击事件改下~~~~你这点儿代码我也没法试啊...要贴就贴全嘛追问放不下。。不然会全写。。在body中加什么事件，帮忙定义一个默认选中的事件，
第一个图片名称3.jpg
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标签不能暂停自动轮播播放，而且速度 越来越快。
不足：没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果，左右箭头的指示作用也没有完成。这些在后期会继续学习，继续来完善，来分享.
本文出自 “梦想需要坚持” 博客，请务必保留此出处http://xiyin001.blog.51cto.com/9831864/1792429
以上是关于JS网页设计里面，轮播图片，未设置初始值，想进入该网页后，自动默认选定第一个切换如何增加函数。的主要内容，如果未能解决你的问题，请参考以下文章