利用HTML5实现全屏图片左右滑动轮播代码



13 49 17



特效描述:利用HTML5实现 全屏图片 左右滑动 轮播代码,利用HTML5实现全屏图片左右滑动轮播代码

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script src="js/polyfill.min.js"></script>

3. HTML代码

<div id="hero-slides">
  <div id="header">
    <div id="logo"></div>
    <div id="menu">
      <div id="hamburger">
        <div class="slice"></div>
        <div class="slice"></div>
        <div class="slice"></div>
      </div>
    </div>
  </div>
  <div id="slides-cont">
    <div class="button" id="next"></div>
    <div class="button" id="prev"></div>
    <div id="slides">
      <div class="slide" style="background-image: url(img/1.jpg);">
        <div class="number">01</div>
        <div class="body">
          <div class="location">Shibuya, Japan</div>
          <div class="headline">Photo by Benjamin Hung</div><a href="#">
            <div class="link">View on Unsplash</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/2.jpg);">
        <div class="number">02</div>
        <div class="body">
          <div class="location">Mong Kok, Hong Kong</div>
          <div class="headline">Photo by Ryan Tang</div><a href="#">
            <div class="link">View on Unsplash</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/3.jpg);">
        <div class="number">03</div>
        <div class="body">
          <div class="location">Incheon, South Korea</div>
          <div class="headline">Photo by Steve Roe</div><a href="#">
            <div class="link">View on Unsplash</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/4.jpg);">
        <div class="number">04</div>
        <div class="body">
          <div class="location">Wan Chai, Hong Kong</div>
          <div class="headline">Photo by Sean Foley</div><a href="#">
            <div class="link">View on Unsplash</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/5.jpg);">
        <div class="number">05</div>
        <div class="body">
          <div class="location">Shibuya-ku, Japan</div>
          <div class="headline">Photo by Alex Knight</div><a href="#">
            <div class="link">View on Unsplash</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/6.jpg);">
        <div class="number">06</div>
        <div class="body">
          <div class="location">Tokyo, Japan</div>
          <div class="headline">Photo by Benjamin Hung</div><a href="#">
            <div class="link">View on Unsplash</div></a>
        </div>
      </div>
      <div class="slide" style="background-image: url(img/1.jpg);">
        <div class="number">07</div>
        <div class="body">
          <div class="location">Taipei City, Taiwan</div>
          <div class="headline">Photo by Jesus In Taiwan</div><a href="#">
            <div class="link">View on Unsplash</div></a>
        </div>
      </div>
    </div>
    <div id="next-catch"></div>
    <div id="prev-catch"></div>
  </div>
</div>
<script>
let hero = document.getElementById('hero-slides');
let menu = document.getElementById('menu');
let slides = document.getElementById('slides');
let next = [ 'next', 'next-catch' ].map(n => document.getElementById(n));
let prev = [ 'prev', 'prev-catch' ].map(n => document.getElementById(n));
let slideChildren = slides.children;
let slideCount = slides.children.length;
let currentlyDemoing = false;
let currentPage = 0;
let slidesPerPage = () => window.innerWidth > 1700 ? 4 : window.innerWidth > 1200 ? 3 : 2;
let maxPageCount = () => slideCount / slidesPerPage() - 1;
function goToPage(pageNumber = 0) {
	currentPage = Math.min(maxPageCount(), Math.max(0, pageNumber));
	console.log(currentPage);
	hero.style.setProperty('--page', currentPage);
}
function sleep(time) {
	return new Promise(res => setTimeout(res, time));
}
function hoverSlide(index) {
	index in slideChildren &&
		slideChildren[index].classList.add('hover');
}
function unhoverSlide(index) {
	index in slideChildren &&
		slideChildren[index].classList.remove('hover');
}
async function demo() {
	if(currentlyDemoing) {
		return;
	}
	currentlyDemoing = true;
	if(currentPage !== 0) {
		goToPage(0);
		await sleep(800);
	}
	let slides = slidesPerPage();
	let pageSeq_ = { 2: [ 1, 2, 1 ], 3: [ 1, 2, 1 / 3 ], 4: [ 1, 1, 0 ] };
	let pageSeq = pageSeq_[slides] || pageSeq_[4];
	let slideSeq_ = { 2: [ 2, 4, 3 ], 3: [ 3, 6, 2 ], 4: [ 3, 6, 2 ] };
	let slideSeq = slideSeq_[slides] || slideSeq_[2];
	await sleep(300);
	goToPage(pageSeq[0]);
	await sleep(500);
	hoverSlide(slideSeq[0]);
	await sleep(1200);
	goToPage(pageSeq[1]);
	unhoverSlide(slideSeq[0]);
	await sleep(500);
	hoverSlide(slideSeq[1]);
	await sleep(1200);
	goToPage(pageSeq[2]);
	unhoverSlide(slideSeq[1]);
	await sleep(300);
	hoverSlide(slideSeq[2]);
	await sleep(1600);
	goToPage(0);
	unhoverSlide(slideSeq[2]);
	currentlyDemoing = false;
}
next.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage + 1)));
prev.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage - 1)));
menu.addEventListener('click', demo);
sleep(100).then(demo);
// window.addEventListener('resize', () => {
	// console.log(document.body.style.getPropertyValue('--slide-per-page'));
// });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 表单 表单美化 表单插件 表单美化插件 图片滑动 图片滑块 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到