2. 程式人生 > >三位置法圖片輪播圖

三位置法圖片輪播圖

阿新 • • 發佈：2019-01-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
.carousel {
width: 560px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
/*overflow: hidden;*/
position: relative;
}
/*三位置法 舞臺left=0 候場left=560 退場left = -560*/
.carousel .imgs li {
position: absolute;
/*預設所有圖片都在候場位置*/
left: 560px;
top: 0px;
width: 560px;
height: 300px;
}
/*預設第一張圖出現*/
.carousel .imgs li:first-child {
left: 0px;
}
.carousel .btns a {
position: absolute;
width: 30px;
height: 60px;
top: 50%;
margin-top: -30px;
background-color: rgba(0,0,0,.5);
color: #fff;
font-size: 30px;
text-align: center;
line-height: 60px;
}
.carousel .btns a.leftBtn {
left: 10px;
}
.carousel .btns a.rightBtn {
right: 10px;
}
.carousel .circles {
position: absolute;
width: 140px;
height: 20px;
left: 50%;
margin-left: -70px;
bottom: 10px;
overflow: hidden;
}
.carousel .circles ol {
width: 200px;
}
.carousel .circles ol li {
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
background-color: #eee;
}
.carousel .circles ol li.cur {
background-color: yellow;
}



</style>
</head>
<body>
<div class="carousel">
<ul class="imgs" id="imgs">
<li><img src="images/0.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<div class="btns">
<a href="javascript:void(0);" class="leftBtn" id="leftBtn">&lt;</a>
<a href="javascript:void(0);" class="rightBtn" id="rightBtn">&gt;</a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 獲取元素
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $circles = $("#circles ol li");
var $imgs = $("#imgs li");
// 數量
var amount = $circles.length;
// 訊號量
var idx = 0;
// 定時器 相當於自動執行滑鼠右鍵事件 將滑鼠右擊事件寫成函式
var timer = setInterval(rightBtnFun,1000);
// 滑鼠進入圖片定時器停止
$circles.mouseenter(function(){
clearInterval(timer);
})
// 滑鼠離開定時器繼續
$circles.mouseleave(function(){
// 設表先關
clearInterval(timer);
// 重新開始定時器
timer = setInterval(rightBtnFun,1000);
})
// 右鍵點選事件
$rightBtn.click(rightBtnFun);
function rightBtnFun(){
// 防流氓
if($imgs.is(":animated")){
return;
}
// 老圖消失
$imgs.eq(idx).animate({"left":-560},500)
// 新圖入場
// 訊號量改變
idx ++ ;
// 驗證訊號量
if(idx>amount-1){
idx=0;
}
// 新圖入場前瞬移到候場位置
$imgs.eq(idx).css("left",560);
// 新圖入場
$imgs.eq(idx).animate({"left":0},500);
// 小圓點改變
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
// 左鍵點選事件
$leftBtn.click(function(){
// 防流氓
if(!$imgs.is(":animated")){
// 老圖退場 退場位置去了右面
$imgs.eq(idx).animate({"left":560},500)
// 訊號量改變
idx --;
// 訊號量判斷
if(idx<0){
idx=amount-1;
}
// 新圖進場前瞬移 新圖進場
$imgs.eq(idx).css("left",-560).animate({"left":0},500)
// 對應小雨點改變樣式
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
})
// 小圓點滑鼠進入事件
$circles.mouseenter(function(){
// 判斷事件小圓點在哪邊
var i = $(this).index();
// 如果事件小圓點大於當前圖片位置 圖片從右側進入 相當於滑鼠右擊事件
if(i>idx){
// 老圖退場
$imgs.eq(idx).animate({"left":-560},500)
// 新圖進場前瞬移
idx = i;
$imgs.eq(idx).css("left",560)
// 新圖進場
$imgs.eq(idx).stop(true,true).animate({"left":0},500)
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
// 如果事件小圓點小於當前圖片位置 圖片從右側進入 相當於滑鼠右擊事件
if(i<idx){
// 老圖退場
$imgs.eq(idx).animate({"left":560},500)
// 新圖進場前瞬移
idx = i;
$imgs.eq(idx).css("left",-560)
// 新圖進場 防流氓
$imgs.eq(idx).stop(true,true).animate({"left":0},500)
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
})
</script>
</body>
</html>

相關推薦

三位置法圖片輪播圖

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text

關於圖片輪播圖的一個簡單實例 以及實例中發現問題

JS 輪播圖1.最近在學習JS的過程中，為了鞏固水平做了一個簡單的輪播圖，以及在做的過程中發現一些問題（未解決！希望可以有大佬可以解釋這個問題）2.代碼如下：<!DOCTYPE html><html><head lang="en"><meta ch

android 使用圖片輪播圖---banner 使用

轉自：https://github.com/youth5201314/banner 使用步驟 Step 1.依賴banner Gradle dependencies{ compile 'com.youth.banner:banner:1.4.10' //最新版本2018-10-

圖片輪播圖之電商大廣告

就按鈕，還有自動播放。有幾個難點，就是最後一張到第一張，和第一張到最後一張的效果無縫切換需要注意一下。然後就是右下角的li根據圖片的索引進行繫結。 程式碼如下 <!DOCTYPE html> <html lang="en"> <head>

jquery實現圖片輪播圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:n

iOS之懸浮檢視:按鈕/圖片/輪播圖/gif圖/視訊/音訊/自定義view

我自定義個 LCSuspendCustomView繼承UIView 在這個View中我添加了按鈕(UIButton),圖片(UIImageView),GIF圖(UIWebView)到檢視上. 重寫了touchsbegan:/touchsMoved:/touchsEnded:三個方法.如下: - (void)

Boostrap部落格網站搭建（三）-首頁輪播圖實現

1、使用輪播圖外掛這裡我們使用swiper.js外掛並附上下載地址：https://pan.baidu.com/s/1c3MifM4   下面就需要新增HTML程式碼了 <div class="jumbotron container-slider"> &

JavaScript實現圖片輪播圖

<!DOCTYPE html> <html> <head> <script > var time; function init(){ //設定定時操作 time=setInterval("show()",0); //3秒執行一

【解決火車輪播圖小圓點跳的問題】傳統輪播圖-三位法

ctype clear 位置 padding head doctype image class 改變 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

vue移動音樂app開發學習（三）：輪播圖組件的開發

hub out webapp width eth reat slot utc -1 本系列文章是為了記錄學習中的知識點，便於後期自己觀看。如果有需要的同學請登錄慕課網，找到Vue 2.0 高級實戰-開發移動端音樂WebApp進行觀看,傳送門。 完成後的頁面狀態以及項目結構如

獲取後臺輪播圖圖片，讓其自動播放

web parse nim 默認 fun 是否 images var 斷圖 1、從後臺獲取輪播圖圖片 $(function(){　　//輪播圖方法（圖片索引，對應圖片，圖片長度） 　　function lunImg(nums,img,imgLength) {

原生js解決圖片點擊左右切換（簡單輪播圖）

邏輯關系 element logs 內容 點擊切換 osi 圖片 width eight 想寫一個綜合性的小案例，主要會運用到數組和判斷以及我前面幾篇博客所復習到的js的知識。今天案例想要實現的效果圖如下圖所示： 效果是：點擊“循環切換”按鈕，那麽“一號”位置的文案就要

【微信小程序】獲取輪播圖當前圖片下標、滑動展示對應的位數、點擊位數展示對應圖片

set spec get auto mage cover 切換圖片 gevent 自動播放 業務需求： 3個圖片輪番播放，可以左右滑動，點擊指示點可以切換圖片 index.wxml： 這裏使用小程序提供的<swiper>組件autoplay：自動播放inter

每次移一張圖片的無縫輪播圖

end 3.0 doctype () 定時 ora title order console <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小程式輪播圖顯示三個資料

//專家團隊 getZhuanjia: function () { var that = this; app.util.request({ "url": "entry/wxapp/YuZhuanjia", success: function (res) {

小程序輪播圖顯示三個數據

ndt com http index bind int != 團隊 ESS //專家團隊 getZhuanjia: function () { var that = this; app.util.request({ "url": "entry/wxapp/YuZhuanji

小程式輪播圖-swiper圖片元件

  主要是程式碼也很簡單. 1.index.wxml <!--index.wxml-->       <swiper class="swiper" indicator-dots="true" autoplay="true" int

Android 輪播圖Banner切換圖片的效果

Android XBanner使用詳解 2018年03月14日 08:19:59 AND_Devil 閱讀數：910   前言:現如今的很多APP都

側滑+fragment切換頁面+fragment巢狀+二次取樣+輪播圖+gridview展示圖片+網路請求資料+資料庫

全域性配置Appliction 所需要的依賴有：implementation ‘com.google.code.gson:gson:2.8.5’ implementation ‘com.nostra13.universalimageloader:universal-image-loader:

PullToRefreshListView上拉和下拉+輪播圖多條目+fragment巢狀fragment+二次取樣+側拉點選切換fragment+PullToRefreshGritView圖片展示

側拉 程式碼 1提取的基類 1.1Activity的基類 package com.example.zonghelianxi02.ui.activity; import android.os.Bundle; import android.support.annotation.Nulla