基于JavaScript實(shí)現(xiàn)輪播圖效果
更新時(shí)間：2021年06月25日 10:07:14 作者：努力學(xué)習(xí)中.....
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
學(xué)習(xí)筆記（學(xué)校的課設(shè)），實(shí)現(xiàn)了左右切換，按指示點(diǎn)切換、按小圖標(biāo)切換和自動(dòng)切換，但是還有某些功能沒(méi)完善，如：切換到某張圖片后，左右并沒(méi)有切換到前后相應(yīng)的圖片。
先看實(shí)現(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è)置計(jì)時(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";
}
}
//離開(kāi)小圖標(biāo)時(shí)
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(){
//啟動(dòng)計(jì)時(shí)器
show=setInterval(changeImg, 3000);
}
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)輪播圖的完整代碼
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼
- JS實(shí)現(xiàn)左右無(wú)縫輪播圖代碼
- JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
- 原生js實(shí)現(xiàn)無(wú)限循環(huán)輪播圖效果
- 使用html+js+css 實(shí)現(xiàn)頁(yè)面輪播圖效果(實(shí)例講解)
- 基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
相關(guān)文章
微信小程序在其他頁(yè)面監(jiān)聽(tīng)globalData中值的變化
這篇文章主要給大家介紹了關(guān)于微信小程序如何在其他頁(yè)面監(jiān)聽(tīng)globalData中值的變化的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
全面解析JavaScript中apply和call以及bind(推薦)
在javascript中apply、call和bind是三兄弟，很好的搭檔，下面小編給大家全面解析JavaScript中apply和call以及bind的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
JS中showModalDialog關(guān)閉子窗口刷新主窗口用法詳解
這篇文章主要介紹了JS中showModalDialog關(guān)閉子窗口刷新主窗口用法,結(jié)合具體實(shí)例形式較為詳細(xì)的分析了showModalDialog常見(jiàn)用法與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03
值得分享和收藏的xmlplus組件學(xué)習(xí)教程
值得分享和收藏的xmlplus組件學(xué)習(xí)教程,xmlplus是一個(gè)設(shè)計(jì)非常獨(dú)特 JavaScript 框架，用于快速開(kāi)發(fā)前后端項(xiàng)目，感興趣的小伙伴們可以參考一下2017-05-05
JS數(shù)組扁平化的方法合集(遞歸，while循環(huán)，flat)
數(shù)組扁平化也是面試?？碱}之一,今天就和大家簡(jiǎn)單分享一下常見(jiàn)的數(shù)組扁平方法,這題其實(shí)主要考察的是遞歸思想,因?yàn)楫?dāng)數(shù)組里面嵌套非常多層數(shù)組的時(shí)候只能通過(guò)循環(huán)遞歸來(lái)進(jìn)行扁平,本次分享主要也是分享本題的遞歸思想,需要的朋友可以參考下2024-06-06
Canvas實(shí)現(xiàn)數(shù)字雨和放大鏡效果的代碼示例
這篇文章主要介紹了如何Canvas實(shí)現(xiàn)數(shù)字雨和放大鏡效果，文中有完整的代碼示例，文章通過(guò)代碼介紹的非常清楚，感興趣的小伙伴跟著小編一起來(lái)看看吧2023-07-07
electron-builder 的基本使用及electron打包步驟
electron-builder 作為一個(gè)用于 Electron 應(yīng)用程序打包的工具,需要下載并使用 Electron 運(yùn)行時(shí)來(lái)創(chuàng)建可執(zhí)行文件,這篇文章主要介紹了electron-builder 的基本使用,需要的朋友可以參考下2023-12-12
Javascript實(shí)現(xiàn)關(guān)閉廣告效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)關(guān)閉廣告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
本文主要介紹了常用的javascript設(shè)計(jì)模式:單體模式;工廠模式;單例模式;觀察者模式（發(fā)布訂閱模式）;策略模式等。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
js實(shí)現(xiàn)表格拖動(dòng)選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格拖動(dòng)選項(xiàng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04