Jquery js实现图片轮播代码
HTML:
< rel=\"stylesheet\" href=\"css/图片轮播1.css\">
< src=\"js/jquery-3.3.1.min.js\"></ >
< src=\"js/图片轮播1.js\"></ >
<body>
<div id=\"flash\">
<img width=\"800\" height=\"400\" src=\"img/f5.jpg\" style=\"display: block;\">
<img width=\"800\" height=\"400\" src=\"img/f4.jpg\" >
<img width=\"800\" height=\"400\" src=\"img/f3.jpg\" >
<img width=\"800\" height=\"400\" src=\"img/f2.jpg\" >
<ul>
<li style=\"background-color:#A10000;\"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 左右按钮 -->
<a class=\"btnLeft\"><</a>
<a class=\"btnRight\">></a>
</div>
CSS：
*{
padding: 0;
margin: 0;
}
#flash{
width: 800px;
height: 400px;
margin:100px auto;
position: relative;
}
#flash img{
position: absolute;
display: none;
left: 0;
top:0;
}
#flash ul{
position: absolute;
left: 568px;
bottom: 23px;
}
#flash ul li{
list-style: none;
width:12px;
height:12px;
background: #DDDDDD;
float: left;
border-radius: 50%;
margin-right: 8px;
}
#flash a{
position: absolute;
opacity: 0.6;
cursor: pointer;
}
#flash .btnLeft{
left: 20px;
top:50%;
font-size: 50px;
}
#flash .btnRight{
right:20px;
top:50%;
font-size: 50px;
}
#flash .btnLeft:hover,#flash .btnRight:hover{
color: red;
}
JS代码：
//Jquery 实现
//小技巧：不同的途径控制相同的元素，都通过
//大总管变量c来实现
var c=0; //c为几，几号图片显示，大总管变量
//设置定时器，控制自动轮播
var timer=setInterval(run,1000)
//图片变化 切换样式
var changer=function changer(){
//让c号图片显示，兄弟图片隐藏
$(\"#flash img\").eq©.fadeIn(300).siblings(‘img’).fadeOut(300);
//让c号li变化，其他li变黑
$(\"#flash ul li\").eq©.css(‘background’,’#A10000’).siblings(‘li’)
.css(‘background’,’#DDDDDD’);
}
//定时器调用的run函数
function run(){
c++;
if(c==4){c=0;}
document. =c;
changer();
}
$(document).ready(function(){
$(\"#flash\").hover(function(){
//清理定时器
clearInterval(timer);
},function(){
// 鼠标移出重新设置定时器
timer=setInterval(run,1000)
})
})
//鼠标移入小圆点的效果
$(document).ready(function(){
KaTeX parse error: Expected \'EOF\', got \'#\' at position 3: (\"#̲flash ul li\").m…(this).index();
changer();
})
})
//鼠标点击左右按钮的效果
$(document).ready(function(){
$(\"#flash .btnRight\").click(function(){
c++;
if(c4){c=0};
document. =c;
changer();
})
})
// 右按钮
$(document).ready(function(){
$(\"#flash .btnLeft\").click(function(){
c–;
if(c-1){c=3};
document. =c;
changer();
})
})
继续阅读与本文标签相同的文章
内存老弟，这才调用两层函数，别晕倒啊！
哈夫曼树
-
虚拟机模拟部署Extended Clusters（五）总结
2026-05-18栏目： 教程
-
Java计算两个日期相差的月数
2026-05-18栏目： 教程
-
精准测试与自动化测试的无缝对接
2026-05-18栏目： 教程
-
Arthas 3.1.2 版本发布 | 增加 logger/heapdump/vmoption 命令
2026-05-18栏目： 教程
-
springboot数据库主从方案
2026-05-18栏目： 教程