javascript版购物网站图片轮转
前端时间刚学习javascript时做小项目是用到的，根据老师给的思路写的。
<!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 type="text/css">
#ad{
width:700px;
height:290px;
margin:0px auto;
position:relative;
}
#select{
position:absolute;
right:15px;
bottom:20px;
}
#select ul{
list-style-type:none;
}
#select ul li{
float:left;
width:30px;
height:30px;
background-color:#FFF;
color:#FF6600;
border-radius:15px;
cursor:pointer;
margin:5px;
text-align:center;
}
#select ul span{
margin:0px auto;
line-height:30px;
font-size:25px;
font-weight:bold;
}
#select ul li:hover{
background-color:#FF6600;
color:#fff;
}
</style>
<script type="text/javascript">
var now = 1;
var t;
function changeAd(){
//显示当前层的
var mydiv = document.getElementById("ad"+now);
var mycolors = document.getElementsByName("mylist");
mycolors[now-1].style.backgroundColor = "#ff6600";
mycolors[now-1].style.color = "#fff";
mydiv.style.display = "block";
//隐藏其他的
for(var index = 1; index <= 8; index++){
if(index!=now){
var mydiv = document.getElementById("ad"+index);
var mycolors = document.getElementsByName("mylist");
mycolors[index-1].style.backgroundColor = "#fff";
mycolors[index-1].style.color = "#ff6600";
mydiv.style.display = "none";
}
}
if(now==8){
now = 1;
}else{
now++;
}
t = setTimeout("changeAd()",1000);
}
function showNow(num){
now = num;
clearTimeout(t);
changeAd();
}
</script>
</head>
<body οnlοad="changeAd()">
<div id="ad">
<div id="ad1" style="display:none">
<a href="#">
<img src="p_w_picpaths/1.jpg" alt="第1张" title="第1张"/>
</a>
</div>
<div id="ad2" style="display:none">
<a href="#">
<img src="p_w_picpaths/2.jpg" alt="第2张" title="第2张"/>
</a>
</div>
<div id="ad3" style="display:none">
<a href="#">
<img src="p_w_picpaths/3.jpg" alt="第3张" title="第3张"/>
</a>
</div>
<div id="ad4" style="display:none">
<a href="#">
<img src="p_w_picpaths/4.jpg" alt="第4张" title="第4张"/>
</a>
</div>
<div id="ad5" style="display:none">
<a href="#">
<img src="p_w_picpaths/5.jpg" alt="第5张" title="第5张"/>
</a>
</div>
<div id="ad6" style="display:none">
<a href="#">
<img src="p_w_picpaths/6.jpg" alt="第6张" title="第6张"/>
</a>
</div>
<div id="ad7" style="display:none">
<a href="#">
<img src="p_w_picpaths/7.jpg" alt="第7张" title="第7张"/>
</a>
</div>
<div id="ad8" style="display:none">
<a href="#">
<img src="p_w_picpaths/8.jpg" alt="第8张" title="第8张"/>
</a>
</div>
<div id="select">
<ul>
<li name="mylist"><span οnmοuseοver="showNow(1)">1</span></li>
<li name="mylist"><span οnmοuseοver="showNow(2)">2</span></li>
<li name="mylist"><span οnmοuseοver="showNow(3)">3</span></li>
<li name="mylist"><span οnmοuseοver="showNow(4)">4</span></li>
<li name="mylist"><span οnmοuseοver="showNow(5)">5</span></li>
<li name="mylist"><span οnmοuseοver="showNow(6)">6</span></li>
<li name="mylist"><span οnmοuseοver="showNow(7)">7</span></li>
<li name="mylist"><span οnmοuseοver="showNow(8)">8</span></li>
</ul>
</div>
</div>
</body>
</html>
转载于:https://blog.51cto.com/chenhuixfyy/1030090
javascript版购物网站图片轮转相关推荐
- 实现“鼠标移入仿购物网站图片查看细节”功能
写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而"窃喜".如无特殊说明,demo都是 ...
- Javascript版-显示相应图片的详细信息
Hi All, 分享一个通过JS来显示相应图片的详细信息. 需求:进入页面时,动态加载图片信息:当鼠标移动到某一图片上时,则显示该图片的大图片并显示相应说明信息:当鼠标移开图片时,清除新创建的元素. ...
- HTML5响应式手机模板：【超炫购物模板】——仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板
HTML5响应式手机模板:电商网站设计--仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板 手机网站模板 电商网站手机模板 响应式手机网站 html5手机网站模板 ...
- javascript网页设计期末作业 购物网站
本次主要介绍下之前上传的作业的主要功能,网页下载地址: 网页设计期末作业 购物网站 如果对本文章内容还有疑问可以观看视频,也可以在评论区留言: javascript 网页设计期末作业 购物网站 网页实 ...
- HTML5期末大作业网页设计：电商购物网站设计(56页) HTML+CSS+JavaScript 毕业设计、课程设计适用...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
- HTML5期末大作业：仿唯品会购物网站设计——仿唯品会购物商城(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 商城网站设计
HTML5期末大作业:仿唯品会购物网站设计--仿唯品会购物商城(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 商城网站设计 常见网页设计作业题材有 个人. 美食. 公司. ...
- HTML5期末大作业：电商购物网站设计——红色的服装商城B2C网站(40页) HTML+CSS+JavaScript 电商购物功能齐全 dw网页设计 大学生商城购物网站
HTML5期末大作业:电商购物网站设计--红色的服装商城B2C网站(40页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常 ...
- HTML5期末大作业：官网时尚购物(网站设计——美丽说官网时尚购物(1页) HTML+CSS+JavaScript 网页设计成品DW静态网页Html5响应式css3
HTML5期末大作业:官网时尚购物(网站设计--美丽说官网时尚购物(1页) HTML+CSS+JavaScript 网页设计成品DW静态网页Html5响应式css3 常见网页设计作业题材有 个人. 美 ...
最新文章
- NBT：用16S及18S rRNA全长进行微生物多样性研究
- ansible 非root 用户 批量修改用户密码
- 调用阿里云接口实现短信消息的发送源码——CSDN博客
- 计算一列中某个值的个数
- @getmapping注解的作用_@Transactional注解失效了？你遇到的是这6种场景吧！
- Cocos2d-x中常用的类
- java案例代码7--双色球的小项目
- idea在编辑界面上显示多个文件
- qq android qav,33 BK.QQAVManager 音视频管理
- ABAP培训进入SAP第一步
- 目标检测---搬砖一个ALPR自动车牌识别的环境
- java分词支持拼音_支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
- 歌声美化歌声转换方法与方案
- 以休闲游戏“植物大战僵尸”为例，制作无限阳光修改器。
- 强化学习： 贝尔曼方程与马尔可夫决策过程
- 微信公众号接口调试流程
- AUTO CAD出现无法识别的版本，如何解决？
- Java 中的get set方法快捷键和含义
- 都柏林硕士计算机英文,都柏林大学计算机硕士4月22号、23号上海、北京面试，现场发录取…...
- SL8521E开发笔记---UART配置