二、html代码
ホームページウェブフロントエンドjsチュートリアルデモ ソース コードを使用したネイティブ JavaScript イメージの自動または手動切り替えの例_JavaScript スキル

一、效果图
デモ ソース コードを使用したネイティブ JavaScript イメージの自動または手動切り替えの例_JavaScript スキル
二、html代码

复制代 代码如下:




  • デモ ソース コードを使用したネイティブ JavaScript イメージの自動または手動切り替えの例_JavaScript スキル

  • デモ ソース コードを使用したネイティブ JavaScript イメージの自動または手動切り替えの例_JavaScript スキル

  • デモ ソース コードを使用したネイティブ JavaScript イメージの自動または手動切り替えの例_JavaScript スキル



  • 1

  • 2

  • 3




三、源代码
复制代码 代码如下:

var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;

var Class = {
create: function() {
return function() {
this.initialize.apply(this, argument)
}
}
}

オブジェクト.extend = function(destination, source) {
for (source の var プロパティ) {
destination[property] = source[property]
}
return destination; >
var TransformView = Class.create();
TransformView.prototype = {
//コンテナオブジェクト、スライディングオブジェクト、スイッチングパラメータ、スイッチング番号
initialize: function(container, slider,parameter, count, options) {
if(parameter var oContainer = $(コンテナ), oSlider = $(スライダー), oThis = this;
this.Index = 0;//現在のインデックス

this._timer = null;//タイマー
this._slider = oSlider;//スライディングオブジェクト
this._parameter =parameter ; //スイッチパラメータ
this._count = count 0;//スイッチ数量
this._target = 0;//ターゲットパラメータ

this.SetOptions(options); 🎜>this.Up = !!this.options.Up;
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time) ;
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onStart; .onFinish = this.options.onFinish;

oContainer.style.overflow = "hidden";
oContainer.style.position = "relative"; "absolute";
oSlider.style.top = oSlider.style.left = 0;
},
//デフォルトのプロパティを設定します
SetOptions: function(options) {
this. options = {//デフォルト値
上: true,// 上に行くかどうか (それ以外の場合は左へ)
ステップ: 5,//スライディング変化率
時間: 10,//スライディング遅延
Auto: true,//自動変換するかどうか
Pause: 2000,//一時停止時間(Auto が true の場合に有効)
onStart: function(){},// 変換開始時に実行
onFinish: function (){}//変換が完了したら実行
}
Object.extend(this.options, options || {});
},
//切り替えを開始settings
Start : function() {
if(this.Index this.Index = this._count - 1;
} else if (this.Index >= this) ._count){ this .Index = 0; }

this._target = -1 * this._parameter * this.Index;
this.onStart()
this.Move();
},
//Move
Move: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up "top" : "left ? ",
iNow = parseInt(this._slider.style[style]) || 0,
iStep = this.GetStep(this._target, iNow);

if (iStep != 0 ) {
this._slider.style[style] = (iNow iStep) "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); >} else {
this._slider.style[style] = this._target "px";
this.onFinish();
if (this.Auto) { this._timer = setTimeout(function( ){ oThis.Index ; oThis.Start(); }, this.Pause); }
}
},
//ステップサイズを取得します
GetStep: function(iTarget, iNow)
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) 0) ? 1 : -1) ;
return iStep;
//Stop
Stop: function(iTarget, iNow) {
clearTimeout(this._timer); ._slider.style[this .Up ? "top" : "left"] = this._target "px"
}
};

window.onload=function(){
関数 Each(list, fun){
for (var i = 0, len = list.length; i }; 🎜>
var objs = $("idNum2").getElementsByTagName("li");

var tv = new TransformView("idTransformView2", "idSlider2", 408, 3, {
onStart: function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) },//ボタン スタイル
上: false
});

tv.Start();

Each(objs, function(o, i){
o.onmouseover = function(){
o. className = "on";
tv.Index = i;
o.onmouseout = function(); >o.className = " ";
tv.Auto = true
}
})
}


一目見てわかるので、コードについては詳しく説明しません。

デモとソース ファイルのダウンロード
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScript 如何实现图片的左右无缝滑动切换效果?JavaScript 如何实现图片的左右无缝滑动切换效果?Oct 19, 2023 am 08:56 AM

