JavaScript学习---自己动手写的图片轮播
Posted NotFoundObject
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript学习---自己动手写的图片轮播相关的知识，希望对你有一定的参考价值。
效果如下：
图片定时轮播
点击左右控制显示下一张或上一张图片
index.html文件
<html> <head> <title> js编写实现幻灯片效果 </title> <meta content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> js编写实现幻灯片效果 <div class="content"> <div id="cimg1" > <img src="images/1.jpg" id="imgs"/> <div id="cimg4"><img src="images/left.png" /></div> <div id="cimg5"><img src="images/right.png" /></div> <div id="text"> <p id="textfont"> </p> </div> </div> </div> </body> <script src=\'js/index.js\'></script> </html>
css样式代码：（css/style.css）
.content{
width:450px;
height:300px;
margin: 120px auto;
}
#cimg1 img{
width:450px;
height:300px;
}
#cimg4{
width:30px;
height:25px;
position:relative;
left:0px;
top:-150px;
}
#cimg5{
width:30px;
height:25px;
position:relative;
left:420px;
top:-175px;
}
#cimg4 img{
width:20px;
height:25px;
}
#cimg5 img{
width:20px;
height:25px;
}
#text{
height:50px;
width:100%;
background:#222222;
position:relative;
left:0px;
top:-100px;
}
#text p{
color:#fff;
text-align:center;
}
javascript代码（js/idnex.js）
//获取放置图片div的对象
cimg1obj=document.getElementById("cimg1");
imgsobj=document.getElementById("imgs");
textobj=document.getElementById("textfont");
//左右翻转的图片
cimg4obj=document.getElementById("cimg4");
cimg5obj=document.getElementById("cimg5");
cimg4obj.onmouseover=function () {
cimg4obj.style.background="#b3b3b3";
cimg4obj.style.borderRadius="20px"
}
cimg4obj.onmouseout=function () {
cimg4obj.style.background="";
}
cimg5obj.onmouseover=function () {
cimg5obj.style.background="#b3b3b3";
cimg5obj.style.borderRadius="20px"
}
cimg5obj.onmouseout=function () {
cimg5obj.style.background="";
}
//向左的图标被点击时
//变量i用于记录当前的图片
//可以控制图片轮播的数量当前i的最大值只能为3，最小为0
i=1;
imgsobj.src="images/"+i+".jpg";//默认幻灯片出来的图片是第一张
textadd();
//向左的图标被点击时
cimg4obj.onclick=function () {
i--;
if(i==0){
i=3;
}
imgsobj.src="images/"+i+".jpg";//重写图片路径
textadd();
}
//向右的图标被点击时
cimg5obj.onclick=function () {
i++;
if(i==4){
i=1;
}
imgsobj.src="images/"+i+".jpg";//重写图片路径
textadd();
}
//创建定时器实现自动图片轮播每隔5秒换一张图
setInterval("jishi()",5000);//1000为1秒钟
function jishi()
{
i++;
if(i==4){
i=1;
}
imgsobj.src="images/"+i+".jpg";//重写图片路径
textadd();
}
//为相应的图像添加文字
function textadd(){
switch (i) {
case 1:
textobj.innerHTML="《霸王别姬》<br/>说的是一辈子!差一年,一个月,一天,一个时辰,都不算一辈子! ";
break;
case 2:
textobj.innerHTML="《春光乍泄》<br/>试问谁不想从头来过,但世间又有多少爱可以重来呢?";
break;
case 3:
textobj.innerHTML="《东邪西毒》<br/>你不能再拥有的时候。你唯一可以做的，就是让自己不要忘记。";
break;
}
}
以上是关于JavaScript学习---自己动手写的图片轮播的主要内容，如果未能解决你的问题，请参考以下文章