简单写了写，比较懒就没把放到右边，自己调一下，哦对了，我没加轮播
css部分
<style>ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
vertical-align: middle;
}
box {
width: 450px;
margin: 0 auto;
}
big {
width: 450px;
}
small {
height: 58px;
width: 380px;
margin: 0 auto;
}
small li {
float: left;
height: 58px;
width: 58px;
margin: 0 9px;
cursor: pointer;
}
small li img {
border: 1px solid #fff;
}
small lihover img, small li:hover img {
border-color: #1ab;
}
</style>
html+js
<div class="box"><div class="big">
<img src="images/1jpg" alt="big">
</div>
<ul class="small">
<li class="hover"><img src="images/1sjpg" alt="1"></li>
<li><img src="images/2sjpg" alt="2"></li>
<li><img src="images/3sjpg" alt="3"></li>
<li><img src="images/4sjpg" alt="4"></li>
<li><img src="images/5sjpg" alt="5"></li>
</ul>
</div>
<script>
// js方法实现
var imgs=['1jpg','2jpg','3jpg','4jpg','5jpg']; // 每个大图的文件名
var big=documentgetElementsByClassName('big')[0];
var img=biggetElementsByTagName('img')[0]; // 获取big中的img标签
var small=documentgetElementsByClassName('small')[0]; // 加上[0]表示第一个类名为small的元素
var lis=smallgetElementsByTagName('li'); // 获取ulsmall下的所有li标签
for(var i=0;i<lislength;i++){
lis[i]index=i; // 给每个li元素贴一个序号
lis[i]onmouseover=function(){ // 添加鼠标滑过效果
consolelog(thisindex);
for(var i=0;i<lislength;i++){
lis[i]className=''; // 通过循环将所有li的class清空
}
thisclassName='hover'; // 当前鼠标滑过的li添加class="hover"
imgsrc='images/'+imgs[thisindex]; // 修改大图为对应
}
}
</script>
//轮播器
var crs_num=1
function interval(){
carousel=setInterval(function(){
num2=crs_num-800
$('crs_img')animate({
attr:'x',
target:num2,
time:50,
speed:10,
})
$('crs_words p')html($('crs_img img')getnum(crs_num)attr('alt'))
$('#carousel li')css('color','#999')
$('#carousel li')getnum(crs_num)css('color','#333')
crs_num++;
if(crs_num==3)crs_num=0;
},3000)
}
interval();
$('#carousel li')hover(function(){
var num=$(this)childNum()-800
clearInterval(carousel)
$('crs_img')animate({
attr:'x',
target:num,
time:50,
speed:5,
})
$('crs_words p')html($('crs_img img')getnum($(this)childNum())attr('alt'))
$('#carousel li')css('color','#999')
$(this)css('color','#333')
},function(){
interval()
})
animate是自己封装的，可能和jq不兼容
改好了， chrome下没问题。 你出错在这一行： i>0(i--):(i=oLilength-1) oLilength-1,即最后一张上一张
<!doctype html><html>
<head>
</head>
<body>
<script>
windowonload=function(){
changeImages();
function changeImages(){ //将自动轮播，点击切换，列表同步切换封装在函数changeImages中，直接调用执行；
var oList=documentgetElementById("list");
var oDiv=documentgetElementById("div2");
var oInput=documentgetElementById("next");
var oInput2=documentgetElementById("upper");
var oLi=oDivgetElementsByTagName("li");
var oLi1=oListgetElementsByTagName("li");
var i=0;//记录点击次数
var speed=3000;
var change=setInterval(function (){
clearInterval();
for(var a=0;a<oLilength;a++){
oLi[a]className=" ";
oLi1[a]className=" ";
}
(i<oLilength-1)(i++):(i=0);
oLi[i]className="show";
oLi1[i]className="show1";
},speed)
oInputonclick=function(){ //下一张
for(var a=0;a<oLilength;a++){
oLi[a]className=" ";
oLi1[a]className=" ";
}
(i<oLilength-1)(i++):(i=0);
oLi[i]className="show";
oLi1[i]className="show1";
};
oInput2onclick=function(){
for(var a=0;a<oLilength;a++){
oLi[a]className=" ";
oLi1[a]className=" ";
}
i>0(i--):(i=oLilength-1); oLilength-1;
oLi[i]className="show";
oLi1[i]className="show1";
};
for (var a=0;a<oLi1length;a++){ //实现鼠标移动到列表，自动切换到对应功能，其原理与选项卡原理基本一致；
oLi1[a]index=a; //这里变量名必须统一，如果将后面a改为i，那么i=0将会执行两次，导致第一次点击下一张失效
oLi1[a]onmouseover=function (){
for(var i=0;i<oLi1length;i++){
oLi[i]className=" ";
oLi1[i]className=" ";
};
oLi[thisindex]className="show";
thisclassName="show1";
};
}}
};
</script>
<div id="div1">
<input id="upper" type="button" value="上一张"></input>
<input id="next" type="button" value="下一张"></input>
<div id="div2">
<ul>
<li class="show"><img src=">
以上就是关于网页图片轮播 如何 用jq实现相互对应切换全部的内容，包括:网页图片轮播 如何 用jq实现相互对应切换、图片自动播放轮播JQ，js代码。、关于源生JS实现图片轮播问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）