利用HTML5實現全屏圖片左右滑動輪播代碼



22 86 29



特效描述:利用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

加群請備注:從官網了解到

老夫子电子 yy彩票网址 pc蛋蛋28官网 赚钱快多的软件是真的吗 上海快三一定牛走势图 重庆时时彩2.1版本安卓 腾讯分分彩计划两期app 万达二分彩走势图 梅西c罗总进球数 黑龙江36选7开奖结果 新快3和老快3区别 选号码 湖北11选5走势图一手机板 体彩6十1开奖结果浙江 极速时时彩开奖网 吉林快3新浪爱彩 白山棋牌游戏中心