使用JavaScript實(shí)現(xiàn)輪播圖效果

更新時(shí)間：2022年01月07日 10:41:57 作者：我莫得感情_(kāi)

這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

純js，不使用輪播圖控件怎么做輪播圖呢，往下看吧

效果圖：

1.可點(diǎn)擊小圓點(diǎn)切換圖片

2.可點(diǎn)擊左右按鈕切換圖片

3.可自動(dòng)播放

先上CSS和HTML代碼：

<body>
? ? <div class="main">
? ? ? ? <div class="focus fl">
? ? ? ? ? ? <a href="javascript:;" class="arrow-l">&lt;</a>
? ? ? ? ? ? <a href="javascript:;" class="arrow-r"> > </a>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <a href="#" ><img src="../02/15輪播圖制作/upload/focus.jpg" alt=""></a>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <a href="#" ><img src="../02/15輪播圖制作/upload/focus1.jpg" alt=""></a>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <a href="#" ><img src="../02/15輪播圖制作/upload/focus2.jpg" alt=""></a>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <a href="#" ><img src="../02/15輪播圖制作/upload/focus3.jpg" alt=""></a>
? ? ? ? ? ? ? ? </li>
?
? ? ? ? ? ? </ul>
? ? ? ? ? ? <ol class="circle">
?
? ? ? ? ? ? </ol>
? ? ? ? </div>
? ? </div>
?
</body>

<style>
? ? ? ? * {
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ??
? ? ? ? a {
? ? ? ? ? ? text-decoration: none;
? ? ? ? }
? ? ? ??
? ? ? ? ol {
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ??
? ? ? ? .main {
? ? ? ? ? ? width: 980px;
? ? ? ? ? ? height: 455px;
? ? ? ? ? ? margin-left: 440px;
? ? ? ? ? ? margin-top: 10px;
? ? ? ? }
? ? ? ??
? ? ? ? .focus {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 721px;
? ? ? ? ? ? height: 455px;
? ? ? ? ? ? background-color: purple;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ??
? ? ? ? .focus ul {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? width: 600%;
? ? ? ? }
? ? ? ??
? ? ? ? .focus ul li {
? ? ? ? ? ? float: left;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ??
? ? ? ? .arrow-l,
? ? ? ? .arrow-r {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? margin-top: -20px;
? ? ? ? ? ? width: 24px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? background: rgba(0, 0, 0, .3);
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 40px;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? font-family: 'icomoon';
? ? ? ? ? ? font-size: 18px;
? ? ? ? ? ? z-index: 2;
? ? ? ? }
? ? ? ??
? ? ? ? .arrow-r {
? ? ? ? ? ? right: 0;
? ? ? ? }
? ? ? ??
? ? ? ? .circle {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? bottom: 10px;
? ? ? ? ? ? left: 50px;
? ? ? ? }
? ? ? ??
? ? ? ? .circle li {
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 8px;
? ? ? ? ? ? height: 8px;
? ? ? ? ? ? /*background-color: #fff;*/
? ? ? ? ? ? border: 2px solid rgba(255, 255, 255, 0.5);
? ? ? ? ? ? margin: 0 3px;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? /*鼠標(biāo)經(jīng)過(guò)顯示小手*/
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ??
? ? ? ? .current {
? ? ? ? ? ? background-color: #fff;
? ? ? ? }
?</style>

最后就是JS代碼部分了

window.addEventListener('load', function() {
? ? // 獲取要使用到的元素
? ? var arrow_l = document.querySelector('.arrow-l');
? ? var arrow_r = document.querySelector('.arrow-r');
? ? var focus = document.querySelector('.focus');
? ? var focusWidth = focus.offsetWidth;
? ? //鼠標(biāo)移動(dòng)到圖片上，顯示左右切換的按鈕
? ? focus.addEventListener('mouseenter', function() {
? ? ? ? arrow_l.style.display = 'block';
? ? ? ? arrow_r.style.display = 'block';
? ? //清除定時(shí)器，不再自動(dòng)播放
? ? ? ? clearInterval(timer);
? ? ? ? timer = null; //清除定時(shí)器變量
? ? });
? ? //鼠標(biāo)離開(kāi)，左右切換按鈕隱藏
? ? focus.addEventListener('mouseleave', function() {
? ? ? ? arrow_l.style.display = 'none';
? ? ? ? arrow_r.style.display = 'none';
? ? ? ? timer = setInterval(function() {
? ? ? ? ? ? arrow_r.click();
? ? ? ? }, 2000)
? ? });
? ? var ul = focus.querySelector('ul');
? ? var ol = focus.querySelector('.circle');
? ? console.log(ol);
? ? for (var i = 0; i < ul.children.length; i++) {
? ? ? ? var li = document.createElement('li');
? ? //創(chuàng)建自定義屬性index
? ? ? ? li.setAttribute('index', i);
? ? //根據(jù)li（圖片）的個(gè)數(shù)自動(dòng)添加左下角的小圓點(diǎn)
? ? ? ? ol.appendChild(li);
? ? ? ? li.addEventListener('click', function() {
? ? ? ? ? ? for (var i = 0; i < ol.children.length; i++) {
? ? ? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? ? ? }
? ? ? ? ? ? this.className = 'current';
? ? ? ? ? ? var index = this.getAttribute('index');
? ? ? ? ? ? num = index;
? ? ? ? ? ? circle = index;
? ? ? ? ? ? animate(ul, -index * focusWidth);
? ? ? ? })
? ? }
? ? ol.children[0].className = 'current';
? ? var first = ul.children[0].cloneNode(true);
? ? ul.appendChild(first);
? ? var num = 0;
? ? var circle = 0;
? ? var flag = true;
? ? //點(diǎn)擊'>'進(jìn)行圖片向右切換
? ? arrow_r.addEventListener('click', function() {
? ? ? ? if (num == ul.children.length - 1) {
? ? ? ? ? ? ul.style.left = 0;
? ? ? ? ? ? num = 0;
? ? ? ? }
? ? ? ? num++;
? ? ? ? animate(ul, -num * focusWidth);
? ? ? ? circle++;
? ? ? ? if (circle == ol.children.length) {
? ? ? ? ? ? circle = 0;
? ? ? ? }
? ? ? ? circleChange();
? ? });
? ? //點(diǎn)擊'<'進(jìn)行圖片向左切換
? ? arrow_l.addEventListener('click', function() {
? ? ? ? if (num == 0) {
? ? ? ? ? ? num = ul.children.length - 1;
? ? ? ? ? ? ul.style.left = -num * focusWidth + 'px';
? ? ? ? }
? ? ? ? num--;
? ? ? ? animate(ul, -num * focusWidth);
? ? ? ? circle--;
? ? ? ? circle = circle < 0 ? ol.children.length - 1 : circle;
? ? ? ? circleChange()
? ? });
? ? //清除樣式函數(shù)，排他思想
? ? function circleChange() {
? ? ? ? for (var i = 0; i < ol.children.length; i++) {
? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? }
? ? ? ? ol.children[circle].className = 'current';
? ? }
? ? //定時(shí)器+click（）實(shí)現(xiàn)自動(dòng)播放
? ? var timer = setInterval(function() {
? ? ? ? arrow_r.click();
? ? }, 2000)
?
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: