免費AI編程助手
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>輪播圖</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#lunbotu {
width: 1226px;
height: 460px;
overflow: hidden;
position: relative;
margin: 0px auto;
position: relative;
}
#banner {
height: 460px;
width: 6130px;
position: absolute;
transition: 2s;
left: 0px;
}
#banner img {
float: left;
}
#biao {
position: absolute;
top: 430px;
left: 43%;
}
#biao_1 {
height: 20px;
width: 20px;
border: 1px solid #000;
z-index: 10;
float: left;
list-style: none;
border-radius: 50%;
margin-left: 20px;
text-align: center;
cursor:pointer;
}
</style>
</head>
<body>
<div id="lunbotu">
<div id="banner">
<img class="m" src="img/T1hiDvBvVv1RXrhCrK.jpg" />
<img class="m" src="img/T1jrxjB_VT1RXrhCrK.jpg" />
<img class="m" src="img/T1oTJjBKKT1RXrhCrK.jpg" />
<img class="m" src="img/T1RICjB7DT1RXrhCrK.jpg" />
<img class="m" src="img/T1vWdTBKDv1RXrhCrK.jpg" />
</div>
<div id="biao">
<ul>
<li id="biao_1">1</li>
<li id="biao_1">2</li>
<li id="biao_1">3</li>
<li id="biao_1">4</li>
<li id="biao_1">5</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var slid = document.getElementById("banner");
//var id = document.getElementById("bt");
var imgwidth = document.getElementsByClassName("m");
var oli=document.getElementsByTagName("li");
//console.log(oli);
//console.log(imgwidth );
var i =0;
auto();
oli[0].style.cssText="background:#ff6700;color:#fff;";
function auto(){
time = setInterval(function(){
i++;
if(i <= 4) {
slid.style.left = slid.offsetLeft - 1226 + "px";
oli[i].style.cssText="background:#ff6700;color:#fff;";
oli[i-1].style.cssText="background:none;color:#000;";
} else {
slid.style.left ="0px";
oli[4].style.cssText="background:none;color:#000;";
oli[0].style.cssText="background:#ff6700;color:#fff;";
i=0;
}
console.log(i);
}, 3000)
}
for(var j=0;j<=4;j++){
//console.log(imgwidth[j].index);
imgwidth[j].index=j;
oli[j].index=j;
oli[j].onmouseover=function(){
this.style.cssText="background:#ff6700;color:#fff;"
this.onmouseout=function(){
this.style.cssText="background:none;color:#000;"
}
}
oli[j].onclick=function(){
clearInterval(time);
m=this.index;
slid.style.left=-m*1226+"px";
i=m;
auto();
console.log(i);
}
}
</script>
</html>
網(wǎng)上看到的，希望對你有用~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./lunboh5.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
var t = n = 0,
count;
$(document).ready(function() {
// 獲取圖片標簽長度
count = $("#banner_list a").length;
// 不是當前顯示的圖片隱藏
$("#banner_list a:not(:first-child)").hide();
// 點擊下面的1234按鈕，切換圖片
$("#banner li").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
// 淡入淡出效果
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
// 響應(yīng)點擊
$(this).toggleClass("on");
// 切換按鈕的時候讓上一個按鈕回歸原來的樣式
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function() {
clearInterval(t)
},
function() {
t = setInterval("showAuto()", 4000);
});
})
// 自動輪播
function showAuto() {
n = n >= (count - 1) ? 0 : ++n;
$("#banner li").eq(n).trigger('click');
}
</script>
</head>
<body>
<div id="banner">
<div id="banner_bg">
</div>
<div id="banner_info">
</div>
<ul>
<li class="on">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
<a href="#" target="_blank"></a>
</div>
</div>
</body>
</html>CSS：
#banner {
position: relative;
width: 478px;
height: 286px;
border: 1px solid #666;
overflow: hidden;
}
#banner_list img {
border: 0px;
}
#banner_bg {
position: absolute;
bottom: 0;
background-color: #000;
height: 30px;
filter: Alpha(Opacity=30);
opacity: 0.3;
z-index: 1000;
cursor: pointer;
width: 478px;
}
#banner_info {
position: absolute;
bottom: 0;
left: 5px;
height: 22px;
color: #fff;
z-index: 1001;
cursor: pointer
}
#banner_text {
position: absolute;
width: 120px;
z-index: 1002;
right: 3px;
bottom: 3px;
}
#banner ul {
position: absolute;
list-style-type: none;
filter: Alpha(Opacity=80);
opacity: 0.8;
z-index: 1002;
margin: 0;
padding: 0;
bottom: 3px;
right: 5px;
}
#banner ul li {
padding: 0px 8px;
float: left;
display: block;
color: #FFF;
background: #6f4f67;
cursor: pointer;
border: 1px solid #333;
}
#banner ul li.on {
background-color: #000;
}
#banner_list a {
position: absolute;
}
貼一個超級簡單的JS代碼，不需要插件
<!DOCTYPE html>
<html>
<head>
<title>圖片輪播代碼</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<style type="text/css">
body{max-width: 640px;margin: 0 auto;}
#lunbo ul li{width:100%;list-style: none;width:640px; height:250px;background-color: #f00;text-align: center;}
#lunbo ul li:not(:first-child){display: none;}
</style>
<body>
<div id="lunbo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
//因為使用了document，所以js需要放在需要執(zhí)行的代碼下面生效才能生效
var li=document.getElementById('lunbo').getElementsByTagName("li");
var num=0;
var len=li.length;
setInterval(function(){
li[num].style.display="none";
num=++num==len?0:num;
li[num].style.display="inline-block";
},3000);//切換時間
</script>
</body>
</html>
