手動圖片切換
現(xiàn)在總覺得自己停滯不前,要找找原因啦??!學習是一條漫長的路,在這條路上只有不斷的努力才能得到更多的知識,大家一起加油吧,每天進步一點點哦! 簡單的HTML 下面是一個簡單的HTML代碼示例:
現(xiàn)在總覺得自己停滯不前,要找找原因啦??!學習是一條漫長的路,在這條路上只有不斷的努力才能得到更多的知識,大家一起加油吧,每天進步一點點哦!
簡單的HTML
下面是一個簡單的HTML代碼示例:
上面的代碼展示了一個圖片切換效果,通過點擊數(shù)字可以切換顯示不同的圖片。
CSS樣式
下面是相關的CSS樣式:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.container {
margin: 0 auto;
width: 720px;
}
.container .container_img {
width: 720px;
height: 450px;
overflow: hidden;
}
.container .container_img ul {
width: 2920px;
height: 450px;
}
.container .container_img ul li {
position: relative;
float: left;
}
.container _num {
position: relative;
top: -80px;
width: 720px;
height: 80px;
background: rgba(0,0,0,0.5);
}
.container _num li {
float: left;
margin: 30px 0 0 20px;
padding: 0 5px;
width: 10px;
height: 20px;
border: 1px solid #bbb;
background: gray;
}
.container _num {
margin-top: 25px;
border: 1px solid #fff;
}
.container _num a {
color: #fff;
}
.container _num li a {
text-decoration: none;
color: #bbb;
}
以上是CSS樣式文件中定義的樣式,通過這些樣式可以實現(xiàn)圖片切換效果的顯示。
JavaScript代碼
下面是實現(xiàn)圖片切換效果的一小段JavaScript代碼:
通過上述JavaScript代碼,當鼠標放在小數(shù)字上時,會有一個小效果,并切換顯示對應的圖片。
以上是關于手動圖片切換的相關內(nèi)容,希望對大家有所幫助。