基于JavaScript實現(xiàn)輪播圖效果
更新時間：2021年06月25日 10:07:14 作者：努力學(xué)習(xí)中.....
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
學(xué)習(xí)筆記（學(xué)校的課設(shè)），實現(xiàn)了左右切換，按指示點切換、按小圖標(biāo)切換和自動切換，但是還有某些功能沒完善，如：切換到某張圖片后，左右并沒有切換到前后相應(yīng)的圖片。
先看實現(xiàn)效果：
代碼僅供參考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div0{
height: 100px;
width: 100%;
background-color:black;
opacity:0.75;
}
.div1{
background-image: url(img/bg2.png);
height: 400px;
width: 100%;
}
.div2{
height: 200px;
width: 100%;
background-color:black;
opacity:0.75;
position: absolute;
}
.spot{
position: absolute;
left: 10%;
}
.spot_list1{
float: left;
border:3px solid wheat;
transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
opacity:0.5;
}
.spot_list2{
float: left;
border:3px solid wheat;
transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
opacity:0.5;
}
.spot_list3{
float: left;
border:3px solid wheat;
transform:rotate(28deg);
-ms-transform:rotate(28deg);
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
opacity:0.5;
}
.div1_1{
border: 10px solid gainsboro;
width: 830px;
height: 300px;
left: 10%;
top: 10%;
position: relative;
overflow: hidden;
}
.btn {
width: 100%;
height: 80px;
position: absolute;
margin: 0 auto;
top: 120px;
}
.box_big {
position: absolute;
height: 400px;
vertical-align: middle
}
#imgList{
list-style: none;
position: absolute;
}
#imgList li{
float: left;
margin: 0 10px;
}
.left_btn, .right_btn {
width: 30px;
height: 80px;
background:gray;
line-height: 90px;
border-radius: 10px;
}
.left_btn {
float: left;
}
.right_btn {
float: right;
}
#navDiv{
position: absolute;
left: 300px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
border-radius:50%;
background-color: black;
margin: 0 10px;
opacity: 0.5;
filter: alpha(opacity=50);
}
#navDiv a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="div0"></div>
<div class="div1">
<div class="div1_1">
<div id="navDiv">
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
</div>
<div class="box_big">
<ul id="imgList">
<li><img src="img/1.jpg" id="1" ></li>
<li><img src="img/2.jpg" id="2></li>
<li><img src="img/3.jpg" id="3"/></li>
<li><img src="img/4.jpg" id="4"/></li>
<li><img src="img/5.jpg" id="5"/></li>
<li><img src="img/6.jpg" id="6"/></li>
</ul>
</div>
<div class="btn">
<div class="left_btn"><img src="img/prev.png"></div>
<div class="right_btn"><img src="img/next.png"></div>
</div>
</div>
</div>
<!--小標(biāo)圖片-->
<div class="div2" onmouseleave="m1()">
<div class="spot">
<img src="img/thumbs/1.jpg" class="spot_list1" id="spot_list1" onmouseover="mouseover(1)" onmouseout="mouseout(1)">
<img src="img/thumbs/2.jpg" class="spot_list2" id="spot_list2" onmouseover="mouseover(2)" onmouseout="mouseout(2)">
<img src="img/thumbs/3.jpg" class="spot_list3" id="spot_list3" onmouseover="mouseover(3)" onmouseout="mouseout(3)">
<img src="img/thumbs/4.jpg" class="spot_list1" id="spot_list4" onmouseover="mouseover(4)" onmouseout="mouseout(4)">
<img src="img/thumbs/5.jpg" class="spot_list2" id="spot_list5" onmouseover="mouseover(5)" onmouseout="mouseout(5)">
<img src="img/thumbs/6.jpg" class="spot_list3" id="spot_list6" onmouseover="mouseover(6)" onmouseout="mouseout(6)">
</div>
</div>
</body>
<script>
var box=document.getElementById("1");
//var spot = document.getElementsByClassName("spot_list");
var left_btn=document.getElementsByClassName("left_btn")[0];
var right_btn=document.getElementsByClassName("right_btn")[0];
var time = null;
var count = 0;
var ids=document.getElementsByTagName("a");
ids[0].style.backgroundColor="red";
var spot_list1=document.getElementById("spot_list1");
spot_list1.setAttribute("class","spot_list3");
spot_list1.style.opacity="0.98";
//左按鈕
left_btn.onclick=function(){
count--;
if(count<1){
count=6
}
box.src="img/" + count + ".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[count - 1].style.backgroundColor="red";
for(var i=1;i<=6;i++){
var img=document.getElementById("spot_list"+i);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
var img=document.getElementById("spot_list"+count);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
}
//右按鈕
right_btn.onclick=function(){
changeImg();
}
//
var x=1;
var changeImg = function(){
x++;
if(x > 6){
x = 1;
}
box.src = "img/" + x + ".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[x - 1].style.backgroundColor="red";
for(var i=1;i<=6;i++){
var img=document.getElementById("spot_list"+i);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
var img=document.getElementById("spot_list"+x);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
}
//設(shè)置計時器
var show;
show=setInterval(changeImg, 3000);
//圖片切換
function mouseover(n){
clearInterval(show);
var img=document.getElementById("spot_list"+n);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
box.src="img/"+n+".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[n-1].style.backgroundColor="red";
}
for(let i=0;i<ids.length;i++){
ids[i].onclick=function(){
clearInterval(show);
for(var n=0;n<ids.length;n++){
ids[n].style.backgroundColor="black";
}
box.src="img/"+(i+1)+".jpg";
ids[i].style.backgroundColor="red";
}
}
//離開小圖標(biāo)時
function mouseout(n){
var img=document.getElementById("spot_list"+n);
ids[n-1].style.backgroundColor="black";
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
function m1(){
//啟動計時器
show=setInterval(changeImg, 3000);
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)DOM對象選擇器,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
阻止mousemove鼠標(biāo)移動或touchmove觸摸移動觸發(fā)click點擊事件
這篇文章主要為大家介紹了阻止mousemove或touchmove與click事件同時觸發(fā)技巧，一個按鈕綁定了多個事件，所以就要想辦法阻止 mouse 鼠標(biāo)事件或 touch 觸摸事件 與 click 事件同時觸發(fā)，不然每次拖拽按鈕后都會觸發(fā) click 事件，這顯然是不友好的2023-06-06
這篇文章主要介紹了js實現(xiàn)按鈕顏色漸變動畫效果的方法,涉及javascript鼠標(biāo)事件及頁面表單元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-08-08
js關(guān)閉當(dāng)前頁面(窗口)的幾種方式總結(jié)
js關(guān)閉當(dāng)前頁面(窗口)的幾種方式總結(jié)，需要的朋友可以參考一下2013-03-03
JavaScript常用函數(shù)工具集：lao-utils
現(xiàn)在Javascript庫海量，流行的也多，比如jQuery，YUI等，雖然功能強大，但也是不萬能的，功能不可能涉及方方面面，這里給大家分享一個的JS庫是對這些的補充，很多也比較實用，把應(yīng)用到項目中中去也比較方面，這也是對工作的一些積累，也加深對知識的理解。2016-03-03
微信小程序scroll-view實現(xiàn)自定義滾動條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實現(xiàn)自定義滾動條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JavaScript中setter和getter方法介紹的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細(xì)介紹了bootstrap table表格使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了使用原生js編寫一個簡單的框選功能方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
實現(xiàn)非常簡單的js雙向數(shù)據(jù)綁定
Angular實現(xiàn)了雙向綁定機制。所謂的雙向綁定，無非是從界面的操作能實時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實時展現(xiàn)到界面。本文給大家詳細(xì)介紹js雙向數(shù)據(jù)綁定，感興趣的朋友參考下2015-11-11