< >是 摆好DIV框
简单的就是中间DIV是放个img，切换的时候替换
体验好一点的就是div里面放ul li里面放上所有
无缝滚动就把ul left或者right移动 水平放置li 溢出的隐藏 判断是否首尾，然后重置或者不动这个应该不用说了
改好了， 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=">
var len = $("num > li")length;//获取长度（相当于是有多少张）
var index = 0; //序号
var adTimer; //定时器
//滚动广告
$("num li")mouseover(function() {
index = $("num li")index(this); //获取鼠标悬浮 li 的index
showImg(index); //执行滚动方法，传index进来就是当用户滑到第几张的时候就显示第几张
})eq(0)mouseover();//触发鼠标经过第一张，eq(0)指的是第一张
//滑入停止动画，滑出开始动画
$('banner_a')hover(function() {
clearInterval(adTimer); //当鼠标移动到上，关掉定时器，就是不在让滚动
}, function() {
adTimer = setInterval(function() { //离开的时候开定时器，继续滚动
showImg(index) //执行方法
index++;
if (index == len) { //最后一张之后，转到第一张
index = 0;
}
}, 1000);
})trigger("mouseleave"); //程序进来就触发鼠标离开事件，即让滚动
function showImg(index) { //滚动函数
var adHeight = $("bannerul>li:first")height();
//传index索引进来，就是当第几张鼠标经过的时候，第几张就滚动起来，比如，鼠标移动到第2张， $("bannerul")的marginLeft就往左移动-adHeight index + "px"
$("bannerul")stop(true, false)animate({
"marginLeft":-adHeight index + "px" //改变 marginTop 属性的值达到轮播的效果
});
$("num li")removeClass("on") //先把所有的li的on类名移除，再让当前的li添加on类名
eq(index)addClass("on");
}
<style>
{
margin: 0%;
padding: 0%;
}
box{
width: 340px;
border: 1px solid blue;
margin: 10px auto;
}
box h1{
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
}
ul li{
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
ul li:last-child{
border-bottom: none;
}
</style>
</head>
<body>
<div class="box">
<h1>
祝福冬奥
</h1>
<ul>
<li>贝克汉姆</li>
<li >姚明</li>
<li>张宏</li>
<li>肖恩怀特</li>
</ul>
</div>
<script src="/jquery-1124js"></script>
<script>
/ jQuery的链式调用 /
/ $('div')$('div')text('我是学生')css('color','red')attr({name:'zhangsan',age:30}) /
/ 链式调用的原理jq里面的方法都会return this 把当前调用者return出去实现链式调用 /
/ $('ul li')first()css('background','yellow')end()eq(1)css('background','red') /
/ 获取的只是content里面的距离,不包括padding margin border里面的距离 /
/ 返回以像素为单位的top和left的坐标,仅对可见元素有效 /
/ top和left值都会包括自己的margin和父元素border的值 /
consolelog($('div2')offset()top);
consolelog($('ul')width());
consolelog($('ul')height());
/ offsetParent 返回最近的自己定位的祖先元素 /
consolelog($('div2')offsetParent());
/ position() 返回第一个匹配元素相对于父元素的位置 /
consolelog($('div')position());
/ scrollLeft([position]) 参数可选,设置返回匹配元素相对滚动条左侧的偏移/
/ 设置滚动条的距离 /
$(window)scrollLeft(100)
/ 获取滚动条的距离 /
$(window)scroll(function(){
consolelog($(document)scrollLeft());
})
</script>
<style>
div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
div2{
width: 200px;
height: 200px;
background-color: red;;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
<script src="/jquery-1124js"></script>
<script>
/ mouseenter mouseleave 在进入子元素区域时不会触发
mouseover 和mouseout 会触发 /
/ $('div1')mouseenter(function(){
$(this)css('background','green')
})
$('div1')mouseleave(function(){
$(this)css('background','yellow')
}) /
/ 由mouseenter 和mouseleave组成 /
$('div1')hover(function(){
$(this)css('background','yellow')
consolelog(1);
})
</script>
<style>
{
margin: 0%;
padding: 0%;
}
box{
width: 340px;
border: 1px solid blue;
margin: 10px auto;
}
box h1{
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
}
ul li{
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
ul li:last-child{
border-bottom: none;
}
</style>
</head>
<body>
<div class="box">
<h1>
祝福冬奥
</h1>
<ul>
<li>贝克汉姆</li>
<li >姚明</li>
<li>张宏</li>
<li>肖恩怀特</li>
</ul>
</div>
<script src="/jquery-1124js"></script>
<script>
/ $('li:eq(0)')mouseenter(function(){
$(this)css('background','red')
})
$('li:eq(0)')mouseout(function(){
$(this)css('background','')
}) /
$('li')hover(function(){
/ css('background','')不会改变元素原来bgc样式 /
$('li')first()css('background','red')siblings()css('background','')
})
$('li:eq(1)')mouseenter(function(){
$(this)css('background','yellow')
})
$('li:eq(1)')mouseout(function(){
$(this)css('background','')
})
</script>
<style>
box{
margin: 30px auto;
width: 500px;
height: 300px;
border: 1px solid cyan;
position: relative;
}
img-list img{
width: 500px;
height: 300px;
display: block;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="img-list">
<img src="/imgs/1jpg" alt="">
<img src="/imgs/2jpg" alt="">
<img src="/imgs/3jpg" alt="">
<img src="/img/4jpg" alt="">
</div>
</div>
<button style="margin-left: 450px;" class="left">后退</button>
<button class="right">前进</button>
<script src="/jquery-1124js"></script>
<script>
/ 定时器 过2s 显示一张图 显示最后一张图的时候再跳回第一张 /
/ let i = 0
$('img')eq(0)show()siblings()hide();
setInterval(function(){
i++;
if(i==$('img')length){
i=0
} /
/ 淡入淡出 /
/ $('img')eq(i)fadeIn('slow')siblings()fadeOut('slow')
},2000) /
let i = 0;
let timer = null
$('img')eq(i)show()siblings()hide();
/ 自动播放 /
show();
$('left')click(function(){
/ 先清空定时器 阻止自动播放 /
clearInterval(timer);
i--;
/ 防止减到-1找不到对应的 /
if(i == -1){
i=$('img')length - 1
}
/ 展示当前对应的其他淡出 /
$('img')eq(i)show()siblings()hide();
/ 继续开始自动播放 /
show();
})
$('right')click(function(){
/ 先清空定时器 阻止自动播放 /
clearInterval(timer);
i++;
/ 防止减到-1 找不到对应的 /
if(i==$('img')length){
i=0
}
/ 展示当前对应的其他淡出 /
$('img')eq(i)show()siblings()hide();
/ 继续开始自动播放 /
show()
/ 定时器 过两秒 显示一张图 显示最后一张图的时候
再跳到第一张 /
})
function show(){
timer = setInterval(function (){
i++;
if(i == $('img')length){
i = 0
}
/ fadeIn 淡入 fadeOut淡出 /
$('img')eq(i)fadeIn()siblings()fadeOut();
},2000)
}
</script>
<body>
用户名:<input type="text"><br>
密码: <input type="password">
<script src="/jquery-1124js"></script>
<script>
/ 按下键盘 /
/ $('input[type=text]')keydown(function(){
alert('我按下了')
}) /
/ 抬起键盘 /
/ $('input[type=password]')keyup(function(){
alert('我抬起了')
}) /
/ keypress 连续敲击键盘 /
/ $('input[type=text]')keypress(function(){
alert('连续打字')
}) /
$(window)keyup(function(e){
if(ekeyCode==13){
alert('已提交')
}
})
</script>
</body>
以上就是关于jquery图片轮播效果，多图带左右箭头，下面小图片可以有很多张全部的内容，包括:jquery图片轮播效果，多图带左右箭头，下面小图片可以有很多张、关于源生JS实现图片轮播问题、html的问题请教：我用jquery做的轮播图问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）