html+css+js 實現自動滑動輪播圖

時間 2019-12-01

標籤 html+css+js html css 實現自動滑動欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
list-style: none; //去圓點
}
.one {
width: 1200px;
height:350px;
margin: 0 auto;
overflow: hidden; //設定好的寬度多餘的進行隱藏javascript

}
.one ul{
width: 3600px;
position: relative;
}
.one ul li{
float: left; //圖片浮動
}
.two ul li { //輪播條的樣式設置
width: 50px;
height: 5px;
background-color: red;
display: inline-block; //向行內樣式同樣顯示
position: relative;
left: 800px;
top: -30px;css

}
.two .a {
background-color: #565656;
}
</style>
</head>
<body>
<div class="all">
<div class="one">
<ul>
<li><img src="images/index_02.png" alt=""></li>
<li><img src="images/index_03.png" alt=""></li>
<li><img src="images/index_04.png" alt=""></li>
</ul>
</div>
<div class="two">
<ul>
<li class="a"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
var oneul = $('.one ul'); //聲明一個變量找到圖片的ul
var oneulli = $('.one ul li'); //聲明一個變量找到圖片的ul li
var twoulli = $('.two ul li'); //聲明一個變量找到輪播按鈕 ul li
var Awidth = oneulli.eq(0).width(); //聲明一個變量找到聲明圖片的(ul li)=oneulli的那個變量從0開始eq(0) 寬度width()
var count=0; //用來計數
var time=null; //用來計時間html

twoulli.on('click',function(){
$(this).addClass('a').siblings().removeClass('a'); //addClass()添加 siblings()同胞元素 removeClass()移除
count=$(this).index();
oneul.animate({"left":-count*Awidth}); //四張圖片依次向左滑動
})java

time=setInterval(lun,2000);
function lun(){ //lun 調用上面命名
count++; //js運算符 %= 取模就是去得它的餘數 18
count%=twoulli.length;
twoulli.eq(count).trigger('click');
}
})
</script>
</body>
</html>jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。