資訊專欄INFORMATION COLUMN
摘要：旋轉(zhuǎn)輪播圖本例源于站長(zhǎng)之家實(shí)例其他相似示例自己研究重寫了一遍。我用的是的大小一致的張圖片，代碼可拓展為三張四張甚至大于五張。如圖是靜態(tài)效果圖后的代碼是靜態(tài)時(shí)的樣式和。計(jì)算得出向左向右二然后，編寫動(dòng)態(tài)交互效果。
本例源于（站長(zhǎng)之家實(shí)例http://sc.chinaz.com/jiaoben/170215391070.htm）
其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）
自己研究重寫了一遍。
一、先寫靜態(tài)的初始樣式的css和html。我用的是 550x300的大小一致的 5張圖片，代碼可拓展為三張、四張、甚至大于五張。如圖是靜態(tài)效果：
圖后的代碼是靜態(tài)時(shí)的樣式html和css。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
<style>
* { margin: 0; padding: 0;word-break: break-all; }
a { color:#fff;text-decoration: none;}
a:hover { text-decoration: none;}
ul,li { list-style: none;}
html,body{width: 100%;height: 100%;}
.main {max-width: 800px; margin: 0 auto;}
#slide {width: 100%;height: 420px;position: relative;overflow: hidden;}
#slide .pic { position: absolute; }
#slide .pic img {width: calc(100% - 14px);height: calc(100% - 14px);}
#slide .p1 { z-index: 3;width: 40%;height: 40%;left: -50%;top: 30%;}
#slide .p2 { z-index: 4;width: 60%;height: 60%;left: -20%;top: 20%;}
#slide .p3 {z-index: 5; width: 80%;height: 80%; left: 10%;top: 10%;}
#slide .p4 { z-index: 4; width: 60%; height: 60%; left: 60%; top: 20%;}
#slide .p5 { z-index: 3; width: 40%;height: 40%; left: 110%; top: 30%;}
#slide .btn {
position: absolute;
z-index: 6;
bottom: 20%;
width: 180px; /* 計(jì)算得出 5*30+5*6=180 */
margin-left: -90px;
left: 50%;
}
#slide .btn span {
width: 24px;
height: 8px;
border-radius: 3px;
float: left;
background-color: #dedede;
margin: 0 3px;
}
#slide .btn .on {background-color: #ffd200; }
style>
head>
<body>
<div class="main">
<div id="slide" class="slide">
<div class="pic"><img src="./images/1.png">div>
<div class="pic"><img src="./images/2.png">div>
<div class="pic"><img src="./images/3.png">div>
<div class="pic"><img src="./images/4.png">div>
<div class="pic"><img src="./images/5.png">div>
<div class="btn">
div>
div>
<button class="btn-prev">向左button>
<button class="btn-next">向右button>
div>
body>
html>
View Code
二、然后，js編寫動(dòng)態(tài)交互效果。這段是js代碼（要引入jQuery庫(kù)）
備注還比較詳細(xì)，一和二的代碼直接復(fù)制就可以運(yùn)行。
View Code效果如下圖：只顯示三張，太多圖的話，手機(jī)移動(dòng)端顯示不下
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1691.html
摘要：個(gè)人前端文章整理從最開(kāi)始萌生寫文章的想法，到著手開(kāi)始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開(kāi)始萌生寫文章的想法，到著手...
摘要：輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。 輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。感興趣的可以訪問(wèn)我的輪播圖的線上地址:輪播圖 首先，輪播圖插件其實(shí)并不是我第一次寫，之前也寫過(guò)，不過(guò)那時(shí)候是按照別人的思路寫下來(lái)的，算起來(lái)大概有一年了，這次又一次開(kāi)始輪播圖是因?yàn)榘葑x了《單頁(yè)面Web應(yīng)用 JavaScript從前端到后端》的這本書的1...
摘要：輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。 輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。感興趣的可以訪問(wèn)我的輪播圖的線上地址:輪播圖 首先，輪播圖插件其實(shí)并不是我第一次寫，之前也寫過(guò)，不過(guò)那時(shí)候是按照別人的思路寫下來(lái)的，算起來(lái)大概有一年了，這次又一次開(kāi)始輪播圖是因?yàn)榘葑x了《單頁(yè)面Web應(yīng)用 JavaScript從前端到后端》的這本書的1...
摘要：并不是所有人寫的代碼或者插件都適合小白使用，比如這是一個(gè)的滾動(dòng)插件，大多數(shù)人使用了之后發(fā)現(xiàn)滾動(dòng)不了，去作者提，其實(shí)是他們并不懂滾動(dòng)的原理。 最近在這里看了一篇關(guān)于面試的文章《回顧自己三次失敗的面試經(jīng)歷》，作者三次倒在了輪播圖上。囧，所以我也寫個(gè)輪播圖看看。這次是用jQuery寫的，因?yàn)樽罱恢痹谘芯縥Query插件的寫法，所以用jQuery寫的，而且我發(fā)現(xiàn)，我vue用太多，完全不熟悉d...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6183·2021-11-29 11:00
