ホームページ >ウェブフロントエンド >jsチュートリアル >ネイティブ JS で記述され、IE6、7、および 8 ブラウザーと互換性があり、シームレスな自動カルーセル (ボタン切り替え付き) を実現します。
ネイティブ JS で記述され、IE6、7、および 8 ブラウザーと互換性があり、シームレスな自動カルーセル (ボタン切り替え付き) を実現します。
- 青灯夜游転載
- 2018-10-11 17:35:482106ブラウズ
この記事は、IE6、7、および 8 ブラウザーと互換性のあるシームレスな自動カルーセル (ボタン切り替え付き) のためのネイティブ JS の記述を紹介します。必要な友人が参考になれば幸いです。あなたへ。
プロジェクト要件ページは、IE6、7、8 およびその他のブラウザーと互換性があります。カルーセル セクションでは、無限ループ、自動カルーセル、および手動が必要です。スイッチング機能、小さなグリッドをスクロールするたびに、スワイパーなどのようなプラグインがインターネット上にたくさんあります。
しかし、それらの多くは IE6、7、8 などの低レベル ブラウザと互換性がありません。同様のカルーセル プラグインを自分で作成する以外に選択肢はありません。
早速、コードに直接進みましょう。:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3-20180801.min.js"></script>
<style>
*{margin: 0;padding: 0;}
div{position: relative;width: 1000px;overflow: hidden;height: 100px;line-height:100px;}
ul{position: absolute;list-style: none;overflow: hidden;}
li{float: left;width: 200px;height: 100px;text-align:center;color:#fff;}
a{position: absolute;color:#fff;margin:0 10px;font-size:30px;text-decoration:none;}
</style>
</head>
<body>
<div>
<ul>
<li style="background: red;">1</li>
<li style="background: yellow;">2</li>
<li style="background: blue;">3</li>
<li style="background: black;">4</li>
<li style="background: green;">5</li>
<li style="background: orange;">6</li>
<li style="background: skyblue;">7</li>
<li style="background: blue;">8</li>
<li style="background: green;">9</li>
<li style="background: orange;">10</li>
<li style="background: skyblue;">11</li>
</ul>
<a href="javascript:void(0)" class="prev" style="left:0px;">←</a>
<a href="javascript:void(0)" class="next" style="right:0px;">→</a>
</div>
</body>
<script type="text/javascript">
var fli = $("ul li").clone(true);
var oul = $("ul");
oul.append(fli);
oul.width($("ul li").eq(0).width()*$("ul li").length);
var inow = 0;
var timer = null;
$("div").mouseover(function(){
clearInterval(timer);
})
$("div").mouseout(function(){
autoplay();
})
$(".next").click(function(){
if(inow == $("ul li").length/2){
oul.css("left","0px");
inow = 1;
}else{
inow++;
}
var leng = -inow*$("ul li").eq(0).width()+"px";
oul.animate({"left":leng});
})
$(".prev").click(function(){
if(inow == 0){
var ml = -$("ul li").eq(0).width()*($("ul li").length/2)+"px";
oul.css("left",ml);
inow = $("ul li").length/2-1;
}else{
inow--;
}
var leng = -inow*$("ul li").eq(0).width()+"px";
oul.animate({"left":leng});
})
function autoplay(){
timer = setInterval(function(){
if(inow == $("ul li").length/2){
oul.css("left","0px");
inow = 1;
}else{
inow++;
}
console.log(inow);
var leng = -inow*$("ul li").eq(0).width()+"px";
oul.animate({"left":leng});
},2000);
}
autoplay();
</script>
</html>
この記事が皆さんのお役に立てれば幸いです。技術的な交流が好きな方は、私をフォローして一緒にフロントエンド テクノロジを交流してください。
要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、JavaScript ビデオ チュートリアルをご覧ください。
以上がネイティブ JS で記述され、IE6、7、および 8 ブラウザーと互換性があり、シームレスな自動カルーセル (ボタン切り替え付き) を実現します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。