1.天使は、マウスの結果を以下の
<！DOCTYPE HTML> <HTML LANG = "EN"> <HEAD> <メタ文字コード= "UTF-8"> <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> <タイトル>ドキュメント</ TITLE> <スタイル> ボディ{ マージン： 0 ; パディング： 0 ; 高さ：5000px; 背景 -image：直鎖勾配（値は0deg、紫、黄緑色）。 } #box { 位置：固定されました。 左： 0 ; 上：0 ; } </スタイル> </ head>の ; box.style.top Y + = "PX" ; }）; // 概要： // 1.検索要素 // 2結合事象、addEventListenerを // 3.イベントオブジェクト、取得したマウスは、座標値 // 固定配置4.パターン // 5 。スタイルスタイル属性変更 </ SCRIPT> </ BODY> </ HTML>
効果：
スイッチへの2.Tabバー
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スタイル>
* {
マージン： 0 ;
パディング： 0 ;
}
UL {
リスト - スタイル：なし。
}
.wrapper {
幅：100pxに。
高さ：475px;
/ * マージン：0自動; * /
マージン - トップ：100ピクセル;
}
.TAB {
ボーダー：1ピクセル固体#ddd。
国境 -bottom：0 ;
高さ：36px;
幅：320ピクセル;
}
.TAB李{
位置：相対。
フロート：左;
幅：80px;
高さ：34px;
行 - 高さ：34px;
テキスト - 揃える：センター;
カーソル：ポインタ;
国境 - トップ：4PX固体#FFF;
}
.TABスパン{
}
.products {
幅：1002px。
国境：1pxの固体#ddd。
高さ：476px;
}
{.main .products
フロート：左ない;
ディスプレイ：なし;
}
.productsは{.main.selected
表示：ブロック;
}
.TAB li.active {
ボーダー - 色：赤、
ボーダー -bottom：0 ;
}
</スタイル>
< / HEAD>
<BODY>
<DIV CLASS = "ラッパー">
<！ -タブバーのタブの一部- >
<ulのクラス= "タブ">
<！ -カスタムは、各リーに属性インデックス値を追加し、対応するパーティションの切り替えの目的のために- >
<データのLi-インデックスは= "0"クラス= "アイテムのアクティブタブ">国際大</ LI>
<データ・インデックス=李を」1"クラス= "項目-タブ">全国のメーキャップブランド</ LI>
<LIデータインデックス= "2"クラス= "タブ項目">清洁用品</ LI>
<LIデータインデックス= "3"クラス= "タブ項目">男士精品</ LI>李データ・インデックス= "3"クラス= "タブ項目">男性用</ LI>
</ UL>
<！ -タブのフィールドの内容の一部- >
<DIV CLASS = "製品">
<DIV CLASS = "メイン選択">
<a href="###"> <IMG SRC = "画像/ guojidapai.jpg" ALT = "" /> </a>の
</ DIV>
<DIV CLASS = "メイン">
<a href="###"> <IMG SRC = "画像/ guozhuangmingpin.jpg" ALT = "" /> </a>の
</ div>
<divのクラス=」メイン">
<a href="###"> <IMG SRC ="画像/ qingjieyongpin.jpg」ALT = "" /> </a>の
</ div>
<divのクラス= "メイン">
<HREF = "###"> <IMG SRC =」画像/ nanshijingpin.jpg」ALT = "" /> </a>の
</ div>
</ div>
</ div>
<スクリプト>
window.addEventListener（ "負荷"、関数（）{
// 1.検索要素
// すべては、すべての要素を見つける
VAR TabItems = document.querySelectorAll（ 'タブ項目を。' ）;
VARの MAINS = document.querySelectorAll（ 'メイン' ）;
// 2.複数の要素を含む、イベントを追加し、私たちは横断する追加する必要がある
ため（VARの I = 0; I <tabItems.length; I ++ ）{
// 2.1がマウスイベントにすべての要素に追加される
「（tabItems [I] .addEventListenerをmouseOver」、関数（）{
// 3.1切り替えるタブ
// 3.1.1は、すべてを除外
するために（VAR I = 0;私はtabItems.lengthを<;私は++ ）{
// 1.1は、最初のタブのすべてのアクティブなクラス名を削除入れます
TabItems [I] .classList.remove（「アクティブ」）;
}
// 3.1.2、現在のクラス名の能動素子にクリック追加される現在確立
この .classList.add（「アクティブ」）;
// 3.2ハンドオーバ製品
// 3.2.1すべての商品クラス名切り替える
ための（VAR I = 0;私はmains.lengthを<; Iは++ ）{
// クラス名のうち、すべてのボックスを隠す
MAINS [I] .classList.remove（ "選択します" ;）
}
/ / 3.2.2、タブを確立し、どの団体
// カスタムタグインデックス現在のLiに格納された値の1
VARの指数= この; .dataset.index
にconsole.log（インデックス）;
// インデックス値にパーティションは、クラス名を追加し、クラス名ボックスを追加選択したいくつかの商品の最初を表示することができます
幹線（ "選択" [インデックス] .classList.add ）。
}）
}
}）
</ SCRIPT>
</ body>
</ HTML>
効果：
3.アコーディオン効果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
/* 去掉li标签自带的样式 点 */
ul {
list-style: none;
}
.wrap {
width: 1000px;
margin: 50px auto;
}
.slider {
width: 1000px;
height: 400px;
border: 1px solid red;
overflow: hidden;
}
.slider li {
width: 200px;
height: 400px;
float: left;
cursor: pointer;
/* 过渡属性 */
transition: all .4s;
}
</style>
<script>
/*
需求：
1.动态的给所有的li，添加背景图片
2.鼠标移入，让当前变宽，让其他变窄
3.鼠标移入，恢复原状
*/
// 浏览器加载事件 当浏览器资源加载完毕后自动执行。
window.addEventListener("load", function () {
// 查找元素 所有li标签 伪数组
var lis = document.querySelectorAll(".slider li");
// for循环遍历 让所有li标签都可以作用到
for (var i = 0; i < lis.length; i++) {
// 给每一个li标签的绑定一个鼠标移入的事件
lis[i].addEventListener("mouseover", function () {
// 排他事件 1.1 排除其他
for (var i = 0; i < lis.length; i++) {
// 让li标签的宽度变成50像素
lis[i].style.width = (1000 - 800) / 4 + "px";
}
// 排他事件 1.2 确立当前 鼠标移入的那一个li标签变成800像素
this.style.width = 800 + "px";
})
// 给li标签添加一个鼠标移出的事件
lis[i].addEventListener("mouseout", function () {
// for循环遍历
for (var i = 0; i < lis.length; i++) {
// 当鼠标移出的时候让所有li标签的宽度都变成200像素
lis[i].style.width = 200 + "px";
}
});
}
})
</script>
</head>
<body>
<div class="wrap">
<ul id="slider" class="slider">
<li>
<img src="./images/mi1.jpg" alt="">
</li>
<li>
<img src="./images/mi2.jpg" alt="">
</li>
<li>
<img src="./images/mi3.jpg" alt="">
</li>
<li>
<img src="./images/mi4.jpg" alt="">
</li>
<li>
<img src="./images/mi5.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>
效果：
4.轮播图效果
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.slider{
width: 730px;
height: 454px;
padding: 8px;
border: 1px solid green;
margin: 100px auto;
}
.inner{
position: relative;
overflow: hidden;
height: 454px;
}
.imglist{
width: 700%;
position: absolute;
left: 0;
transition: all .4s;
}
.imglist img{
width: 730px;
}
li {
float: left;
}
.list {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.list i{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
color: #333;
float: left;
font-style: normal;
line-height: 20px;
font-size: 14px;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.list i:last-child{
margin-right: 0;
}
.list i.current{
background-color: lightcoral;
color: #fff;
}
.arrow {
position: absolute;
width: 100%;
top: 50%;
margin-top: -30px;
}
.arrow-left,
.arrow-right{
width: 30px;
height: 60px;
position: absolute;
font: 20px/60px "consolas";
color: #fff;
background-color: rgba(0,0,0, .3);
text-align: center;
cursor: pointer;
}
.arrow-right{
right: 0;
}
</style>
</head>
<body>
<div class="slider" id="slider">
<div class="inner" id="inner">
<ul class="imglist" id="imglist">
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
</ul>
<div class="list">
<i class="current">1</i>
<i>2</i>
<i>3</i>
</div>
<dv class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</dv>
</div>
</div>
<script>
/*
需求：
1 点击序号
能切换序号
能切换图片
2 点击左箭头
能切换序号
能切换图片
3 点击右箭头
能切换序号
能切换图片
4 自动播放功能
能切换序号
能切换图片
5 鼠标移入停止播放功能
6 鼠标移出还原自动播放功能
*/
// 1 查找元素
// 查找全部小圆点
var dots = document.querySelectorAll('.list i');
var arrowLeft = document.querySelector(".arrow-left");
var arrowRight = document.querySelector(".arrow-right");
var slider = document.querySelector(".slider");
var imgList = document.querySelector(".imgList");
var inner = document.querySelector(".inner");
var styleObj = window.getComputedStyle(inner);
var imgWidth = parseInt(styleObj.width);
console.log(imgWidth);
var index = 0;
//点击序号切换序号和图片
for(var i=0; i<dots.length; i++){
// 把当前循环的i直接设置到元素的data-index自定义属性上
dots[i].dataset.index = i;
dots[i].addEventListener("click", function(){
// 1.1能切换序号 - 排他思想
// 排除所有
for(var i=0; i<dots.length; i++){
dots[i].classList.remove('current');
}
// 确立当前
this.classList.add('current');
// 切换图片
// 获取当前点击小圆点的自定义索引值
var index = this.dataset.index;
// 计算ul要移动数据，赋值给left
imglist.style.left = -1 * imgWidth * index + "px";
console.log(imglist.style.left);
});
}
/*
点击左箭头切换序号和图片
*/
arrowLeft.addEventListener('click', function(){
// 注意索引值的边界，如果索引值为0，点击的时候变成最后圆点的索引值
if(index===0){
index = dots.length -1;
}else {
// 其他情况下索引值减少
index--;
}
console.log(index);
// 1.1 能切换序号
for(var i=0; i<dots.length; i++){
dots[i].classList.remove('current');
}
// 根据索引值，给第几个小圆点添加样式
dots[index].classList.add('current');
// 1.2 能切换图片
imglist.style.left = -1 * imgWidth * index + 'px';
});
function rightMove(){
// index边界判断
if(index === dots.length -1){
index = 0;
}else{
index++;
}
// 小圆点处理
for(var i=0; i<dots.length; i++){
dots[i].classList.remove('current');
}
dots[index].classList.add('current');
// 换图片
imglist.style.left = -1 * imgWidth * index + "px";
}
arrowRight.addEventListener('click', rightMove);
// 自动播放的功能
var timer = setInterval(rightMove, 2000);
// 鼠标移入分区，清除定时器
slider.addEventListener("mouseover", function(){
clearInterval(timer);
});
// 鼠标移出分区，继续启动定时器
slider.addEventListener('mouseout', function(){
timer = setInterval(rightMove, 2000);
})
</script>
</body>
</html>
效果：
