JavaScript原生程式碼實現精美的淘寶輪播圖效果範例
這篇文章主要介紹了原生JavaScript實現精美的淘寶輪播圖效果,結合完整實例形式詳細分析了javascript實現淘寶輪播圖功能的相關HTML佈局 、css及js核心功能代碼,並附帶demo源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了原生JavaScript實現的淘寶輪播圖效果。分享給大家供大家參考，具體如下：
輪播圖是我們學習原生js的必經之路
它包含很多基本知識的運用，像this的使用，DOM的操作，還有setInterval的使用和清除，浮動與定位等等，很好的考察了我們的基礎知識牢不牢固，
話不多說，直接上圖
#HTML程式碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>淘宝轮播图</title>
<link rel="stylesheet" href="css/initialize.css" rel="external nofollow" />
<link rel="stylesheet" href="css/tblunbotu.css" rel="external nofollow" />
</head>
<body>
<p id="container" class="clearFix">
<p id="list" class="clearFix" style="left: -520px">
<img src="img/5.jpg" alt=""/>
<img src="img/1.jpg" alt=""/>
<img src="img/2.jpg" alt=""/>
<img src="img/3.jpg" alt=""/>
<img src="img/4.jpg" alt=""/>
<img src="img/5.jpg" alt=""/>
<img src="img/1.jpg" alt=""/>
</p>
<p id="buttons" class="clearFix">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>
</p>
<script type="text/javascript" src="js/tblunbotu.js"></script>
</body>
</html>CSS樣式如下：
/*
第一步：设置外部框的样式
第二步: 设置图片框的样式
第三步: 设置箭头的样式
第四步: 设置小圆点的样式
*/
#container {
margin: 50px auto;
position: relative;
width: 520px;
height: 280px;
overflow: hidden;
}
#list {
position: absolute;
z-index: 1;
width: 3640px;
}
#list img {
float: left;
width: 520px;
height: 280px;
}
#buttons {
height: 10px;
width: 100px;
position: absolute;
left: 0;/*设置水平垂直居中*/
right: 0;/*设置水平垂直居中*/
margin: 0 auto;/*设置水平垂直居中*/
bottom: 20px;
z-index: 2;
}
#buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #cccccc;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons .on {
background: orangered;
}
.arrow {
width: 40px;
height: 40px;
display: none;
position: absolute;
top: 0; /*设置水平垂直居中*/
bottom: 0; /*设置水平垂直居中*/
margin: auto 0; /*设置水平垂直居中*/
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
z-index: 2;
}
.arrow:hover{
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
}
#prev{
left: 10px;
}
#next{
right: 10px;
}javascript程式碼如下
/**
* Created by zhm on 17.1.15.
*/
/*
*知识点：
* this使用
* DOM事件
* 定时器
*
* 思路：
* （1）设置它左右移动
* 问题：传入数字为NAN??
* 解决：在页面中增加属性style：left:0
* （2）平滑移动（移动时间固定，每次移动的距离不一样）
* 问题：连续点击出现晃动？---设置标志位
* 出现空白页？？--- 第一张图片前加上最后一张，最后一张图片前加上第一张
* 在类list的标签中增加属性style：left:-520px;
* 设置无限滚动判断
*
* （3）设置小圆点
* 首先将所有的类置为空，当前类置为on
* 绑定小圆点和图片
* 绑定小圆点和左右箭头
* 设置定时器，鼠标划上去停止，移开自动轮播
*
* */
//1.获取元素
var container = document.getElementById("container");
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var timer = null;
var timer2 = null;
var flag = true;
var index =0;
//2.设置函数
function moveImg(dis) {
var time = 400;//运动的总时间
var eachTime = 10;//每次小移动的时间
var eachDis = dis/(time/eachTime);//每次小移动的距离
var newWeizhi = parseInt(list.style.left) + dis;//新位置
flag = false;
function eachMove(){
if(dis > 0 && parseInt(list.style.left)< newWeizhi || dis < 0 && parseInt(list.style.left)>newWeizhi){
list.style.left = parseInt(list.style.left) + eachDis + 'px';
}else {
flag = true;
clearInterval(timer);
list.style.left = newWeizhi + 'px';
//无限滚动判断
if (newWeizhi == 0) {
list.style.left = -2600 + 'px';
}
if (newWeizhi == -3120) {
list.style.left = -520 + 'px';
}
}
}
timer = setInterval(eachMove, 10);
}
//3.设置点击切换图片
next.onclick = function () {
if(!flag) return;
moveImg(-520);
//绑定箭头和小圆点
if (index == 4) {
index = 0;
} else {
index++;
}
buttonsShow();
};
prev.onclick = function () {
if(!flag) return;
moveImg(520);
//绑定箭头和小圆点
if (index == 0) {
index = 4;
} else {
index--;
}
buttonsShow();
};
//4.设置小圆点的绑定
function buttonsShow() {
//将之前的小圆点的样式清除
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
break;
}
}
buttons[index].className = "on";
}
for(var i = 0 ;i<buttons.length;i++){
buttons[i].value = i;
//使用自执行函数解决i的赋值问题
(function(){
buttons[i].onclick = function(){
if(this.value == index) return;
var offset = (this.value - index)* -520;
moveImg(offset);
index = this.value;
buttonsShow();
}
})();
}
//5.设置自动轮播
timer2 = setInterval(next.onclick,1500);
container.onmouseover = function(){
clearInterval(timer2);
};
container.onmouseout = function(){
timer2 = setInterval(next.onclick,1000);
};以上是JavaScript原生程式碼實現精美的淘寶輪播圖效果範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
