左右按钮控制轮播图切换，用jquery怎么写，不用框架，代码如下
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:796px;
margin:50px auto;
position:relative;
height:296px;
}
#img-box img{
position:absolute;
}
#uls{
position:absolute;
width:100%;
text-align:center;
bottom:0px;
list-style:none;
}
#uls li{
width:30px;
height:30px;
line-height:30px;
background:white;
border-radius:10px;
display:inline-block;
}
button{
position:absolute;
top:50%;
display:none;
}
button#prev{
left:10px;
}
button#next{
right:10px;
}
</style>
</head>
<body>
<div id="box">
<div id="img-box">
<img src="image/12.jpg" alt="">
<img src="image/13.jpg" alt="">
<img src="image/14.jpg" alt="">
<img src="image/15.jpg" alt="">
<img src="image/16.jpg" alt="">
<img src="image/17.jpg" alt="">
<img src="image/18.jpg" alt="">
<img src="image/19.jpg" alt="">
</div>
<ul id="uls">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<button id="prev"><</button>
<button id="next">></button>
</div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
var time,len;
var index=0
len = $('#uls li').length;
function slide(){
$('#uls li').css('background','white');
$('#uls li').eq(index).css('background','red');
$('#img-box img').fadeOut();
$('#img-box img').eq(index).fadeIn()
index++;
if(index==len){
index=0
}
}
time=setInterval(slide,1000);
$('#box').hover(function(){
clearInterval(time);
$('#prev,#next').css('display','block');
},function(){
time=setInterval(slide(),1000);
$('#prev,#next').css('display','none');
})
</script>
</html> 展开
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:796px;
margin:50px auto;
position:relative;
height:296px;
}
#img-box img{
position:absolute;
}
#uls{
position:absolute;
width:100%;
text-align:center;
bottom:0px;
list-style:none;
}
#uls li{
width:30px;
height:30px;
line-height:30px;
background:white;
border-radius:10px;
display:inline-block;
}
button{
position:absolute;
top:50%;
display:none;
}
button#prev{
left:10px;
}
button#next{
right:10px;
}
</style>
</head>
<body>
<div id="box">
<div id="img-box">
<img src="image/12.jpg" alt="">
<img src="image/13.jpg" alt="">
<img src="image/14.jpg" alt="">
<img src="image/15.jpg" alt="">
<img src="image/16.jpg" alt="">
<img src="image/17.jpg" alt="">
<img src="image/18.jpg" alt="">
<img src="image/19.jpg" alt="">
</div>
<ul id="uls">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<button id="prev"><</button>
<button id="next">></button>
</div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
var time,len;
var index=0
len = $('#uls li').length;
function slide(){
$('#uls li').css('background','white');
$('#uls li').eq(index).css('background','red');
$('#img-box img').fadeOut();
$('#img-box img').eq(index).fadeIn()
index++;
if(index==len){
index=0
}
}
time=setInterval(slide,1000);
$('#box').hover(function(){
clearInterval(time);
$('#prev,#next').css('display','block');
},function(){
time=setInterval(slide(),1000);
$('#prev,#next').css('display','none');
})
</script>
</html> 展开
1个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 796px;
margin: 50px auto;
position: relative;
height: 296px;
}
#img-box img {
position: absolute;
width: 796px;
height: 305px;
}
#uls {
position: absolute;
width: 100%;
text-align: center;
bottom: 0px;
list-style: none;
margin: 0;
padding: 0;
}
#uls li {
width: 30px;
height: 30px;
line-height: 30px;
background: white;
border-radius: 10px;
display: inline-block;
}
#uls li:first-child {
background: red;
}
button {
position: absolute;
top: 50%;
display: none;
}
button#prev {
left: 10px;
}
button#next {
right: 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="img-box">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=d1d0602ff4dcd100cb9cfc21428b47be/4afbfbedab64034f92e70824a3c379310a551dee.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=2496193005f79052e91f433e3cf3d738/a044ad345982b2b7d49053e73dadcbef76099b81.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=7b0853e0dbca7bcb7b7bc32f8e096b3f/0df431adcbef76094230f3bc22dda3cc7cd99edd.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=b3b40b5d9e58d109c2e3adb2e159ccd0/0ff41bd5ad6eddc43f3adcd835dbb6fd52663337.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=e43f072b00d79123e6e090749d355917/9825bc315c6034a87060efa2c713495409237616.jpg" alt="">
</div>
<ul id="uls">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="prev"><</button>
<button id="next">></button>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
var time, len;
var index = 0
len = $('#uls li').length;
time = setInterval(slide, 1000);
$('#box').hover(function() {
clearInterval(time);
$('#prev,#next').css('display', 'block');
}, function() {
time = setInterval(slide, 1000);
$('#prev,#next').css('display', 'none');
});
$('#prev').click(function() {
clearInterval(time);
var len = $('#uls li').length - 1;
var imgshowindex = $("#img-box img:visible").index();
if (imgshowindex <= 0) {
index = len;
} else {
index = --imgshowindex;
}
showindeximg(index);
});
$('#next').click(function() {
clearInterval(time);
var imgshowindex = $("#img-box img:visible").index();
index = ++imgshowindex;
if (index == len) index = 0;
showindeximg(index);
});
function slide() {
index++;
if (index == len) index = 0;
$('#uls li').css('background', 'white').eq(index).css('background', 'red');
$('#img-box img').fadeOut();
$('#img-box img').eq(index).fadeIn();
}
function showindeximg(index) {
$("#img-box img").hide().eq(index).show();
$("#uls li").css("background", "white").eq(index).css("background", "red");
}
</script>
</body>
</html>
具体实现，你可以复制下来运行下。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
