ホームページ >ウェブフロントエンド >jsチュートリアル >JS でカルーセル画像を簡単に実装
JS でカルーセル画像を簡単に実装
- php中世界最好的语言オリジナル
- 2018-04-18 17:10:212568ブラウズ
今回はJSでカルーセル画像を簡単に実装する方法についてお届けします。JSでカルーセル画像を簡単に実装するための注意点を紹介します。
感想:
1. まず、画像を保持するコンテナが必要です。これを 1 つの画像の幅と高さに設定し、一度に 1 つの画像のみを表示できるようにします。配置用のコンテナ内の画像は float 形式になります。同時に、画像を回転すると、リストの Left 値を変更すると、表示される画像が変わります。
3. 画像カルーセルはタイマーを使用して、画像がループで表示されるようにリストの左の値を変更します。
4. マウスを画像上に移動すると、画像の回転が停止します。 . マウスを移動すると続行します
5. 現在表示されている画像に対応する小さな点のグループが表示されます。同時に、それをクリックすると、対応する画像が表示されます。画像をクリックすると左右にスライドすると表示されます
コード:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>轮播图</title>
<styletype="text/css">
.container{
margin:0 auto;
width:600px;
height:400px;
position: relative;
overflow: hidden;
border:4px solid gray;
box-shadow: 3px 3px 5px gray;
border-radius:10px;
}
.list{
width:4200px;
height:400px;
position: absolute;
top:0px;
}
img{
float:left;
width:600px;
height:400px;
}
.dots{
position: absolute;
left:40%;
bottom:30px;
list-style: none;
}
.dots li{
float:left;
width:8px;
height:8px;
border-radius: 50%;
background: gray;
margin-left:5px
}
.dots .active{
background: white;
}
.pre,.next{
position: absolute;
top:40%;
font-size:40px;
color:white;
text-align:center;
background: rgba(128,128,128,0.5);
/* display:none;*/
}
.pre{
left:30px;
}
.next{
right:30px;
}
</style>
</head>
<body>
<pclass="container">
<pclass="list"style=" left:-600px;">
<imgsrc="img/5.jpg">
<imgsrc="img/1.jpg">
<imgsrc="img/2.jpg">
<imgsrc="img/3.jpg">
<imgsrc="img/4.jpg">
<imgsrc="img/5.jpg">
<imgsrc="img/1.jpg">
</p>
<ulclass="dots">
<liindex=1class="active dot"></li>
<liindex=2class="dot"></li>
<liindex=3class="dot"></li>
<liindex=4class="dot"></li>
<liindex=5class="dot"></li>
</ul>
<pclass="pre"><</p>
<pclass="next">></p>
</p>
<scripttype="text/javascript">
var index=1,timer;
function init(){
eventBind();
autoPlay();
}
init();
function autoPlay(){
timer =setInterval(function () {
animation(-600);
dotIndex(true);
},1000)
}
function stopAutoPlay() {
clearInterval(timer);
}
function dotIndex(add){
if(add){
index++;
}
else{
index--;
}
if(index>5){
index = 1;
}
if(index<1){
index=5;
}
dotActive();
}
function dotActive() {
vardots=document.getElementsByClassName("dot");
varlen=dots.length;
for(vari=0;i<len ;i++){
dots[i].className="dot";
}
for(vari=0;i<len;i++){
/*此处可以不用parseInt，当不用全等时*/
if(index === parseInt(dots[i].getAttribute("index"))){
dots[i].className="dot active";
}
}
}
function eventBind(){
/*点的点击事件*/
vardots=document.getElementsByClassName("dot");
varlen=dots.length;
for(vari=0;i<len;i++){
(function(j){
dots[j].onclick=function(e){
varind=parseInt(dots[j].getAttribute("index"));
animation((index - ind)*(-600));/*显示点击的图片*/
index= ind;
dotActive();
}
})(i)
}
/*容器的hover事件*/
varcon=document.getElementsByClassName("container")[0];
/*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
con.onmouseover=function(e) {
stopAutoPlay();
}
con.onmouseout=function(e){
autoPlay();
}
/*箭头事件的绑定*/
varpre=document.getElementsByClassName("pre")[0];
varnext=document.getElementsByClassName("next")[0];
pre.onclick=function(e) {
dotIndex(false);
animation(600);
}
next.onclick=function(e) {
dotIndex(true);
animation(-600);
}
}
function animation(offset){
varlists=document.getElementsByClassName("list")[0];
varleft=parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
if(left<-3000){
lists.style.left="-600px";
}
else if(left>-600){
lists.style.left = "-3000px";
}
else{
lists.style.left = left+"px";
}
}
</script>
</body>
</html>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
js の通常の高速メモリ方法 JS を使用して Vue0.1 コードを Vue2.0 に追加してチェス盤の範囲を実現する方法以上がJS でカルーセル画像を簡単に実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。