地下城官网样式 轮播有缺陷,点击时不能换图片或是想要的画面

<!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>
<link href="css/Untitled-2.css" rel="stylesheet" type="text/css" />
<style>
@charset "utf-8";
.toubu
{
height:40px;
width:100%;
border:0px solid #CC0;
position:absolute;
top:0px;
left:180px;
}
*
{
margin:0px;
padding:0px;}

.jing1
{
height:270px;
width:1000px;
border:0px solid #006;
position:relative;
top:50px;
left:183px;}
.jing11
{
height:30px;
width:800px;
border:0px solid #000;
position:relative;
top:20px;
left:100px;
font-family:"MS Serif", "New York", serif;
font-size:24px;
color:#606;}
.jing111
{
height:30px;
width:110px;
border:0px solid #339;
position:relative;
left:8px;
float:left;
text-align:center;
line-height:30px;}
.jing12
{
height:200px;
width:784px;
border:0px solid #3F6;
position:relative;
top:22px;
left:107px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:18px;
color:#900;}
.jing13
{
height:270px;
width:1060px;
border:0px solid #036;
position:relative;
top:40px;
left:-43px;}
.jing131
{
height:270px;
width:410px;
border:0px solid #0C0;
position:relative;
left:648px;
top:-3px;
background-color:#966;}
.jing1311
{
width:80px;
height:30px;
border:#000 0px solid;
position:relative;
top:10px;
left:0px;
float:left;
text-align:center;
line-height:30px;}
.jing1312
{
width:410px;
height:230px;
border:#000 0px solid;
position:relative;
top:40px;
left:0px;
text-align:center;}
.jing13121
{
height:30px;
width:410px;
border:0px solid #3C6;
position:relative;
top:-15px;
left:0px;
float:left;
line-height:30px;
color:#60C;
text-align:left;}
.gonggao
{
height:30px;
width:410px;
border:0px solid #3C6;
position:relative;
top:-15px;
left:0px;
float:left;
line-height:30px;
color:#60C;
text-align:left;}
.jing132
{
height:270px;
width:450px;
border:0px solid #0C6;
position:relative;
top:-273px;
left:197px;}
.jing133
{
height:135px;
width:196px;
border:#300 0px solid;
position:relative;
top:-542px;
left:-5px;}
.jing134
{
height:132px;
width:196px;
border:#300 0px solid;
position:relative;
top:-542px;
left:-5px;}
.bei
{
height:480px;
width:1066px;
border:0px solid #000;
position:relative;
top:50px;
left:134px;}
.wei
{
height:130px;
width:100%;
border:0px solid #000;
position:relative;
top:51px;}
</style>
</head>

<body>
<div class="toubu"><img src="images/toubu.png" height="40px" /></div>
<div class="jing">
<div class="jing1">
<div class="jing11">
<div class="jing111">官方首页</div>
<div class="jing111">游戏资料</div>
<div class="jing111">&nbsp;活动&nbsp;</div>
<div class="jing111">&nbsp;赛事&nbsp;</div>
<div class="jing111">自助服务</div>
<div class="jing111">游戏安全</div>
<div class="jing111">玩家社区</div>
</div>
<div class="jing12">
<table width="784px" height="200px" align="center" border="0px" cellpadding="0px" cellspacing="0px">
<tr align="center">
<td>社区平台</td>
<td>新手指南</td>
<td>官方活动</td>
<td>全年赛事</td>
<td>&nbsp;充值&nbsp;</td>
<td>安全公约</td>
<td>&nbsp;论坛&nbsp;</td>
</tr>
<tr align="center">
<td>道聚城</td>
<td>版本专题</td>
<td>合作活动</td>
<td>格斗大赛</td>
<td>消费记录</td>
<td>封号查询</td>
<td>&nbsp;微信&nbsp;</td>
</tr>
<tr align="center">
<td></td>
<td>壁纸时装</td>
<td>媒体活动</td>
<td>职业联赛</td>
<td>点亮图标</td>
<td>视频举报</td>
<td>&nbsp;微博&nbsp;</td>
</tr>
<tr align="center">
<td></td>
<td>漫画连载</td>
<td>每日签到</td>
<td>天王赛</td>
<td>兑换码</td>
<td>被盗找回</td>
<td>&nbsp;&nbsp;&nbsp;问答&nbsp;&nbsp;&nbsp;</a></td>
</tr>
<tr align="center">
<td></td>
<td>视频中心</td>
<td>每周活动</td>
<td>解说大赛</td>
<td>预约组队</td>
<td>角色恢复</td>
<td></td>
</tr>
</table>
</div>
<div class="jing13">
<div class="jing131">
<div class="jing1311">新闻</div>
<div class="jing1311">公告</div>
<div class="jing1311">活动</div>
<div class="jing1311">赛事</div>
<div class="jing1311">社区</div>
<div class="jing1312">
<div class="jing13121">&nbsp;&nbsp;&nbsp;<a href="/webplat/info/news_version3/119/495/496/m397/201608/500064.shtml" target="_blank">[新闻] 全新赫拉斯地下城等你来挑战!</a></div>
<div class="jing13121">&nbsp;&nbsp;&nbsp;<a href="/webplat/info/news_version3/119/495/496/m397/201608/501676.shtml" target="_blank">[新闻] 三大明星亮相DNF辣眼睛公益直播</a></div>
<div class="jing13121">&nbsp;&nbsp;&nbsp;<a href="/webplat/info/news_version3/119/495/496/m397/201608/501667.shtml" target="_blank">[新闻] DNF游戏安全满意度调查</a></div>
<div class="jing13121">&nbsp;&nbsp;&nbsp;<a href="/webplat/info/news_version3/119/495/496/m397/201608/501456.shtml" target="_blank">[新闻] 细数会被队友砍死的特效装备</a></div>
<div class="jing13121">&nbsp;&nbsp;&nbsp;<a href="/webplat/info/news_version3/119/495/496/m397/201608/501324.shtml" target="_blank">[新闻] 冒险故事在这停顿,玩家原创社区上线</a></div>
<div class="jing13121">&nbsp;&nbsp;&nbsp;<a href="/webplat/info/news_version3/119/495/496/m397/201608/500061.shtml" target="_blank">[新闻] 站街得史诗碎片、代币券、黄金增幅书</a></div>
<div class="jing13121">&nbsp;&nbsp;&nbsp;<a href="/webplat/info/news_version3/119/495/496/m397/201608/500062.shtml" target="_blank">[新闻] 每日签到享豪礼 海量史诗等你拿</a></div>
</div>
</div>
<div class="jing132"><img id="img" src="images/lun11.jpg"/></div>
<div class="jing133"><img src="images/xiazai.png" /></div>
<div class="jing134"><img src="images/TBD680]JX]$2L9EV${{]Y8R.png" width="196px" /></div>
</div>
</div>
</div>
<div class="bei"><img src="images/bei.png" /></div>
<div class="wei"><img src="images/wei.png" width="1366px"/></div>
</body>
</html>
<script>
var arr =new Array()
arr[0]="images/lun11.jpg";
arr[1]="images/lun22.jpg";
arr[2]="images/lun33.jpg";
arr[3]="images/lun44.jpg";
arr[4]="images/lun55.jpg";
var num=0;
setInterval(changeimg,2000)
function changeimg()
{
var obj=document.getElementById("img")
if(num==4)
{num=0;}
else
{num=num+1}
obj.src=arr[num]
}

</script>

时间: 2024-10-11 07:24:12

地下城官网样式 轮播有缺陷,点击时不能换图片或是想要的画面的相关文章

轮播图点击 手势 代码

#import "HotNewsTableViewController.h" #import "HotNewsTableViewCell.h" #import "HotNews.h" #import "JudegNetWorkType.h" #import "HotNewsDetailViewController.h" #import "MJRefresh.h" #import &quo

css实现的轮播和点击切换(无js版)

.slide{ position: relative; margin:auto; width: 600px; height: 200px; text-align: center; font-family: Arial; color: #FFF; overflow: hidden; } .slide ul{ margin:10px 0; padding:0; width: 9999px; transition:all 0.5s; } /*//自动播放*/ .slide .slide-auto{ a

图片轮播_支持显示网络图片及下载图片至SD后再显示

现在的移动应用, 很常见的一个交互效果就是在首页顶部添加图片轮播的控件, 焦点图可以放入广告, 也可以放入文章的内容图片, 它们不断自动切换, 点击焦点图即跳至对应的界面. 交互效果很棒. 做图片轮播的效果, 方法并不少. 本文使用了常见的viewpager 去实现. 支持显示网络图片下载在缓存显示, 如果有SD卡则默认将图片下载至SD卡中再显示本地的图片. 其实网上这类代码已经很多,  应该也有很多写得比我好. 今天有点时间, 就做了个来练手, 顺便写下自己第一篇原创文章. 敲代码之前也参考了

android ViewPager实现的轮播图广告自定义视图,网络获取图片和数据

public class SlideShowAdView extends FrameLayout { //轮播图图片数量    private static int IMAGE_COUNT = 3;    //自动轮播的时间间隔    private final static int TIME_INTERVAL = 5;    //自动轮播启用开关    private final static boolean isAutoPlay = false;       //自定义轮播图的资源ID   

android实现3D Gallery 轮播效果,触摸时停止轮播

1.轮播控件涉及到的两个类 CarouselViewPager.java public class CarouselViewPager extends ViewPager { @IntDef({RESUME, PAUSE, DESTROY}) @Retention(RetentionPolicy.SOURCE) public @interface LifeCycle { } public static final int RESUME = 0; public static final int P

javascript 实现图片轮播和点击切换功能

图片轮播是网页上一个比较常见的功能,下面我们来实现他吧 原理很简单: 1:固定的区域,所有的图片重叠,一次只能显示一张图片 2:通过改变图片的zIndex属性改变显示的图片,就可以达到切换的效果了 <!-- cycle_pic.html --> <!DOCTYPE html> <html> <head> <title>cycle_pic</title> <meta charset="utf-8"> &l

点击小图轮播,点击显示大图

 <script type="text/javascript">         var scrollPic1Index = 0, scrollPic2Index = 0, len = 0, len2 = 0, caseopenlength = 0, caseopenlength2 = 0;         function showScrollPic1(index) {             scrollPic1Index = $(index).index();    

vue中使用轮播图插件carousel,克隆的图片点击事件无效的解决办法

1 <div class="students-box" @click="clickSwiper"> 2 // 将点击事件绑定在父元素上 3 <carousel 4 :items="5" 5 :autoplay="true" 6 :nav="true" 7 :margin="20" 8 :loop="true" 9 :autoplayTimeout=&

程序员必知的技术官网系列--spring篇

进入官网首先看到的是官网的轮播和首页导航,其中首页导航有四个, 下图有详细介绍, 随后也会单独讲解个导航包含的内容,本文只介绍前两个导航栏的内容, 本文只负责介绍官网的页面结构和文章用到的页面的内容翻译来辅助官网内容结构的讲解, 不做具体技术文档的解释, 以后有机会了再做解释. 好了开干. 首页 官网首页导航 看完导航栏后我们先往下滚动可以看到spring全家桶中的三个明星产品:spring boot,spring cloud,spring data flow和一个居中的标题spring:the