JavaScript如何实现图片的左右无缝滑动切换效果?随着互联网的发展,网页设计中经常会使用图片作为页面的重要元素。而图片的切换效果对于页面的美观度和交互性起着重要的影响。在本篇文章中,我们将探讨如何使用JavaScript实现图片的左右无缝滑动切换效果,并附有具体的代码示例。实现图片的左右无缝滑动切换效果,首先需要做到以下几点:建立一个图片容器,用

如何通过纯CSS实现图片轮播效果的方法和技巧如何通过纯CSS实现图片轮播效果的方法和技巧Oct 18, 2023 am 08:27 AM

如何通过纯CSS实现图片轮播效果的方法和技巧在现代网页设计中,图片轮播效果常常被用于展示多张图片或广告的轮流切换。实现图片轮播效果的方式有很多,其中一种常见的方式是使用CSS动画。本文将介绍如何通过纯CSS实现图片轮播效果的方法和技巧,并提供具体的代码示例。一、HTML结构首先,在HTML中需要准备好用于轮播的图片元素。以下是一个简单的HTML结构示例:&l

原生js实现append()方法原生js实现append()方法Feb 18, 2024 pm 02:37 PM

原生js实现append()方法,需要具体代码示例在编写JavaScript代码时,经常需要在网页中往指定元素中添加新的内容。常见的操作是通过innerHTML属性来设置元素的HTML内容。然而,使用innerHTML属性有时会导致元素内部的事件监听器、样式等丢失。为了更好地实现添加内容的功能,我们可以自己实现一个append()方法。append()方法可

如何使用HTML、CSS和jQuery制作一个响应式的图片切换特效如何使用HTML、CSS和jQuery制作一个响应式的图片切换特效Oct 24, 2023 am 08:01 AM

制作响应式的图片切换特效是前端开发中常见的任务之一。在本篇文章中,我们将使用HTML、CSS和jQuery来实现这个特效。下面是详细步骤和具体的代码示例。HTML结构首先,我们需要创建图片切换特效所需的HTML结构。可以使用以下代码示例来创建一个简单的HTML结构。<divclass="slider-container">

如何使用 JavaScript 实现图片切换的渐变效果?如何使用 JavaScript 实现图片切换的渐变效果?Oct 21, 2023 am 09:33 AM

如何使用JavaScript实现图片切换的渐变效果?随着互联网的发展,网站设计越来越注重用户体验。图片切换是网站常见的交互效果之一,通过图片的渐变切换可以更好地吸引用户的注意力。本文将介绍如何使用JavaScript实现图片切换的渐变效果,并提供具体代码示例。在开始之前,我们需要准备一些图片资源。假设我们有三张图片,分别是"image1.jpg"、"

如何利用Layui实现图片切换轮播效果如何利用Layui实现图片切换轮播效果Oct 26, 2023 am 11:52 AM

如何利用Layui实现图片切换轮播效果,需要具体代码示例标题:利用Layui实现图片切换轮播效果详解引言:在现代网页设计中,图片切换轮播效果已经成为了常见的元素之一。利用图片轮播可以使网页更加动感和吸引人的效果。本文将以Layui为基础,介绍如何实现图片切换轮播效果,并给出具体的代码示例。一、Layui轮播组件介绍Layui是一款经典的前端UI框架,里面包含

如何通过Vue实现图片的切换和轮播效果?如何通过Vue实现图片的切换和轮播效果?Aug 18, 2023 pm 04:57 PM

如何通过Vue实现图片的切换和轮播效果?Vue是一种用于构建用户界面的JavaScript框架,它提供了一种优雅而高效的方法来处理Web应用程序中的数据和交互逻辑。Vue的许多强大功能之一就是它可以轻松地处理图片的切换和轮播效果。在本文中,我们将介绍如何使用Vue来实现这些效果。首先,我们需要准备一些基本的HTML结构和样式来展示图片。我们可以使用<i

JavaScript 如何实现图片的左右无缝滑动切换效果同时加入缩放和淡入淡出动画?JavaScript 如何实现图片的左右无缝滑动切换效果同时加入缩放和淡入淡出动画?Oct 25, 2023 am 09:39 AM

JavaScript如何实现图片的左右无缝滑动切换效果同时加入缩放和淡入淡出动画?在网站开发中,图片的滑动切换效果是非常常见的需求,这里我们将介绍如何使用JavaScript实现一种左右无缝滑动切换效果,同时加入缩放和淡入淡出动画。本文将提供详细的代码示例,让你能够轻松实现该效果。首先,我们需要在HTML中准备一个容器,用于放置图片,并且设置容器的

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境