仿淘宝首页轮播

来源：互联网发布：越知月光图片编辑：程序博客网时间：2024/04/30 12:39

仿淘宝首页轮播

大一学了HTML和js，由于老师讲的比较慢，所以就自学，看着看着感觉，这个轮播挺有意思的，就去问老师，老实说网上有这样的插件，所有我就回去网上所了一下，果然有，给大家推荐一个网站：http://www.jq22.com/。这个网站有很多的特效插件，不过好多都是用到了jquary，但是对于刚刚接触web前端的同学来说，可能看代码的话，比较困难，所以，出于这样的目的，我就写了一个没有用到jquary，只是简单的js，有C语言或者其他编程语言的同学们，看起来非常容易。

这是代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body{ background-color: cornsilk;}#swap{width: 520px;height: 280px;margin:25% auto;border: 1px red solid;}#swap #imgage{width: 520px;height: 280px;position: absolute;}#swap .left, #swap .right{width: 25px;height:36px;text-align: center;line-height: 36px;color: white;font-weight: bold;background: black;opacity: 0.2;filter: alpha(opacity:20);cursor: pointer;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;border: 1px black solid;position: absolute;margin-top:121px;z-index:500;display: none;}#swap .right{margin-left: 492px;}#swap #index{padding-left: 5px;padding-right: 5px;height: 14px;border: 1px whitesmoke solid;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;background: whitesmoke;opacity: 0.8;position: absolute;margin-top: 251px;margin-left:20%;z-index: 50;text-align: center;padding-top: 2px;}#swap .indexvalue{display: inline-block;width: 9px;height: 9px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;background: cyan;border: 1px whitesmoke solid;margin-left: 2px;margin-right: 2px; cursor:pointer;font-size:0px;}</style></head><body><div id="swap"><div class="left"><</div><a href="" id="alianjie"><img src="" alt="" id="imgage" /></a><div id="index"></div><div class="right">></div></div></body><script>var oleft=document.getElementsByClassName('left')[0];//左按钮var oright=document.getElementsByClassName('right')[0];//右按钮var oswap=document.getElementById('swap');//整个外边框var oimg=document.getElementById('imgage');//img标签var arr_img=['img/p1.jpg','img/p2.jpg','img/p3.jpg','img/p4.jpg','img/p5.jpg'];//图片地址链接var arr_href=['#1','#2','#3','#4','#5'];//图片超链接var oa=document.getElementById('alianjie')//a链接var num=1;var i=0;var oindexvalue=document.getElementsByClassName('indexvalue');var oindex=document.getElementById('index');//索引oswap.onmouseover=function()//鼠标移到该上面{oleft.style.display="block";oright.style.display="block";}oswap.onmouseout=function()//鼠标移走{oleft.style.display="none";oright.style.display="none";}oleft.onmouseover=function()//鼠标移到左按钮{oleft.style.cssText="opacity: 0.6;"}oleft.onmouseout=function()//鼠标移开左按钮{oleft.style.cssText="opacity: 0.2;"}oright.onmouseover=function()//鼠标移到左按钮{oright.style.cssText="opacity: 0.6;"}oright.onmouseout=function()//鼠标移开左按钮{oright.style.cssText="opacity: 0.2;"}function myfunction(){oimg.src=arr_img[num-1];oa.href=arr_href[num-1];}myfunction();oright.onclick=function()//鼠标点击右按钮{for(var t=0;t<arr_href.length;t++){oindexvalue[t].style.background='cyan';}if (num==arr_img.length) {num=1;} else{num++;} oindexvalue[num-1].style.background="red";myfunction();}function fun(){for(var t=0;t<arr_href.length;t++){oindexvalue[t].style.background='cyan';}if (num==arr_img.length) {num=1;} else{num++;} oindexvalue[num-1].style.background="red";myfunction();}var c=setInterval(fun,2000);oleft.onclick=function()//鼠标点击左按钮{for(var t=0;t<arr_href.length;t++){oindexvalue[t].style.background='cyan';}if(num==1){num=arr_img.length;}elsenum--;oindexvalue[num-1].style.background="red";myfunction();}function fwidth()//设置索引的宽(可以自动变换的){oindex.style.width='arr_href.length*10+"px"';}fwidth();for(var j=0;j<arr_href.length;j++)//添加索引里的小圆球{oindex.innerHTML+="<span class='indexvalue' id='q1'>"+j+"</span>";//给索引小球添加内容j}var k=0;oindexvalue[0].style.background='red';for(i;i<arr_href.length;i++){oindexvalue[i].onclick=function(){k++;for(var t=0;t<arr_href.length;t++){oindexvalue[t].style.background='cyan';}this.style.backgroundColor="red";oimg.src=arr_img[this.innerHTML];//用小球内容作为数组下标}}</script></html>

项目地址：点击打开链接

0 0