<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/test.css">
</head>
<body>
<div id="content">
<ul id="list">
<li style="display:block;"><img src="../img/1.jpg" alt=""></li>
<li><img id="obj" src="../img/2.jpg" alt=""></li>
<li><img id="obj" src="../img/3.jpg" alt=""></li>
<li><img id="obj" src="../img/4.jpg" alt=""></li>
<li><img id="obj" src="../img/5.jpg" alt=""></li>
<li><img id="obj" src="../img/6.jpg" alt=""></li>
</ul>
<div id="big1">
<div id="small"><</div>
</div>
<div id="big2" >
<div id="small" style="float:right">></div>
</div>
<ul id="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
<script type="text/javascript">
var list = document.getElementById('list');
var lis = list.getElementsByTagName('li');
var big = document.getElementById("big");
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var lrp = slider.getElementsByTagName('li');
var index = 0;
//隐藏显示
content.onmouseover = function(){
big1.style.display = "block";
big2.style.display = "block";
}
content.onmouseout = function(){
big1.style.display = "none";
big2.style.display = "none";
}
//点击切换
big1.onclick = function(){
index++;
if(index==lis.length-1){
index=0;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display="block";
}
big2.onclick = function(){
index--;
if(index<0){
index=lis.length-1;
}
for (var i = lis.length-1; i >= 0; i--) {
lis[i].style.display = "none";
}
lis[index].style.display="block";
}
//123456
for (var i = 0; i < lrp.length; i++) {
lrp[i].onmouseover = function(){
index++;
if(index==lrp.length-1){
index=0;
}
for (var i = 0; i < lrp.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
}
}
// 实现图片的自动切换效果
//时间间隔 单位毫秒
var timeInterval=2000;
setInterval(changeImg,timeInterval);
function changeImg()
{
// var obj=document.getElementById("obj");
if (index==lis.length-1)
{
index=0;
}
else
{
console.log(index);
index++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
console.log(index);
// obj.src=arr[index];
}
</script>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/test.css">
</head>
<body>
<div id="content">
<ul id="list">
<li style="display:block;"><img src="../img/1.jpg" alt=""></li>
<li><img id="obj" src="../img/2.jpg" alt=""></li>
<li><img id="obj" src="../img/3.jpg" alt=""></li>
<li><img id="obj" src="../img/4.jpg" alt=""></li>
<li><img id="obj" src="../img/5.jpg" alt=""></li>
<li><img id="obj" src="../img/6.jpg" alt=""></li>
</ul>
<div id="big1">
<div id="small"><</div>
</div>
<div id="big2" >
<div id="small" style="float:right">></div>
</div>
<ul id="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
<script type="text/javascript">
var list = document.getElementById('list');
var lis = list.getElementsByTagName('li');
var big = document.getElementById("big");
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var lrp = slider.getElementsByTagName('li');
var index = 0;
//隐藏显示
content.onmouseover = function(){
big1.style.display = "block";
big2.style.display = "block";
}
content.onmouseout = function(){
big1.style.display = "none";
big2.style.display = "none";
}
//点击切换
big1.onclick = function(){
index++;
if(index==lis.length-1){
index=0;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display="block";
}
big2.onclick = function(){
index--;
if(index<0){
index=lis.length-1;
}
for (var i = lis.length-1; i >= 0; i--) {
lis[i].style.display = "none";
}
lis[index].style.display="block";
}
//123456
for (var i = 0; i < lrp.length; i++) {
lrp[i].onmouseover = function(){
index++;
if(index==lrp.length-1){
index=0;
}
for (var i = 0; i < lrp.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
}
}
// 实现图片的自动切换效果
//时间间隔 单位毫秒
var timeInterval=2000;
setInterval(changeImg,timeInterval);
function changeImg()
{
// var obj=document.getElementById("obj");
if (index==lis.length-1)
{
index=0;
}
else
{
console.log(index);
index++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
console.log(index);
// obj.src=arr[index];
}
</script>
</html>
其余样式大家可以下载了文件自己去看哦~都是小编刚刚敲出来的 代码还热乎呢 嘿嘿
博主每次都会把学到的小知识跟大家分享哦 假如有什么缺点,还是希望朋友们多多提出 方便我提升哦 嘿嘿!蟹蟹大家啦~喜欢的点个赞哦 可以互相关注 哈哈哈 明天见