JS：常见多张图片切换、图片轮播、自动切换效果代码
效果如图所示：
设计思路：
1、设计好图片轮播HTML代码，以及CSS定位，CSS中着重运用好position属性，relative和absolute；
&& CSS代码如下：
&style type="text/css"&
*{margin:0; padding:0;}
ul{list-style-type:}
body{ color:#333333; font:12px/1.6em Arial, Helvetica,
#picfocus{width:345 height:235 border:1px solid #
#piclist{position: float: width:240 height:225
overflow: margin:5px 0px 0px 9 display:}
#pic{position:}
#pic li{overflow:width:240 height:225}
#pic img{ width:240 height:225}
#pictxtbg{position: bottom:0 left:0 background: none
repeat scroll 0 0 #000000; opacity:0.5; width:240 height:35
filter:alpha(opacity=50);}
#pictxt{ position: bottom:8 left:8
#pictxt .normal{display:}
#pictxt .current{ display:}
#pic{ overflow:}
#picbtn{float: display: margin:2px 9px 0px 0}
#picbtn li{ cursor: height:57 opacity:0.5;
filter:alpha(opacity=50);}
#picbtn img{ width:75 height:45 margin:7px 0px 0px
#picbtn .current{ opacity:1; filter:alpha(opacity=100);}
2、JS代码设计思路：
&&（1）当鼠标移动到小图片按钮上时，促发onmouseover函数，调整大图片显示的当前位置，显示当前对应的大图片，以及改变当前显示的小图片按钮及图片标题样式。
（2）编写移动相应的大图片到当前位置的函数，movePic(pic,final_x,final_y,interval)；
编写初始化小图片按钮的样式及标题样式，classNormal(picbtn,pictxt)
编写显示当前图片的样式及标题样式，classCurrent(picbtn,pictxt,n)
&&（3）当鼠标移动到小图片按钮时，调用以上三个函数。
&&（4）自动切换图片，编写函数autoChange()，利用setInterval('autoChange()',interval)函数自动切换图片。
& 相关HTML及JS代码如下：
&script type="text/javascript"&
& //加载window.onload
&& function
addEventLoad(func){
oldonload = window.
if(typeof(window.onload) != 'funciton'){
window.onload =
&&& else {
window.onload = function(){
oldonload();
& //初始化小图片及图片标题样式
& function classNormal(picbtn,pictxt){
&& var picbtns =
document.getElementByIdx_x(picbtn).getElementsByTagName_r("li");
&& var pictxts =
document.getElementByIdx_x(pictxt).getElementsByTagName_r("li");
&& for(var i = 0; i
& picbtns. i++){
picbtns[i].className = "normal";
pictxts[i].className = "normal";
& //当前显示的小图片及图片标题样式
& function classCurrent(picbtn,pictxt,n){
&& var picbtns =
document.getElementByIdx_x(picbtn).getElementsByTagName_r("li");
&& var pictxts =
document.getElementByIdx_x(pictxt).getElementsByTagName_r("li");
&& picbtns[n].className =
"current";
&& pictxts[n].className =
"current";
& //移动图片
& function
movePic(pic,final_x,final_y,interval){
&& var elem =
document.getElementByIdx_x(pic);
&& var xpos =
parseInt(elem.style.left);
&& var ypos =
parseInt(elem.style.top);
&& if(elem.movement){
clearTimeout(elem.movement);
&& if (!elem.style.left) {
elem.style.left = "0px";
&& if (!elem.style.top) {
&& elem.style.top = "0px";
&& if (xpos == final_x
&& ypos == final_y) {
//直接将目标位置赋值给图片当前位置。也可以采用以下代码产生动画
//以下代码：按间隔时间、平均移动的距离，缓慢移动图片到目标位置，产生动画效果
if(xpos & final_x){
&&& dist =
Math.ceil((final_x - xpos)/10);
&&& xpos +=
&& if(xpos &
&&& dist =
Math.ceil((xpos - final_x)/10);
&&& xpos -=
&& if(ypos &
&&& dist =
Math.ceil((final_y - ypos)/10);
&&& ypos +=
&& if(ypos &
&&& dist =
Math.ceil((ypos - final_y)/10);
&&& ypos -=
&& elem.style.left = xpos +
&& elem.style.top = ypos +
&& var repeat = "movePic('" + pic
+ "'," + final_x + "," + final_y + "," + interval + ")";
&& elem.movement =
setTimeout(repeat,interval);&&&&&&&&&&
& //当鼠标移动到小图片上时切换图片
& function changePic(){
&&&if(!document.getElementByIdx_x('picfocus'))
document.getElementByIdx_x('picfocus').onmouseover =
function(){autokey = true};
document.getElementByIdx_x('picfocus').onmouseout = function(){autokey
&& var picbtns =
document.getElementByIdx_x("picbtn").getElementsByTagName_r("li");&&
&& var picnums =
&& picbtns[0].onmouseover =
function(){
movePic('pic',0,0,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',0);&&&
&& if(picnums &=
picbtns[1].onmouseover = function(){
movePic('pic',0,-225,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',1);&&&
&& if(picnums &=
picbtns[2].onmouseover = function(){
movePic('pic',0,-450,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',2);&&&
&& if(picnums &=
picbtns[3].onmouseover = function(){
movePic('pic',0,-675,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',3);&&&
& //自动切换图片
& var autokey =
& setInterval('autoChange()',5000);
& function autoChange(){
&& if(autokey) return
&& var picbtns =
document.getElementByIdx_x("picbtn").getElementsByTagName_r("li");
&& var len =
&& for(var i = 0; i
&& if(picbtns[i].className ==
"current"){
var currentNum =
&& if(currentNum == 0
&& len &= 1){
movePic('pic',0,-225,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',1);&
&& if(currentNum == 1
&& len &= 2){
movePic('pic',0,-450,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',2);&
&& if(currentNum == 2
&& len &= 3){
movePic('pic',0,-675,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',3);&
&& if(currentNum == 3
&& len &= 4){
movePic('pic',0,0,5);
classNormal('picbtn','pictxt');
classCurrent('picbtn','pictxt',0);&
& addEventLoad(changePic);
&div id="picfocus"&
id="piclist"&
&div id="pic" style="left:0
&&&&&&&&&&&&&
&li&&a href="#"
target="_blank"&&img border="0"
alt="" src="images/.jpg"
/&&/a&&/li&
&&&&&&&&&&&&&
&li&&a href="#"
target="_blank"&&img&
border="0" alt="" src="images/.png"
/&&/a&&/li&
&&&&&&&&&&&&&
&li&&a href="#"
target="_blank"&&img border="0"
alt="" src="images/.jpg"
/&&/a&&/li&
&&&&&&&&&&&&&
&li&&a href="#"
target="_blank"&&img border="0"
alt="" src="images/.jpg"
/&&/a&&/li&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&
id="pictxtbg"&&/div&
&div id="pictxt"&
&&&&&&&&&&&
&&&&&&&&&&&&&
class="current"&刘金山被拒门外踹保安？助理：是劝架&/li&
&&&&&&&&&&&&&
class="normal"&《复仇者联盟》《与妻书》《形影不离》映
&&&&&&&&&&&&&
class="normal"&李雪健问鼎百合奖为晚辈蒋梦婕提裙子&/li&
&&&&&&&&&&&&&
class="normal"&刘亦菲携干爹深夜会友人贴面吻告别&/li&
&&&&&&&&&&
id="picbtn"&
&&&&&&&&&&&&&
class="current"&&img
src="images/.jpg"
&&&&&&&&&&&&&
class="normal"&&img
src="images/.png"
/&&/li&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&
class="normal"&&img
src="images/.jpg"
&&&&&&&&&&&&&
class="normal"&&img
src="images/.jpg"
/&&/li&&&&&&&&&&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。华谊兄弟首页3D图片轮播效果
更新时间： 14:44
素材模式：免费
下载次数：240
华谊兄弟首页3D图片轮播效果是一款带预加载进度条，支持鼠标滚轮控制上下页，带图片倒影。
相关素材推荐
华谊兄弟首页3D图片轮播效果
3D Flash gallery图片控件
TiltViewer Flash图片插件
3D图片上下翻牌切换效果
华谊兄弟首页3D图片轮播效果
腾讯网首页首屏可重播的巨幅广告
jQuery迅雷首页全屏图片切换代码
原生js实现淘宝首页点击按钮缓慢回到顶部效果
TOM网首页flash对联广告
新浪网首页左侧流媒体浮动广告
首页图片浮动焦点图广告代码
js循环滚动切换首页广告幻灯片
相关专题推荐
本周最热素材推荐
相关搜索标签
闽ICP备号-7&&QQ交流群: 业务合作QQ:当前位置 :
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天本文转载自：http://www.itxueyuan.org/uploads/javascript/demo/lunbo/zuoyou_title/
人打赏支持
码字总数 87615
后端工程师
说在前头 喜欢并学习前端，一路摸爬滚打过来，现在算算也快满一年的，每天或多或少都会来“拜读”大家的写的文章，学习与感悟了不少，作为一名要变的更强的前端小哥哥，在这个节点上，也想写...
通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...
网页链接地址：http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...
Neuro_annie
1、图片轮播： 官网上的代码已经给的很清楚了，但是经常会出现问题。要做的很简单，首先引入jquery和bootstrap文件，再将官网上的html代码加上，最后加上一行js代码$('.carousel').carsouse...
Bootstrap JS插件使用 & 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 & 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一、基本的轮播图实现 HT...
半指温柔乐
没有更多内容
加载失败，请刷新页面
不安全的“先检查后执行”，代码形式如下： if(条件满足){
//这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作：使用CAS技术，即首先从V中读取...
最近新建了个SpringBoot2.0的项目，因为原来一直使用的是传统的Tomcat部署war包的形式，所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...
一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候，Confluence 可以记录这次单击为参考。 在默认的情况下，外部链接的参考链接...
参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式：可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...
Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有当前位置 :
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天