一怨绣、100%比例輪播圖
1.jpg
HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中酒網(wǎng)--首頁</title>
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- container -->
<div class="container">
<!-- swiper -->
<div class="swiper_bg">
<a href="" class="active"></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<div class="circle">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
<script src="./js/index.js"></script>
</html>
CSS樣式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
a{
text-decoration: none;
color: #666;
}
img{
display: block;
}
body{
font-size: 12px;
color: #666;
background-color: #fff;
}
.content{
width: 1200px;
margin: 0 auto;
}
.container{
height: 3000px;
position: relative;
}
/* swiper_bg開始 */
.swiper_bg{
width: 100%;
height: 491px;
position: relative;
margin-top: 30px;
border-top: 1px solid #dd0207;
}
.swiper_bg>a.active{
opacity: 1;
}
.swiper_bg>a{
display: block;
opacity: 0;
width: 100%;
height: 491px;
transition: 1.5s;
position: absolute;
top: 0;
left: 0;
}
.swiper_bg>a:nth-child(1){
background: url(../image/swiper_01.jpg) center center no-repeat;
}
.swiper_bg>a:nth-child(2){
background: url(../image/swiper_02.jpg) center center no-repeat;
}
.swiper_bg>a:nth-child(3){
background: url(../image/swiper_03.jpg) center center no-repeat;
}
.swiper_bg>a:nth-child(4){
background: url(../image/swiper_04.jpg) center center no-repeat;
background-size: 100% 100%;
}
.swiper_bg>a:nth-child(5){
background: url(../image/swiper_05.jpg) center center no-repeat;
background-size: 100% 100%;
}
.swiper_bg>.circle{
position: absolute;
top: 450px;
left: 50%;
transform: translateX(-50%);
display: flex;
z-index: 6;
}
.swiper_bg>.circle>span{
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
margin: 0 5px;
cursor: pointer;
}
.swiper_bg>.circle>span.active{
background-color: transparent;
border: 3px solid #fff;
transform: calc(1.5);
}
/* swiper_bg結(jié)束 */
js代碼
window.onload = function(){
// 封裝獲取標(biāo)簽函數(shù)
function $(selector){
return document.querySelectorAll(selector)
}
// container swiper_bg
function swiperBg(){
var lis = $('.swiper_bg a')
var circles = $('.circle span')
var indexCir = 0
var timer = setInterval(play,3000)
// 輪播
function play(){
indexCir++
if(indexCir>=lis.length){
indexCir = 0
}
for(var i=0;i<lis.length;i++){
lis[i].className = ''
lis[i].style.zIndex = '0'
circles[i].className = ''
}
lis[indexCir].className = 'active'
lis[indexCir].style.zIndex = '2'
circles[indexCir].className = 'active'
}
// circles
circles.forEach(function(item,index){
item.onmouseenter = function(){
clearInterval(timer)
for(var i=0;i<circles.length;i++){
circles[i].className = ''
lis[i].className = ''
lis[i].style.zIndex = '0'
}
this.className = 'active'
lis[index].className = 'active'
lis[index].style.zIndex = '2'
indexCir = index
}
item.onmouseleave = function(){
timer = setInterval(play, 3000)
}
})
// 瀏覽器優(yōu)化
document.addEventListener("visibilitychange", function() {
if(document.hidden) {
clearInterval(timer) // 瀏覽器隱藏背亥，清除計(jì)時(shí)器
} else {
timer = setInterval(play, 3000) // 瀏覽器顯示览闰，正常輪播
}
})
}
swiperBg()
}
二吨娜、手動(dòng)箭頭輪播圖
2.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.a{
position: relative;
width: 600px;
height: 400px;
margin: 100px auto 0 auto;
overflow: hidden;
box-shadow: dimgrey;
}
.b{
position: absolute;
width: 4200px;
height: 400px;
display: flex;
z-index: 1;
}
.b img{
float:left;
width: 600px;
height: 400px;
}
/* 圖片 */
.c{
position: absolute;
left: 30px;
top: 150px;
width: 100px;
height: 100px;
z-index: 10;
}
.cc{
position: absolute;
left: 450px;
top: 20px;
width: 100px;
height: 100px;
z-index: 10;
}
/* 箭頭 */
.d{
position: absolute;
bottom: 10px;
left: 250px;
width: 100px;
height: 50px;
z-index: 2;
}
.d span{
margin-left: 5px;
display: inline-block;
width: 10px;
height: 10px;
color:darkgray;
border-radius: 50%;
text-align: center;
cursor: pointer;
background-color: #000;
}
.on{
background-color: brown!important;
}
/* 小圓點(diǎn) */
</style>
</head>
<body>
<div class="a">
<div class="b" style="left: -600px;">
<img src="5.jpg" alt="5" width="600px" height="400px">
<img src="1.jpg" alt="1" width="600px" height="400px">
<img src="2.jpg" alt="2" width="600px" height="400px">
<img src="3.jpg" alt="3" width="600px" height="400px">
<img src="4.jpg" alt="4" width="600px" height="400px">
<img src="5.jpg" alt="5" width="600px" height="400px">
<img src="1.jpg" alt="1" width="600px" height="400px">
</div>
<!-- 圖片 -->
<div class="c">
<img src="6.png" alt="6" width="100px" height="100px" class="ccc">
<img src="7.png" alt="7" width="100px" height="100px" class="cc">
</div>
<!-- 箭頭 -->
<div class="d">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 小圓點(diǎn) -->
</div>
</body>
<script>
var b=document.querySelector('.b');
var f=document.querySelector('.ccc');
var g=document.querySelector('.cc');
var n=document.getElementsByTagName("span");
var k=0;
f.onclick=function(){
f_pic();
}
g.onclick=function(){
g_pic();
}
// 左右箭頭麻顶，手動(dòng)輪播
function g_pic(){
var e;
if(b.style.left==="-3600px"){
e=-1200;
}else{
e=parseInt(b.style.left)-600;
}
b.style.left=e+"px";
k++;
if(k>4){
k=0;
}
m();
}
function f_pic(){
var e;
if(b.style.left==="0px"){
e=-2400;
}else{
e=parseInt(b.style.left)+600;
}
b.style.left=e+"px";
k--;
if(k<0){
k=4;
}
m();
}
// 自動(dòng)播放
var h=null;
function autoPlay(){
h=setInterval(function(){
f_pic();
},1000)
}
autoPlay();
var a=document.querySelector('.a');
a.onmouseenter=function(){
clearInterval(h);
}
a.onmouseleave=function(){
autoPlay();
}
// 定時(shí)器
function m(){
for(var i=0; i<n.length; i++){
n[i].className="";
// console.log(i);
}
n[k].className="on";
}
for(var i=0; i<n.length;i++){
(function(i){
n[i].onclick=function(){
k=i;
b.style.left=(k*-600)-600+'px'
m()
}
})(i)
}
</script>
</html>
三赦抖、簡易輪播圖
3.jpg
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
#banner{
width: 1000px;
height:300px;
position: relative;
margin: auto;
overflow: hidden;
border:solid 1px #000;
}
#imgs{
width:4020px;
height:300px;
left: 0;
position: absolute;
}
#banner img{
width:1000px;
height: 300px;
}
</style>
</head>
<body>
<div id="banner">
<div id="imgs">
<img src="./images/1.jpeg" alt="">
<img src="./images/2.jpeg" alt="">
<img src="./images/3.jpeg" alt="">
<img src="./images/1.jpeg" alt="">
</div>
</div>
<script>
window.onload = function() {
var _imgs = document.querySelector("#imgs")
var _width = document.querySelector("#imgs img").offsetWidth
var bannerTimer = setInterval(play, 3000)
var _currLeft = 0; // 當(dāng)前div#imgs 左側(cè)距離
var _currIndex = 0; // 當(dāng)前正在顯示的圖片
function play() {
// 通過計(jì)時(shí)器，修改圖片索引和位置
var timer = setInterval(function() {
// 每20ms 向左移動(dòng)20像素
_currLeft -= 20
if(_currLeft <= -3000) {
_currLeft = 0
// 直接顯示第一張圖片
_currIndex = 0
_imgs.style.left = 0
}
// 判斷動(dòng)畫停止條件
if(_currLeft < -_currIndex * 1000) {
clearInterval(timer)
_currIndex++
if(_currIndex >= _imgs.length) {
_currIndex = 0
}
} else {
_imgs.style.left = _currLeft + "px"
}
}, 20)
}
}
</script>
</body>
</html>
