基于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)文章
微信小程序在其他頁面監(jiān)聽globalData中值的變化
這篇文章主要給大家介紹了關(guān)于微信小程序如何在其他頁面監(jiān)聽globalData中值的變化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
全面解析JavaScript中apply和call以及bind(推薦)
在javascript中apply、call和bind是三兄弟，很好的搭檔，下面小編給大家全面解析JavaScript中apply和call以及bind的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實例形式較為詳細(xì)的分析了showModalDialog常見用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03
值得分享和收藏的xmlplus組件學(xué)習(xí)教程
值得分享和收藏的xmlplus組件學(xué)習(xí)教程,xmlplus是一個設(shè)計非常獨特 JavaScript 框架，用于快速開發(fā)前后端項目，感興趣的小伙伴們可以參考一下2017-05-05
JS數(shù)組扁平化的方法合集(遞歸，while循環(huán)，flat)
數(shù)組扁平化也是面試常考題之一,今天就和大家簡單分享一下常見的數(shù)組扁平方法,這題其實主要考察的是遞歸思想,因為當(dāng)數(shù)組里面嵌套非常多層數(shù)組的時候只能通過循環(huán)遞歸來進(jìn)行扁平,本次分享主要也是分享本題的遞歸思想,需要的朋友可以參考下2024-06-06
Canvas實現(xiàn)數(shù)字雨和放大鏡效果的代碼示例
這篇文章主要介紹了如何Canvas實現(xiàn)數(shù)字雨和放大鏡效果，文中有完整的代碼示例，文章通過代碼介紹的非常清楚，感興趣的小伙伴跟著小編一起來看看吧2023-07-07
electron-builder 的基本使用及electron打包步驟
electron-builder 作為一個用于 Electron 應(yīng)用程序打包的工具,需要下載并使用 Electron 運行時來創(chuàng)建可執(zhí)行文件,這篇文章主要介紹了electron-builder 的基本使用,需要的朋友可以參考下2023-12-12
Javascript實現(xiàn)關(guān)閉廣告效果
這篇文章主要為大家詳細(xì)介紹了Javascript實現(xiàn)關(guān)閉廣告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
本文主要介紹了常用的javascript設(shè)計模式:單體模式;工廠模式;單例模式;觀察者模式（發(fā)布訂閱模式）;策略模式等。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)表格拖動選項，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04