模仿百度首页的图片轮播

js代码：

// JavaScript Document
var setint;
$(function(){
   operate();
    setint=setInterval("autoImg()",3000);
})
var desc=[];
function ainfo(desc,imgurl){
   this.de=desc;
   this.url=imgurl;

}
var a1=new ainfo("第一张图片","#");
desc.push(a1);
var a2=new ainfo("第二张图片","#");
desc.push(a2);
var a3=new ainfo("第三张图片","#");
desc.push(a3);
var a4=new ainfo("第四张图片","#");
desc.push(a4);
var a5=new ainfo("第五张图片","#");
desc.push(a5);
var a6=new ainfo("第六张图片","#");
desc.push(a6);
var a7=new ainfo("第七张图片","#");
desc.push(a7);

$("#right").click(function(){
autoImg();
});

$("#left").click(function(){
var num=$("#imglist").find("img.cur-select").attr("num");
var n=parseInt(num)-1;
$("#imglist").find("img.cur-select").removeClass("cur-select").addClass("imgNfoucus");
if(num>2&&num<4){
   var length=(n-2)*(-85);
   $("#imglist").animate({"left":length+"px"});
}else if(num==0){
   $("#imglist").animate({"left":"-170px"});
   n=6;
}
$("#imglist").find("img:eq("+n+")").addClass("cur-select").removeClass("imgNfoucus");
$("#imgview").find("a:eq("+n+")").show().siblings().hide();
$("#imgtitle").text(desc[n].de)

})
$("#imglist span img").hover(function(){
clearInterval(setint);
$(this).removeClass("imgNfoucus");
$(this).parent().siblings().children().addClass("imgNfoucus");
},function(){
$(this).addClass("imgNfoucus");
$("#imglist").find("img.cur-select").removeClass("imgNfoucus");
setint=setInterval("autoImg()",3000);
});

$("#imglist span img").click(function(){
$(this).removeClass("imgNfoucus").addClass("cur-select");
$(this).parent().siblings().children().addClass("imgNfoucus").removeClass("cur-select");
var sln=$(this).attr("num");
$("#imgview").find("a:eq("+sln+")").show().siblings().hide();
})
}

html：

<!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 type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/picplay.js"></script>
</head>

<body>
<div class="content">
<div class="center" id="bigimg">
<div class="imgView" id="imgview" num="0">
   <a><img src="data:images/b1.jpg" /></a>
   <a style="display:none"><img src="data:images/b2.jpg"/></a>
   <a style="display:none"><img src="data:images/b3.jpg" /></a>
   <a style="display:none"><img src="data:images/b4.jpg"/></a>
   <a style="display:none"><img src="data:images/b5.jpg"/></a>
   <a style="display:none"><img src="data:images/b6.jpg"/></a>
   <a style="display:none"><img src="data:images/b7.jpg"/></a>
</div>
<div class="arrorIcon l10" id="left"><img src="data:images/left.png" /></div>
<div class="arrorIcon r10" id="right"><img src="data:images/right.png" /></div>
<a href="#" class="imgTitle" id="imgtitle">第一张图片</a>
</div>
<div class="imglist">
<div id="imglist" class="imglistdiv">
   <span class="normal"><img src="data:images/s1.jpg" class="cur-select" num="0"/></span><span class="normal"><img src="data:images/s2.jpg" class="imgNfoucus" num="1"/></span><span class="normal"><img src="data:images/s3.jpg" class="imgNfoucus" num="2"/></span><span class="normal"><img src="data:images/s4.jpg" class="imgNfoucus" num="3"/></span><span class="normal"><img src="data:images/s5.jpg" class="imgNfoucus" num="4"/></span><span class="normal"><img src="data:images/s6.jpg" class="imgNfoucus" num="5"/></span><span class="normal"><img src="data:images/s7.jpg" class="imgNfoucus" num="6"/></span>
</div>
</div>
</div>
</body>
</html>

模仿百度首页的图片轮播相关推荐

java轮播添加图片_给网站首页添加图片轮播的效果
网站的首页有图片轮播的效果,可以很好的起到广告的作用也可以起到推荐优秀内容的作用. 可是一般的建站程序,首页的幻灯片效果都很一般不是很好看,有的时候就需要我们自己改一下代码. 太复杂的代码自己改不好, ...
jQuery实现图片轮播小练习
图片轮播这个功能很多的网页都会用到,这次模仿着京东首页的图片轮播写了一个,样式和效果与京东的差不多,当然,没有原版那么好,但是感觉也差不多了,希望对大家有点帮助. 主体部分 <head>& ...
javascript 图片轮播效果
类似于淘宝首页广告图片轮播图效果,同时,点击左右箭头及下方数字键可进行切换图片 1.HTML <!DOCTYPE html> <html> <head> ...
安卓首页图片轮播效果(淘宝、京东首页广告效果)
2019独角兽企业重金招聘Python工程师标准>>> 直奔主题: 1.主要原理就是利用定时任务器定时切换ViewPager的页面. 2.里面用了一个读取网络图片的插件,做客户端使用 ...
android魅族轮播图,用angularjs模仿魅族官网的图片轮播功能
使用指令模仿魅族官网的图片轮播功能(angularjs中DOM操作都在指令中完成) html css .slider{ position: relative; width:900px; height: ...
天猫首页迷思之－jquery实现左侧广告牌图片轮播
本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...
axure 图片切换图片的交互_Axure教程：首页图片轮播
图片轮播是各大网站常常见到的形式,文章带我们学习了如何用Axure实现图片轮播功能,一起来看看~ 双11刚过没多久,大家是否都参加了2000+亿的大项目呀?剁手的时候,有没有被各大电商平台的首页图片轮 ...
屏蔽去除CSDN上图片轮播形式的百度推广广告-20190104更新
旧方法之前采用的是在hosts文件中添加网址映射,从而使请求无效,添加的部分如下: 127.0.0.1 cpro.baidu.com 127.0.0.1 cpro.baidustatic.com 1 ...
jquery导航图片全屏滚动、首页全屏轮播图，各式相册
1.目录结构源码 project css js image index1 index2 index3 index4 index.html index1到index4分为四个iframe标签引入的可单 ...

模仿百度首页的图片轮播

模仿百度首页的图片轮播相关推荐

最新文章

热门文章