核心代码如下，大家可以参考
复制代码 代码如下:
<script src="/UploadFiles/2021-04-02/jquery.js"><script>
$(document).ready(function(){
$(".bannerbutton li").each(
function(){
$(this).click(
function(){
bannerGo($(this).attr("num"));
}
)
}
)
$(".img li:last").html($(".img li:first").html());
});
var active=1;//当前显示第1个
var picNum=4;//4个图转换
var time=500;//移动速度
var intTime=3000;//自动转换间隔时间
var width=568; //图片宽
var perDistance=57;//每次移动距离
var tagObj=0;
var marquee;
var autoMarquee;
var distance;
var tmpDistance=0;
var listLeft=0;
var tagLeft=0;
var move=false;
function bannerGo(tag){
if(active != tag){
if(!move){
listLeft=parseInt($(".banner ul.img").css("left"));
distance=(tag-active)*width;
tmpDistance=0;
perTime=parseInt(time*perDistance/distance);
if(tag>active){
tagLeft=listLeft-distance;
marquee=setInterval("Marquee(1)",perTime)
}else{
tagLeft=listLeft-distance;
marquee=setInterval("Marquee(0)",perTime)
}
active=Number(tag);
if(active==picNum+1)
active=1;
move=true;
}
}
}
function Marquee(t){
var x=false;
if(t==0){
listLeft=listLeft+perDistance;
if((tagLeft-listLeft)>=perDistance){
$(".banner ul.img").css("left",listLeft+"px");
}else{
$(".banner ul.img").css("left",tagLeft+"px");
x=true;
}
}else{
listLeft=listLeft-perDistance;
if((tagLeft-listLeft)<=perDistance){
$(".banner ul.img").css("left",listLeft+"px");
}else{
$(".banner ul.img").css("left",tagLeft+"px");
x=true;
}
}
if(x){
clearInterval(marquee);
tmpDistance=0;
listLeft=0;
tagLeft=0;
move=false;
$(".bannerbutton li").css("background","url(/images/index/b2.gif) no-repeat");
$(".bannerbutton li[@num="+active+"]").css("background","url(/images/index/b1.gif) no-repeat");
if(tagObj==picNum+1){
$(".banner ul.img").css("left","0");
active=1;
}
}
}
function autoMarquee(){
tagObj=Number(active)+1;
bannerGo(tagObj);
}
function autoMarqueeStart(){
if(!move){
marquee=setInterval("autoMarquee()",intTime)
}else{
setTimeout("autoMarqueeStart()",time);
}
}
autoMarqueeStart();
</script>
<style>
*{margin:0;padding:0;border:0}
li{float:left;}
ul{list-style-type:none;}
.banner{height:228px;width:568px;overflow:hidden;}
.bannerbutton li{
width:23px;
height:22px;
background:url(/images/index/b2.gif) no-repeat;
cursor:pointer;
line-height:22px;
text-align: center;
color: #fff;
font-weight: bold;
}
.banner .img li{float:left;}
.banner .img {
position: relative;width:5600px;
}
body,td,th {
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
<div class="banner">
<ul class="bannerbutton" style="position:absolute;z-index:2;top:200px;;left:10px;">
<li num=1 style="background:url(/images/index/b2.gif);">1</li>
<li num=2>2</li>
<li num=3>3</li>
<li num=4>4</li>
</ul>
<ul class="img" style="left:0px;">
<li><img src="/UploadFiles/2021-04-02/bn1.jpg"> <li><img src="/upload/image/2007-11-17_17-30-42.jpg"> <li><img src="/UploadFiles/2021-04-02/4bb7eaf902000mnl.jpg"> <li><img src="/upload/image/Products/2007-11-16_22-11-15.jpg"> <li></li>
</ul>
</div>
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。